Chrome DevTools'u şu şekilde kullanıyoruz:
- HTML öğelerini hızla düzenleyin
- Tüm alt öğeleri genişlet
- Müfettişin yer değiştirmesi
- DOM öğesi araması
- paletleri
- Birden fazla imleç
- Base64 görüntüsünü kodla
- Sözde sınıf anahtarlama
- Sütun seçimi
- CURL için kopya isteği
- Ekran klavyesi
- Tüm sayfanın ekran görüntüsü
- Dokunmatik cihazların emülasyonu
- Faydalı özellikler
Adından da anlaşılacağı gibi, Chrome DevTools veya web denetçisi, web geliştiricileri ve onunla ilişkili kişiler için tasarlanmış bir araçtır. Web denetçisi aşağıdakileri yapmanızı sağlar:
- Ekranın doğruluğunu kontrol edin.
- JavaScript'te komut dizilerinin yürütülmesini izleyin.
- Ağ etkinliklerini görüntüleyin.
Bu yazıyı yazarken kullandım kanarya - Chrome'un yeni özelliklerinin test edildiği Chrome sürümü.
Denetçiyi başlatmak için sayfada herhangi bir yere sağ tıklayıp "Ürün kodunu görüntüle" yi seçebilir, ayrıca sadece Ctrl + Shift + C tuşlarına basabilirsiniz.
HTML öğelerini hızla düzenleyin
En basitle başlayalım: düzenleme elemanları.
Nasıl kontrol edilir:
- “Elements” sekmesini seçin.
- Panelin içindeki herhangi bir HTML öğesini seçin.
- Etikete çift tıklayın ve örneğin etiket adını değiştirin.
Düzenleme tamamlandığında, kapanış etiketi otomatik olarak güncellenir.
Tüm alt öğeleri genişlet
Nasıl kontrol edilir:
- Öğeler paneline gidin.
- Bir eleman seçin ve Alt tuşunu basılı tutarken, elemanın solundaki oka tıklayın.
Müfettişin yer değiştirmesi
Denetçi paneli hem tarayıcı penceresinin altına hem de sağ tarafına basılabilir. Örneğin, panelin sağdaki konumu geniş ekran monitörlerde çalışırken uygundur. Ayrıca, denetçi paneli ayrı bir pencereye yerleştirilebilir ve örneğin başka bir monitöre aktarılabilir.
Nasıl kontrol edilir:
- Ctrl + ÜstKrkt + D - Konumu Değiştir
DOM öğesi araması
Muhtemelen bunun bir keşif olacağı pek fazla kişi değil, fakat “Elements” sekmesinde DOM ile arama yapabilirsiniz.
Nasıl kontrol edilir:
- Ctrl + F tuşlarına basın ve önerilen arama sorgusunu girin.
paletleri
Paletten renk seçin Chrome'un son sürümlerinde renk seçimi bazı değişikliklerden geçti: renk seçimini kolaylaştırmak için iki palet eklendi.
Birden fazla imleç
İmleci hareket ettirin ve imleç eklemek için Ctrl tuşunu basılı tutarken istediğiniz alanı tıklatın. İşlemi Ctrl + U tuşlarını kullanarak geri alabilirsiniz. Şahsen, hiç faydalı olmadım.
Base64 görüntüsünü kodla
Nasıl kontrol edilir:
- Ağ paneline geçin.
- Resim seç
- Resme sağ tıklayın ve "" seçeneğini seçin
Sözde sınıf anahtarlama
Sözde sınıflar, elemanların durumunu ve göreceli konumlarını yansıtır.
Nasıl kontrol edilir:
- Öğeler panelindeki bir öğeye sağ tıklayın ve Öğeyi Zorla Listesinden bir sözde sınıf seçin.
- Ayrıca Elements panelinin sağ tarafında bir sözde sınıf seçebilirsiniz.
Sütun seçimi
Nasıl kontrol edilir:
- "Kaynaklar" paneline gidin.
- Herhangi bir dosyayı seçin.
- Alt tuşunu basılı tutarak metni seçin.
Bir sütun seçmek ayrıca, Elements panelinde HTML düzenlendiğinde de işe yarar.
CURL için kopya isteği
Ağ sekmesindeki herhangi bir istek, kıvrılarak kullanılarak çalıştırılmak üzere kopyalanıp terminale yapıştırılabilir.
Ekran klavyesi
Nexus 5X profili seçiliyse, ekran klavyesi etkinken sitenin nasıl göründüğünü görebilirsiniz.
Chrome DevTools: Ekran Klavyesi
Tüm sayfanın ekran görüntüsü
Tüm sayfanın bir fotoğrafını çekmek çok basittir. Sadece ihtiyacım var ...
- Müfettişi açın.
- Konsola git.
- Ctrl + ÜstKrkt + P tuşlarına basın
- "Ekran görüntüsü" yazın
- "Tam boyutlu ekran görüntüsünü yakala" yı seçin
Tüm sayfanın ekran görüntüsü Dokunmatik cihazların emülasyonu
Ayrıca bazı sensörleri simüle edebilirsiniz:
- Dokunmatik ekran
- Coğrafi konum için koordinatlar
- ivmeölçer
Denemek için nasıl:
- Öğeler panelini seçin.
- "Esc" e basın ve "Emülasyon> Sensörler" i seçin.
Faydalı özellikler
anahtarlar ve değerler
Tuşlar ve değerler işlevleri, sırasıyla nesnenin tuşlarını veya değerlerini konsola çıkarmanızı sağlar. 
Anahtarları ve nesne değerlerini ayrı ayrı görüntüleme