DevTools'ta çok zaman harcıyorum ve eminim siz de geçiriyorsunuzdur. Hatta bazen, özellikle tarayıcılar arası sorunları ayıklarken aralarında gidip geliyorum. DevTools, tarayıcıların kendilerine çok benzer; bir tarayıcının DevTools'undaki tüm özellikler, başka bir tarayıcının DevTools'unda aynı olmayacak veya desteklenmeyecektir.

Ancak, birlikte çalışabilen epeyce DevTools özelliği var, hatta daha az bilinenleri bile sizinle paylaşmak üzereyim.

Kısa olması adına, makalede Chrome, Edge ve Opera gibi tüm Chromium tabanlı tarayıcılara atıfta bulunmak için "Chromium" kullanıyorum. İçlerindeki DevTools'un çoğu birbiriyle tamamen aynı özellikleri ve yetenekleri sunar, bu yüzden bu, hepsine aynı anda atıfta bulunmak için benim kısaltmamdır.

DOM ağacındaki arama düğümleri

Bazen DOM ağacı, diğer düğümlerde yuvalanmış düğümlerde yuvalanmış düğümlerle doludur ve bu böyle devam eder. Bu, tam olarak aradığınızı bulmanızı oldukça zorlaştırır, ancak şunu kullanarak DOM ağacında hızlı bir şekilde arama yapabilirsiniz: Cmd + F (macOS) veya Ctrl + F (Windows).

Ayrıca geçerli bir CSS seçici kullanarak da arama yapabilirsiniz. .redveya bir XPath kullanarak, örneğin //div/h1.

Chromium tarayıcılarında, siz yazarken odak otomatik olarak arama ölçütleriyle eşleşen düğüme atlar; bu, daha uzun arama sorgularıyla veya büyük bir DOM ağacıyla çalışıyorsanız can sıkıcı olabilir. Neyse ki, bu davranışı adresine giderek devre dışı bırakabilirsiniz. Ayarlar (F1) → Tercihler → Küresel → Yazarken ara → devre dışı bırakmak.

DOM ağacında düğümü bulduktan sonra, düğümü görüntü alanına getirmek için düğümü sağ tıklayıp "Görünümün içine kaydır"ı seçerek sayfayı kaydırabilirsiniz.

Düğümlere konsoldan erişin

DevTools, bir DOM düğümüne doğrudan konsoldan erişmenin birçok farklı yolunu sunar.

Örneğin, kullanabilirsiniz $0 DOM ağacında seçili olan düğüme erişmek için. Chromium tarayıcıları, geçmiş seçimin ters kronolojik sıralamasında seçilen düğümlere aşağıdakileri kullanarak erişmenize izin vererek bunu bir adım daha ileri götürür: $1, $2, $3, vb.

Chromium tarayıcılarının yapmanıza izin verdiği başka bir şey, düğüm yolunu şu biçimde bir JavaScript ifadesi olarak kopyalamaktır: document.querySelector düğüme sağ tıklayarak ve seçerek kopya → JS yolunu kopyala, daha sonra konsoldaki düğüme erişmek için kullanılabilir.

Bir DOM düğümüne doğrudan konsoldan erişmenin başka bir yolu: geçici bir değişken olarak. Bu seçenek, düğüme sağ tıklayarak ve bir seçenek belirleyerek kullanılabilir. Bu seçenek, her tarayıcının DevTools'unda farklı şekilde etiketlenmiştir:

• Krom: Sağ tıklayın → "Global değişken olarak sakla"
• Firefox: Sağ tıklayın → "Konsolda Kullan"
• Safari: Sağ tıklayın → "Kayıt Öğesi"

Öğeleri rozetlerle görselleştirin

DevTools, düğümün yanında bir rozet görüntüleyerek belirli özelliklerle eşleşen öğeleri görselleştirmeye yardımcı olabilir. Rozetler tıklanabilir ve farklı tarayıcılar çeşitli farklı rozetler sunar.

In Safari, Öğeler paneli araç çubuğunda, belirli rozetlerin görünürlüğünü değiştirmek için kullanılabilen bir rozet düğmesi vardır. Örneğin, bir düğümün bir display: grid or display: inline-grid Uygulanan CSS bildirimi, bir grid rozeti yanında görüntülenir. Rozete tıklamak, sayfada ızgara alanlarını, iz boyutlarını, satır numaralarını ve daha fazlasını vurgulayacaktır.

Şu anda desteklenen rozetler Firefox'ın DevTools'u Firefox'ta listeleniyor kaynak belgeler. Örneğin, bir scroll rozet, kaydırılabilir bir öğeyi belirtir. Rozete tıklandığında taşmaya neden olan öğe vurgulanır. overflow yanındaki rozet.

In Krom tarayıcılarda, herhangi bir düğüme sağ tıklayıp seçebilirsiniz "Rozet ayarları..." mevcut tüm rozetleri listeleyen bir kapsayıcı açmak için. Örneğin, ile elemanlar scroll-snap-type bir sahip olacak scroll-snap yanındaki rozet, tıklandığında scroll-snap o öğenin üzerine bindirme.

Ekran görüntüsü alma

Bir süredir bazı DevTools'tan ekran görüntüsü alabiliyoruz, ancak artık hepsinde mevcut ve tam sayfa çekim yapmanın yeni yollarını içeriyor.

İşlem, yakalamak istediğiniz DOM düğümüne sağ tıklayarak başlar. Ardından, kullandığınız DevTools'a bağlı olarak farklı şekilde etiketlenen düğümü yakalama seçeneğini belirleyin.

üzerinde aynı adımları tekrarlayın. html tam sayfa ekran görüntüsü almak için düğüm. Ancak bunu yaptığınızda, Safari'nin öğenin arka plan renginin şeffaflığını koruduğunu belirtmekte fayda var — Chromium ve Firefox onu beyaz bir arka plan olarak yakalayacaktır.

Başka bir seçenek var! Sayfanın "duyarlı" bir ekran görüntüsünü alabilir, bu da sayfayı belirli bir görünüm alanı genişliğinde yakalamanıza olanak tanır. Tahmin edebileceğiniz gibi, her tarayıcının oraya ulaşmanın farklı yolları vardır.

• Krom: Cmd + Shift + M (macOS) veya Ctrl + Shift + M (Pencereler). Veya "İncele" simgesinin yanındaki "Aygıtlar" simgesini tıklayın.
• Firefox: Araçlar → Tarayıcı Araçları → “Duyarlı Tasarım Modu”
• Safari: Geliştir → "Duyarlı Tasarım Moduna Girin"

Chrome ipucu: Üst katmanı inceleyin

Chrome, bir iletişim kutusu, uyarı veya modal gibi üst katman öğelerini görselleştirmenize ve incelemenize olanak tanır. Bir eleman eklendiğinde #top-layer, bir alır top-layer yanındaki rozet, tıklandığında sizi hemen sonra bulunan üst katman konteynerine atlar. </html> etiketi.

İçindeki elemanların sırası top-layer konteyner istifleme sırasını takip eder, yani sonuncusu en üsttedir. Tıkla reveal düğüme geri atlamak için rozet.

Firefox ipucu: Kimliğe atla

Firefox, ID özniteliğine atıfta bulunan öğeyi aynı DOM'daki hedef öğeye bağlar ve altını çizerek vurgular. Kullanmak CMD + Click (macOS) veya CTRL + Click (Windows) )tanımlayıcı ile hedef öğeye atlamak için.

Tamamlayan

Pek çok şey, değil mi? Hem Chromium, Firefox hem de Safari'de desteklenen bazı inanılmaz kullanışlı DevTools özelliklerinin olması harika. Beğendiğiniz üçünün de desteklediği daha az bilinen başka özellikler var mı?

Yeniliklerden haberdar olmak için yakınımda tuttuğum birkaç kaynak var. Onları burada paylaşayım dedim:

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/