Hepimizin Geliştirici Araçları (Developer Console) olarak bildiği DevTools nedir? Nasıl kullanılır? Bizlere ne gibi avantajlar sağlar? Bu yazımızda developer console a, ne olduğuna, nasıl çalıştığına, harici bir sayfada yada ekranın herhangi bir yerinde nasıl açılacağına, bizlere ne gibi avantajlar sunduğuna bakacağız.
DevTools (Developer Console) Nedir?
“DevTools,” kısaltılmış bir isimdir ve genellikle “Developer Tools” olarak bilinir. Web geliştiricilerinin tarayıcılarında kullanabilecekleri bir dizi araçtır. Bu araçlar, web sayfalarının yapılarını, performansını, hatalarını ve diğer birçok özelliğini analiz etmelerine yardımcı olur. Genellikle tarayıcıların bir parçası olarak gelirler ve geliştiricilerin web sayfalarını daha etkili bir şekilde geliştirmelerine olanak tanır. DevTools, HTML, CSS ve JavaScript gibi web teknolojilerine dair derinlemesine bilgi sağlar ve bu teknolojilerle çalışırken hata ayıklamayı, performansı analiz etmeyi ve web sayfalarını optimize etmeyi kolaylaştırır. Google Chrome, Mozilla Firefox, Safari ve diğer birçok modern tarayıcı, geliştiricilere bu tür araçlar sunar.
DevTools (Developer Console) İle Neler Yapılabilir?
Developer Tools (DevTools), web geliştiricilerin tarayıcıda çalışan web sayfalarını analiz etmelerine, hata ayıklamalarına ve optimize etmelerine olanak tanıyan güçlü bir araç setidir.
DevTools’un birinci temel özelliği, HTML ve CSS düzenleme imkanı sunmasıdır. Bu özellik sayesinde, web sayfanızın kodunu canlı olarak düzenleyebilirsiniz. Bu, tasarımı hızlı bir şekilde değiştirmenizi ve sonuçları anında görmek için mükemmel bir yoldur.
İkinci olarak, DevTools JavaScript hata ayıklama (debugging) için bir dizi araç sağlar. Breakpoints (durdurma noktaları) ekleyebilir, değişkenleri izleyebilir, Call Stack’i inceleyebilir ve daha fazlasını yapabilirsiniz.
Ağ analizi DevTools’un diğer önemli bir özelliğidir. Sayfanın yükleme sürelerini, kaynakları (örneğin, resimler, stil dosyaları, JavaScript dosyaları) ve her isteği görebilir ve analiz edebilirsiniz. Bu, performans sorunlarını tanımlamak ve optimize etmek için çok değerli bir araçtır.
Son olarak, DevTools’un konsol (console) özelliği vardır. Bu, JavaScript kodunuzla etkileşim kurmanıza olanak tanır. JavaScript kodunu çalıştırabilir, hataları görebilir, değişkenleri deneyebilir ve daha pek çok işlem yapabilirsiniz. Konsol ayrıca web sayfanızın durumuyla ilgili genel bilgileri de sağlar.
Tarayıcılarda DevTools Nasıl Açılır?
Mac ve Windows işletim sistemlerine göre tarayıcılarda DevTools (developer console) açma yöntemleri;
Google Chrome:
1. Mac:
– Klavye kısayolu: Cmd + Opt + I
– Menüden: Menü simgesine tıklayın (üç dikey nokta), “More Tools” seçeneğini seçin, ardından “Developer Tools” seçeneğini seçin.
2. Windows:
– Klavye kısayolu: Ctrl + Shift + I
– Menüden: Menü simgesine tıklayın (üç dikey nokta), “More Tools” seçeneğini seçin, ardından “Developer Tools” seçeneğini seçin.
Mozilla Firefox:
1. Mac:
– Klavye kısayolu: Cmd + Opt + I
– Menüden: Menü simgesine tıklayın (üç dikey çizgi), “Web Developer” seçeneğini seçin, ardından “Toggle Tools” seçeneğini seçin.
2. Windows:
– Klavye kısayolu: Ctrl + Shift + I
– Menüden: Menü simgesine tıklayın (üç dikey çizgi), “Web Developer” seçeneğini seçin, ardından “Toggle Tools” seçeneğini seçin.
Safari:
Mac:
– Klavye kısayolu: Cmd + Opt + C (Console’u açar)
– Menüden: Safari menüsünde “Preferences” seçeneğine tıklayın, ardından “Advanced” sekmesine geçin ve “Show Develop menu in menu bar” seçeneğini işaretleyin. Artık menüde “Develop” sekmesi görünür, buradan “Show Web Inspector” seçeneğini seçebilirsiniz.
Diğer tarayıcılar:
– Diğer tarayıcılarda, genellikle benzer şekilde klavye kısayolları veya menüler aracılığıyla Developer Tools açılır. Tarayıcıların belirli sürümleri veya güncellemeleri bu kısayolları veya menü seçeneklerini değiştirebilir, bu yüzden en güncel bilgileri tarayıcı belgelerinden veya ilgili kaynaklardan kontrol etmek önemlidir.
Chrome da DevTools Açma
Bir sayfada geliştirici araçlarını açmak için bir yere sağ tıklayıp incele (inspect) tıklanır.
Geliştirici Araçları, Elements (Öğeler) panelini açar ve öğeyi DOM ağacında seçer. Styles (Stiller) bölmesinde, seçilen öğeye uygulanan CSS kurallarını görebilirsiniz.
Ayrıca geliştirici araçlarını açmak için yine ilgili sayfada iken sağ üst köşedeki 3 noktaya tıklanır Diğer Araçlar > Geliştirici Araçları (More Tools > Developer Tools) seçilir.
| OS | Öğeler | Konsol | GİRİLEN Son panel |
|---|---|---|---|
| Windows veya Linux | Ctrl + Üst Karakter + C Ctrl + Üst Karakter + J | F12 | Ctrl + Üst Karakter + I |
| Mac | Cmd + Option + C Cmd + Option + J | Fn + F12 | Cmd + Option + I |
DevTools Yerleşimi
Tarayıcılarda açtığımız geliştirici araçları bölümünü kullanım amacımıza göre tarayıcımızda istediğimiz bölgelere yerleştirebiliriz.
Dock side yazan bölümden istediğiniz yerleşimi seçebilirsiniz.
- İlk simge geliştirici araçları ekranını yeni bir tarayıcı penceresinde açar,
- İkinci simge geliştirici araçları ekranını tarayıcının sol tarafında açar,
- Üçüncü simge geliştirici araçları ekranını tarayıcının sağ tarafında açar,
- Dördüncü simge geliştirici araçları ekranını tarayıcının alt tarafında açar.
Bunlar işinize yaramıyor ve geliştirici araçlarını yeni bir sekmede mi açmak istiyorsunuz. Bunun için yapmanız gereken kullandığınız işletim sistemine göre aşağıdaki kodları yazmak,
#macOS
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
#windows
start chrome --auto-open-devtools-for-tabs
#linux
google-chrome --auto-open-devtools-for-tabs
Paylaş
Takip Et
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
