Tercihler

Temalar , DevTools kullanıcı arayüzü için bir renk teması belirler.

Temalar:

• Sistemin tercihi
• Açık renk
• Kasvetli

Panel düzeni , panellerdeki bölmeleri düzenler.

Öğeler > Stiller ve kardeş sekmelerin yanı sıra Kaynaklar > Hata Ayıklama Aracı bölmesini etkiler. Otomatik seçeneği, düzenin DevTools genişliğine bağlı olmasını sağlar.

Panel düzeni:

• yatay
• dikey
• otomatik

Dil , Geliştirici Araçları kullanıcı arayüzünün yerel ayarını belirler.

Bu ayarı uygulamak için Geliştirici Araçları'nı yeniden yükleyin.

Dil:

• Tarayıcı kullanıcı arayüzü dili
• Yerel ayar seçeneklerinden biri (bu örnekte Çince)

Paneller arasında geçiş yapmak için Ctrl/Cmd + 0-9 kısayolunu etkinleştir seçeneği, klavyeyi kullanarak panelleri açmanıza olanak tanır.

Bu videoda, ilgili klavye kısayollarını kullanarak sekmeler arasında nasıl geçiş yapacağınız gösterilmektedir.

Duraklatılmış durum yer paylaşımını devre dışı bırak seçeneği, kod yürütme duraklatıldığında görüntü alanında Hata ayıklayıcıda duraklatıldı yer paylaşımını gizler.

Her güncellemeden sonra Yenilikleri Göster özelliği, her Chrome güncellemesinden sonra otomatik olarak Yenilikler çekmecesi sekmesini açar.

Anonim ve içerik komut dosyalarında ara, Arama sekmesini kullanarak Chrome uzantılarındakiler de dahil olmak üzere yüklü tüm JavaScript dosyalarında arama yapmanıza olanak tanır.

Bu videoda, bir uzantı kaynak dosyasında metnin nasıl aranacağı gösterilmektedir.

Kenar çubuğundaki dosyaları otomatik olarak göster özelliği, Düzenleyici'de sekmeler arasında geçiş yaptığınızda Kaynaklar > Sayfa bölmesindeki dosyaları seçer.

Bu videoda, bu seçenek etkinleştirildiğinde Kaynaklar panelinin siz sekmeler arasında geçiş yaparken gezinme ağacındaki dosyaları nasıl seçtiği gösterilmektedir.

JavaScript kaynak eşlemelerini etkinleştir seçeneği, Geliştirici Araçları'nın oluşturulan veya sıkıştırılmış JavaScript dosyalarının kaynaklarını bulmasını sağlar.

Sekme tuşunun odağı taşımasını etkinleştir seçeneği, Sekme tuşunun Düzenleyici'ye Sekme karakteri eklemek yerine odağı DevTools'a taşımasını sağlar.

Geliştirici Araçları'nın yeniden yüklenmesi gerekir.

Bu videoda ilk olarak Sekme tuşuyla eklenen Sekme karakterleri gösterilmektedir. Ardından, bu seçeneği etkinleştirip Geliştirici Araçları'nı yeniden yüklediğinizde Sekme tuşu odağı hareket ettirir.

Girintiyi algıla seçeneği, girintiyi Düzenleyici'de açılan kaynak dosyadaki girinti olarak ayarlar.

Geliştirici Araçları'nın yeniden yüklenmesi gerekiyor.

Bu videoda ilk olarak varsayılan girinti sekiz boşluk olarak gösterilmektedir. Ardından bu seçeneği etkinleştirdiğinizde varsayılan girintiyi kaynak dosyanın girintisiyle geçersiz kılar.

Otomatik tamamlama, Düzenleyici'de kullanışlı öneriler sunar.

Öncelikle bu videoda herhangi bir öneri gösterilmiyor. Ardından bu seçeneği etkinleştirdiğinizde Düzenleyici, komut tamamlama önerileri gösterir.

Otomatik ayraç kapatma özelliği, açılış etiketi yazdığınızda otomatik olarak bir kapanış parantezi veya etiketi ekler.

Bu videoda, otomatik parantez kapatma özelliği etkinleştirilmeden önce ve sonra açılış parantezi yazma işlemi gösterilmektedir.

Köşeli parantez eşleştirme, Düzenleyici'de eşlenmemiş köşeli parantez, kıvrık parantez veya parantezi açık kırmızı renkle alt çizer ve vurgular.

Kod daraltma, Düzenleyici'de eğik parantez içindeki kod bloklarını daraltmanızı ve genişletmenizi sağlar.

Geliştirici Araçları'nın yeniden yüklenmesi gerekir.

Bu videoda, bu seçeneği etkinleştirdiğinizde kod bloklarının nasıl daraltılacağı gösterilmektedir.

Boşluk karakterlerini göster , Düzenleyici'de boşluk karakterlerini gösterir.

Geliştirici Araçları'nın yeniden yüklenmesi gerekiyor. Seçenekler şunları yapar:

• Tümü, tüm boşluk karakterlerini nokta (...) olarak gösterir. Ayrıca Düzenleyici, Tab karakterini çizgi (—) olarak gösterir.
• Sondan, satırların sonundaki boşluk karakterlerini açık kırmızı renkte vurgular.

Boşluk karakterlerini göster:

• Yok
• Tümü (...)
• Arka planda oynatma

Hata ayıklama sırasında değişken değerlerini satır içinde görüntüleyin, yürütme duraklatılmış durumdayken atama ifadelerinin yanında değişken değerlerini gösterir.

Bir kesme noktası tetiklendiğinde Kaynaklar panelini odakla, yürütmeyi duraklatan kesme noktasının bulunduğu satırda Kaynaklar > Düzenleyici'yi açar.

Bu videoda ilk olarak, bir ayrılma noktasında duraklatıldığında Kaynaklar paneli odak dışı oluyor. Ardından bu seçeneği etkinleştirdiğinizde Geliştirici Araçları, Kaynaklar panelinde Düzenleyici'yi açar ve size kesme noktasının bulunduğu kod satırını gösterir.

Küçültülmüş kaynakları otomatik olarak okunaklı hâle getirme, bu kaynakları okunabilir hale getirir.

Düzenleyici, güzel bir şekilde yazdırıldığında tek bir uzun kod satırını birden fazla satırda gösterebilir. Bu satırın satır devamı olduğunu belirtmek için satırın başına - eklenir.

CSS kaynak eşlemelerini etkinleştir, DevTools'un oluşturulan CSS dosyalarının kaynaklarını (ör. .scss) bulmasını ve size göstermesini sağlar.

Dosya bitiminden sonra kaydırmaya izin ver, Düzenleyici'deki son satırdan daha ileriye kaydırmanıza olanak tanır.

Bu videoda, bu seçeneği etkinleştirdiğinizde dosyanın sonundan nasıl geçiş yapacağınız gösterilmektedir.

Geliştirici Araçları'nın uzak dosya yollarındaki kaynak haritaları gibi kaynakları yüklemesine izin verin. Güvenlik nedeniyle varsayılan olarak devre dışıdır.

DevTools devre dışı bırakılırsa aşağıdakine benzer mesajları Konsol'a kaydeder:

Varsayılan girinti , Tab tuşunun Düzenleyici'ye eklediği boşluk sayısını seçmenizi sağlar.

Varsayılan girinti:

• 2 boşluk
• 4 boşluk
• 8 boşluk
• Sekme karakteri

Bu örnekte, varsayılan girintinin önce sekiz boşluk, ardından bir Sekme karakteri olarak nasıl ayarlanacağı gösterilmektedir.

Kullanıcı aracısı gölge DOM'unu göster, DOM ağacındaki gölge DOM düğümlerini gösterir.

Kelime kaydırma, DOM ağacındaki uzun satırları bölerek sonraki satıra sarmalar.

HTML yorumlarını göster, DOM ağacında HTML yorumlarını gösterir.

Fareyle üzerine gelindiğinde DOM düğümünü göster, inceleme modunda fareyle görüntü alanındaki bir öğenin üzerine geldiğinizde DOM ağacında karşılık gelen düğümü seçer.

Bu videoda, DOM ağacında DOM düğümlerinin seçilmediği gösterilmektedir. Daha sonra, bu seçeneği etkinleştirdiğinizde Öğeler paneli, fareyle üzerine gelindiğinde düğümleri seçer.

Ayrıntılı inceleme ipucunu göster, fareyle bir öğenin üzerine geldiğinizde inceleme modunda ipucu görüntüler.

Fareyle üzerine gelindiğinde cetvelleri göster seçeneği, siz DOM ağacındaki öğelerin üzerine geldiğinizde görüntü alanındaki cetvelleri gösterir.

Stiller bölmesinde bir mülkün üzerine geldiğinizde CSS dokümanları ipucunu göster özelliği, kısa bir açıklama içeren bir ipucu görüntüler.

Daha fazla bilgi bağlantısı, mülkle ilgili MDN CSS Referansı'na yönlendirir.

Günlüğü sakla, Ağ panelindeki Günlüğü koru ile aynıdır. Sayfa yüklemelerindeki istekleri kaydeder.

Bu videoda ilk olarak, sayfa yeniden yüklendiğinde yenilenen ve bu seçeneği etkinleştirdiğinizde devam edilen istek günlüğü gösterilmektedir.

Ağ günlüğünü kaydet, Ağ panelindeki Ağ günlüğünü kaydet ile aynıdır. Ağ günlüğündeki istekleri kaydetmeyi başlatır veya durdurur.

Ağ isteği engellemeyi etkinleştir, Ağ isteği engelleme çekmecesinde bulunan kalıplarla eşleşen istekleri engeller.

Bu videoda öncelikle isteklerin engellenmediği gösterilmektedir. Ardından, bu seçeneği etkinleştirmenizin ardından Ağ isteği engelleme çekmecesindeki bir kalıp bunları engeller.

Önbelleği devre dışı bırak (Geliştirici Araçları açıkken), Ağ panelindeki Önbelleği devre dışı bırak ile aynıdır. Tarayıcı önbelleğini devre dışı bırakır.

Hassas verilerle HAR oluşturulmasına izin ver seçeneği, indirHAR'yi dışa aktar düğmesine hassas veriler ile veya bu veriler olmadan (arındırılmış) dışa aktarma işlemi yapmanıza olanak tanıyan seçenekler ekler.

Cookie, Set-Cookie ve Authorization başlıklarındaki veriler hassas veridir.

Renk kodu kaynak türleri, ağ günlüğünün Şelale sütunundaki istekleri türüne bağlı olarak farklı renklerde vurgular.

Ağ günlüğünü çerçeveye göre gruplandır, Ağ panelindeki Çerçevelere göre gruplandır ile aynıdır. Bu seçenek, satır içi çerçeveler tarafından başlatılan istekleri gruplandırır.

Bu sitede reklam engellemeyi zorunlu kıl, DevTools açıkken sayfada algılanan reklamları engeller.

Flamechart fare tekerleği hareketleri , alev grafiğinde gezinirken fare tekerleğinize kaydırma veya yakınlaştırma işlemi atar.

Flame chart fare tekerleği hareketleri:

• Kaydırma
• Tarih aralığını

Bu örnekte, Performans panelindeki bir alev grafiğinde hem kaydırma hem de yakınlaştırma fare tekerleği işlemleri gösterilmektedir.

Ağ mesajlarını gizle, Konsoldaki ağ mesajlarını gizler.

Bu videoda, hem Ayarlar'da hem de Konsol Ayarları'nda bu seçenekle ağ mesajlarının nasıl gizleneceği gösterilmektedir.

Yalnızca seçili bağlam, Console'un yalnızca seçili bağlamla (üst, iframe, işleyici veya uzantı) ilgili mesajları göstermesini sağlar.

Bu videoda, bu seçeneğin hem Ayarlar'da hem de Konsol > Ayarlar'da nasıl etkinleştirileceği ve Konsol'da bağlamın nasıl seçileceği gösterilmektedir.

XMLHttpRequest'leri günlüğe kaydet seçeneği, Console'un XHR ve getirme isteklerini günlüğe kaydetmesini sağlar.

Bu videoda, bu seçeneğin hem Ayarlar hem de Konsol > Ayarlar'da nasıl etkinleştirileceği ve XHR finished loading mesajlarının Konsola nasıl kaydedileceği gösterilmektedir.

Zaman damgalarını göster, Konsol'da iletilerin yanında zaman damgalarının gösterilmesini sağlar.

Geçmişten otomatik tamamlama, Console'un siz yazarken daha önce çalıştırdığınız komutları önermesini sağlar.

Aynı seçeneği Konsol > Ayarlar bölümünde de bulabilirsiniz.

Enter'a basıldığında otomatik tamamlama önerisini kabul et seçeneği, Enter tuşuna bastığınızda Konsol'un otomatik tamamlama açılır menüsünden seçilen öneriyi kabul etmesini sağlar.

Bu videoda, bu seçeneği etkinleştirmeden önce ve etkinleştirdikten sonra Enter tuşuna bastığınızda ne olduğu gösterilmektedir.

Benzer mesajlar konsolda gruplandırılsın seçeneği, Konsol'un benzer mesajları birlikte gruplandırmasına olanak tanır.

Aynı seçeneği Konsol > Ayarlar bölümünde de bulabilirsiniz.

Konsolda CORS hatalarını göster seçeneği, Konsol'un günlüğe kaydettiği CORS hatalarını göstermesini sağlar.

Aynı seçeneği Konsol > Ayarlar'da da bulabilirsiniz.

Erken değerlendirme, siz bir komut yazarken Konsol'un bir çıkışın önizlemesini göstermesini sağlar.

Aynı seçeneği Konsol > Ayarlar bölümünde de bulabilirsiniz.

Bu videoda çeşitli çıkış önizlemeleri gösterilmektedir.

Kod değerlendirmesini kullanıcı işlemi olarak ele al seçeneği, Konsol'da çalıştırdığınız tüm komutları kullanıcı etkileşimine dönüştürür.

Yani, değerlendirmeden sonra navigator.userActivation.isActive değerini true olarak ayarlar. Aynı seçeneği Konsol > Ayarlar bölümünde de bulabilirsiniz.

Bu videoda, bu seçenek etkinleştirilmeden önce ve sonra navigator.userActivation.isActive için değerlendirme sonucu gösterilmektedir.

Console.trace() iletilerini otomatik olarak genişlet, günlüğe kaydederken Console'un genişletilmiş console.trace() mesajlarını göstermesini sağlar.

Gezinme sırasında günlüğü koru seçeneği, Console'un her gezinme sırasında bir Navigated to mesajı günlüğe kaydetmesini ve tüm sayfalarda günlük kaydetmesini sağlar.

Aynı seçeneği Konsol > Ayarlar'da da bulabilirsiniz.

Bağlantı işleme , bir kaynak dosyanın bağlantısını tıkladığınızda (ör. Öğeler > Stiller bölmesinde) dosyaları açmak için bir seçenek belirler.

Bağlantı işleme:

• Otomatik. Dosyaları varsayılan olarak Kaynaklar panelinde açar.
• DevTools uzantısı tarafından eklenebilecek rastgele seçenek.

Yerel geçersiz kılmaları etkinleştirme, Geliştirici Araçları'nın kaynaklarda yaptığınız değişiklikleri sayfa yüklemeleri arasında korumasını sağlar.

Daha fazla bilgi için Yerel Geçersiz Kılmalar konusuna bakın.

JavaScript'i devre dışı bırak, JavaScript devre dışıyken web sayfanızı nasıl göründüğünü ve nasıl davrandığını görmenizi sağlar.

Sayfanın yüklenirken JavaScript'e bağlı olup olmadığını ve nasıl bağlı olduğunu görmek için sayfayı yeniden yükleyin.

JavaScript devre dışı bırakıldığında Chrome, adres çubuğunda ilgili simgesini gösterir. Geliştirici Araçları ise Kaynaklar'ın yanında bir uyarı simgesi gösterir.

Eş zamansız yığın izlemeyi devre dışı bırak seçeneği, Çağrı Grubu'nda eşzamansız işlemin "tüm hikayesini" gizler.

Kullandığınız çerçeve bu tür izlemeyi destekliyorsa Hata Ayıklama Aracı varsayılan olarak ayarsız işlemleri izlemeye çalışır.

Daha fazla bilgi için Eş zamansız yığın izlemeleri (stack trace) görüntüleme başlıklı makaleye bakın.

Yeni sekmeler açan bağlantıları tıkladığınızda Geliştirici Araçları'nı pop-up'lar için otomatik olarak aç seçeneği, Geliştirici Araçları'nı açar. Yani target=_blank içeren tüm bağlantılar.

Bu videoda, DevTools olmadan bir bağlantının nasıl tıklanacağı ve yeni bir sekmenin nasıl açılacağı gösterilmektedir. Ardından bu seçeneği etkinleştirdiğinizde, DevTools'un bulunduğu yeni bir sekme açılır.

Yazarken arama özelliği, arama sorgunuzu yazarken Geliştirici Araçları'nın ilk arama sonucuna "atlamasını" sağlar. DevTools devre dışıysa sizi yalnızca Enter tuşuna bastığınızda sonuca yönlendirir.

Bu videoda, arama sorgusu yazarken DevTools'un nasıl "atladığını" görebilirsiniz. Daha sonra bu seçeneği etkinleştirdiğinizde Enter tuşuna bastığınızda Geliştirici Araçları sizi ilk sonuca yönlendirir.

Ayarların senkronizasyonunu etkinleştir özelliği, Geliştirici Araçları ayarlarını birden fazla cihaz arasında senkronize etmenizi sağlar.

Bu ayarı kullanmak için önce Chrome Senkronizasyonu'nu etkinleştirin. Daha fazla bilgi için Senkronizasyon ayarları başlıklı makaleyi inceleyin.