Browser DevTools Sırları — Giriş

Geçtiğimiz yıllar boyunca, browser developer tools (devtools) temel Javascript console işlemlerinden fully integrated development ve debugging ortamlarına dönüştü. Web uygulamalarımızın herhangi bir yerinde değişiklik yapmak ve incelemek mümkün hale geldi. Ancak bir çoğumuz temellerin ötesine geçemiyoruz.

Bu seride bildiğiniz veya bilmediğiniz bir sürü özelliği keşfedeceğiz.

Keyboard Shortcuts

Devtools’u başlatmak için aşağıdaki seçenekleri kullanabilirsin.

• F12
• ctrl + shift + i
• Sayfanın herhangi bir yerinde sağ tıklayıp Inspect(incele) veya Inspect Element’i seçebilirsiniz.

Kullanabileceğiniz klavye kısayollarını görmek için F1 tuşuna veya 🔧 Ayarlar button’una tıklayabilir, açılan menüden Shortcuts seçeneğine gidebilirsiniz.

Docking (Yerleştirme)

Developer tools bölmesi tarayıcı penceresinin sağına, soluna veya altına yerleştirilebilir. Daha fazla alana ihtiyacınız varsa, bölmeyi ayrı bir pencereye çıkarabilirsiniz. Yerleştirme seçenekleri Chrome’daki ana üç noktalı menüde bulunur.

Settings (Ayarlar)

Dev Tools ayarlarına aynı menüden veya F1'e basarak erişilebilir. Bu, gösterilen araçlar, tema, sekme boyutları, renk birimleri gibi seçenekleri ayarlamanıza olanak tanır.

Auto-Start DevTools

Bir web uygulaması üzerinde çalışırken, tarayıcınızı başlatmak, URL’i açmak ve DevTools’u tek bir adımda başlatmak için özel bir masaüstü kısayolu oluşturmak pratik olabilir. Chrome için, aşağıdaki Chrome komut satırı ile her sekmede devtools açık gelecek şekilde bir ayarlama yapabilirsiniz.

“…\chrome.exe” -auto-open-devtools-for-tabs

Private/Incognito Mode

Private/incognito mode tarayıcı kapatıldıktan sonra cookies ve localeStorage gibi verileri saklamaz.Bu mod, progressive web apps (PWA) ve oturum açma sistemlerini test etmek için idealdir.

Komut Paleti

Chrome’un devtools’u editör benzeri bir komut paleti sunar. (Kısayol için ctrl + shift + p) Çoğu işleve ve kaynak dosyaya hızlı erişim sağlar.

Örneğin site içerisinde kullanılan bir dosyaya erişmek için dosya adının yazılması yeterli olacaktır.

Console

Console, hangi DevTool panelini kullanıyor olursanız olun kullanışlıdır. Alt bölmede bir konsol penceresini göstermek ve gizlemek için Esc tuşuna basabilirsiniz.

Sayfa Renklerini Bul

Çoğu tarayıcı, herhangi bir CSS color özelliğine tıkladığınızda bir color picker gösterir.

Sayfada kullanılan renkler de panelin altında gösterilir.

Color Kontrast

Color picker, text ile arka plan rengi arasındaki görsel farkı belirten kontrast oranını da gösterir.

Metnin çoğu kişi tarafından okunabilmesini sağlayan AA ve AAA erişilebilirlik standartlarına göre (asgari “Kontrast” kullanımını tanımlayan derecelendirme sistemi) bu oranların nasıl olduğunu görmek için orana tıklayabilirsiniz.

Örnek bir web sitesini incelediğimde metnin AA ve AAA seviyesinde olmadığını görüyoruz.

Kullanılmayan Css ve Javascript’i bulun

Chrome’un Coverage paneli, kullanılmayan kodu hızla bulmanıza olanak tanır. DevTools’un More Tools alt menüsünden Coverage seçin, ardından record buttonuna basıp ve uygulamanıza göz atabilirsiniz. Ardından kaynağını açmak için herhangi bir dosyayı tıklayın.

Kullanılmayan kod, satır numarası bölmesinde kırmızıyla vurgulanır.

Yeni bir sayfaya gittiğinizde Chrome’un kullanılmış / kullanılmamış kodu hatırlamadığını unutmayalım. Bu özellik yalnızca bulunduğumuz sayfada o anda kullanılan / kullanılmayan kodu gösterir.

Enable Offline File Overrides

Chrome, herhangi bir dosyanın sisteminize kaydedilmesine izin verir, böylece tarayıcı onu ağ yerine cihazdan alır. Örneğin, normalde bir CDN’den erişilen assetleri yüklemek veya düzenlemek istiyorsak, bu özellik çevrimdışı geliştirmeye izin verir.

Sources içinde overrides panelini açıp ve Select folder for overrides’a tıklayıp uygun bir klasör seçilebilir.

Şimdi Network panelindeki herhangi bir kaynağı sağ tıklayıp ve Save for override’i seçin. Artık sayfa yeniden yüklendiğinde, dosyaya Web yerine locale sistemimizden erişmiş olacağız. Kaydedilen dosya da dosyada değişiklik yapılabilir.

Performans Ekranı

Chrome’un Performans monitörüne DevTools’un More Tools menüsünden erişilebilir.

Bu özellik CPU usage, JavaScript heap size, DOM nodes, event listeners, style recalculations ve daha fazlasının analizini sağlar ve grafikler real-time güncellenir.

Lighthouse

Chrome’un Lighthouse paneli başlangıçta progressive web app(PWA) işlevselliğini değerlendirmek için tasarlanmıştı, ancak tool hem mobil hem de masaüstü görünümlerinde performance, accessibility, best practices ve SEO’yu analiz etmek için genel amaçlı bir toola dönüştü.

Generate Report dediğimizde raporu görebiliriz.

Her sorunu yakalayamaz ve bazı noktalara katılmadığımız durumlar olabilir. Ancak olası sorunların hızlı bir şekilde değerlendirilmesinin yararlı bir yoludur.

Detaylara da erişebiliyoruz;

Şimdi..

DevTools’a biraz giriş yaptık ve temel özelliklerini öğrendik. Umarım keyifli ve öğretici olmuştur. 😉