Tercihler

Sofia Emelianova
Sofia Emelianova

Ayarlar'a dokunun. Ayarlar > Tercihler'i kullanarak DevTools'un ve panellerinin görünümünü ve davranışını yapılandırın. Bu sekmede hem genel özelleştirme seçenekleri hem de panele özgü seçenekler listelenir.

Tercihleri ayarlamak için Ayarlar'a dokunun. Ayarlar > Tercihler'i açın ve aşağıda açıklanan bölümlerden birine gidin.

Tercihler sekmesindeki Görünüm bölümü.

Her bir ayarın ne işe yaradığını öğrenmek için bu sayfada ayarın adını arayın ve simgesini tıklayarak açıklamasını genişletin.

Bu referans, farklı ayarları aşağıdaki simgelerle gösterir:

  • Onay kutusu. Onay kutuları
  • Açılır listeler Açılır menü.
  • Kullanımdan kaldırıldı. Desteği sonlandırıldı

Varsayılan tercihleri geri yüklemek için Tercihler sekmesinin sonuna gidip Varsayılanları geri yükle ve yeniden yükle'yi tıklayın.

Görünüm

Bu bölümde, Geliştirici Araçları görünümünü özelleştiren seçenekler listelenir.

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

Temalar: DevTools temasını sistem tercihinden koyuya, açık temaya değiştirme.
  • Sistemin tercihi
  • Açık
  • Koyu

Panel düzeni Açılır menü., 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: Öğenin panel düzenini yataydan dikeye değiştirme.
  • yatay
  • dikey
  • otomatik

Dil Açılır menü., 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: Çince Ayarlar paneli.
  • Tarayıcıdaki kullanıcı arayüzü dili
  • Yerel ayar seçeneklerinden biri (bu örnekte Çince)

Onay kutusu. 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ş yapabileceğiniz gösterilmektedir.

Onay kutusu. Duraklatılmış durum yer paylaşımını devre dışı bırak, kod yürütme duraklatıldığında görüntü alanındaki Hata ayıklayıcıda duraklatıldı Oynat ve atla düğmeleri. yer paylaşımını gizler.

Onay kutusu. Her güncellemeden sonra yenilikleri göster seçeneği, her Chrome güncellemesinden sonra Yenilikler çekmece sekmesini otomatik olarak açar.

Yenilikler çekmecesi sekmesi.

Kaynaklar

Bu bölümde, Kaynaklar panelini özelleştiren seçenekler listelenmektedir.

Onay kutusu. 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.

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

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

Onay kutusu. 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.

Kaynaklar panelinde, durum çubuğunda küçültülmüş dosyanın bağlantısı gösterilir.

Onay kutusu. Sekme tuşunun odağı taşımasını etkinleştir seçeneği, Sekme tuşu. Sekme tuşunun Düzenleyici'ye Sekme karakteri eklemek yerine odağı DevTools'da 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ğı taşır.

Onay kutusu. Girintiyi algıla, girintiyi Düzenleyici'de açılan kaynak dosyasındaki girintiye ayarlar.

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

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.

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

Bu videoda ilk başta herhangi bir öneri gösterilmez. Ardından bu seçeneği etkinleştirdiğinizde Düzenleyici, komut tamamlama önerileri gösterir.

Onay kutusu. Otomatik parantez kapatma, açılış parantezi 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.

Onay kutusu. 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.

Eşlenmemiş bir parantezin altı kırmızıyla çizilmiştir.

Onay kutusu. 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 Açılır menü., Düzenleyici'de boşluk karakterlerini gösterir.

Geliştirici Araçları'nın yeniden yüklenmesi gerekir. 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: Seçilen seçenekler: Tüm ve Sonraki.
  • Yok
  • Tümü (...)
  • Arka planda oynatma

Onay kutusu. Hata ayıklama esnasında satır içinde değişken değerleri göster, yürütme duraklatılmışken atama ifadelerinin yanındaki değişken değerlerini gösterir.

Hata ayıklayıcı, işlev yürütülürken duraklatıldığında atama ifadelerinin yanında değişken değerlerini gösterir.

Onay kutusu. 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, bir kesme noktasında duraklatıldığında Kaynaklar panelinin odak dışında olduğu gösterilmektedir. 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.

Onay kutusu. Küçültülmüş kaynakları otomatik olarak okunaklı hâle getirme, bu kaynakları okunabilir hâle 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.

Kaynaklar panelinde okunaklı hâle getirilmiş kod.

Onay kutusu. 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.

Kaynaklar panelinde, gezinme ağacının Yazar bölümüne .scss dosyaları gösterilir. Öğeler panelindeki Stiller bölmesinde, CSS kurallarının yanında .scss kaynaklarının bağlantıları gösterilir.

Onay kutusu. Dosya bitiminden sonra kaydırmaya izin ver ayarı, 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 sonuna nasıl geçeceğiniz gösterilmektedir.

Onay kutusu. 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 Konsol'a aşağıdaki gibi mesajlar kaydedilir:

Uzak bir dosya yolundan yüklemenin güvenlik nedeniyle yasaklandığını bildiren Console mesajı.

Varsayılan girinti Açılır menü., Sekme tuşu. Sekme tuşunun Düzenleyici'ye eklediği boşluk sayısını seçmenizi sağlar.

Varsayılan girinti: Üste yazma seçeneklerini devre dışı bırakma ve varsayılan girintiyi iki boşluktan sekiz boşluğa, ardından sekme tuşuna değiştirme.
  • 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.

Öğeler

Bu bölümde, Öğeler panelini özelleştiren seçenekler listelenmektedir.

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

Nesne panelinde gölge DOM düğümleri gösterilir.

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

Öğeler paneli, uzun satırları kelimelere göre böler ve sonraki satıra sarmalar.

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

Öğeler panelinde HTML yorumları gösterilir.

Onay kutusu. Fareyle üzerine geldiğinizde DOM düğümünü göster, İncele.inceleme modundayken fareyle görüntü alanındaki bir öğenin üzerine geldiğinizde DOM ağacında ilgili düğümü seçer.

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

Onay kutusu. Ayrıntılı inceleme ipucunu göster, fareyle bir öğenin üzerine geldiğinizde İncele.inceleme modunda ipucunu görüntüleme alanında gösterir.

İnceleme modunda gösterilen ayrıntılı ipucu.

Onay kutusu. Üzerine gelindiğinde cetvelleri göster, DOM ağacındaki öğelerin üzerine geldiğinizde görüntü alanında cetvelleri gösterir.

Görüntü alanında gösterilen cetveller.

Onay kutusu. CSS dokümanları ipucunu göster, fareyle Stiller bölmesinde bir öğenin üzerine geldiğinizde kısa bir açıklama içeren bir ipucu gösterir.

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

CSS mülküyle ilgili dokümanları içeren ipucu.

Bu bölümde, panelini özelleştiren seçenekler listelenmektedir. Seçeneklerin çoğu panelin ayarlarıyla aynıdır.

Onay kutusu. Günlüğü koru, panelindeki Günlüğü koru ile aynıdır. Sayfa yüklemeleri arasında istekleri kaydeder.

Bu videoda, sayfa yeniden yüklendiğinde istek günlüğünün yenilendiği ve bu seçeneği etkinleştirdiğinizde kalıcı hale geldiği gösterilmektedir.

Onay kutusu. Ağ günlüğünü kaydet, panelindeki Ağ günlüğünü kaydedin. Ağ günlüğünü kaydet ile aynıdır. Ağ günlüğünde istek kaydetmeyi başlatır veya durdurur.

Ağ panelindeki Ağ günlüğünü kaydet düğmesi.

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

Bu videoda ilk olarak isteklerin engellenmediği gösterilmektedir. Ardından, bu seçeneği etkinleştirdikten sonra Ağ isteği engelleme çekmecesinde bir kalıp bunları engeller.

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

Önbelleği Devre Dışı Bırak onay kutusu.

Onay kutusu. Hassas verilerle HAR oluşturmaya izin ver seçeneği, HAR'yi dışa aktar düğmesine hassas verilerle veya hassas veriler olmadan (temizlenmiş) dışa aktarmanıza olanak tanıyan seçenekler ekler.

Hassas veriler, Cookie, Set-Cookie ve Authorization başlıklarındaki verilerdir.

HAR'ı dışa aktar düğmesi için iki seçenek.

Onay kutusu. Kaynak türlerine renk kodu verme, ağ günlüğünün Şelale sütununda isteklerini türlerine göre farklı renklerle vurgular.

Ağ sekmesindeki şelale sütunu, renk kodlaması olmadan ve renk kodlaması ile.

Onay kutusu. Ağ günlüğünü çerçeveye göre gruplandır, panelindeki Çerçeveye 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.

Satır içi çerçevelere göre gruplandırılmış isteklerin bulunduğu ağ istek günlüğü.

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

Engellenen İstekler filtresi etkinken Ağ panelinde gösterilen, reklamla ilgili bir ağ isteği.

Performans

Bu bölümde, Performans panelini özelleştiren seçenekler listelenmektedir.

Flamechart fare tekerleği hareketleri Açılır menü., alev grafiğinde gezinirken fare tekerleğinize kaydırma veya yakınlaştırma işlemi atar.

Alev grafiği fare tekerleği hareketleri: Fare tekerleği hareketini, alev grafiği için kaydırma yerine yakınlaştırma olarak değiştirme.
  • Kaydırma
  • Tarih aralığını

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

Konsol

Bu bölümde, Console'u özelleştiren seçenekler listelenmektedir. Seçeneklerin çoğu Konsol Ayarları ile aynıdır.

Console ve Ayarlar'da benzer seçenekler.

Onay kutusu. Ağ mesajlarını gizle, Konsol'daki ağ mesajlarını gizler.

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

Onay kutusu. 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'a dokunun. Ayarlar'da hem de Konsol > Ayarlar'da nasıl etkinleştirileceği ve Konsol'da bağlamı nasıl seçeceğiniz gösterilmektedir.

Onay kutusu. 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'a dokunun. Ayarlar hem de Konsol > Ayarlar bölümünde nasıl etkinleştirileceği ve XHR finished loading mesajlarının Konsol'a nasıl kaydedileceği gösterilmektedir.

Onay kutusu. Zaman damgalarını göster seçeneği, Konsol'da mesajların yanında zaman damgalarını gösterir.

Konsolda zaman damgaları listelenen mesajlar.

Onay kutusu. 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.

Console geçmişinden bir komut seçeneği içeren otomatik tamamlama açılır menüsü.

Onay kutusu. Enter'a basıldığında otomatik tamamlama önerisini kabul edin seçeneği, Enter tuşuna bastığınızda Console'un otomatik tamamlama açılır listesinden 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.

Onay kutusu. 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 benzer mesajlar birlikte gruplandırılır.

Onay kutusu. 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 bölümünde de bulabilirsiniz.

Konsol CORS hataları gösteriyor.

Onay kutusu. Etraflı değerlendirme, Konsol'da komut yazarken çıktının önizlemesini gösterir.

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

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

Onay kutusu. Kod değerlendirmesini kullanıcı işlemi olarak kabul et seçeneği, Console'da çalıştırdığınız tüm komutları kullanıcı etkileşimi olarak kabul eder.

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.

Onay kutusu. console.trace() mesajlarını otomatik olarak genişlet, Konsol'un, günlüğe kaydettiği console.trace() mesajlarını genişletilmiş olarak göstermesini sağlar.

Konsolda genişletilmiş console.trace() mesajı.

Onay kutusu. 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 sayfalara günlük kaydetmesini sağlar.

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

Konsolda "Gezinildi" mesajları gösterilir ve günlükler farklı sayfalara kaydedilir.

Uzantı

Bu bölümde, Chrome Geliştirici Araçları uzantılarında bağlantıları işleme özelliğini özelleştiren seçenekler listelenmiştir.

Bağlantı işleme: Bağlantıları açmak için bir seçenek belirleme.
  • Otomatik. Dosyaları varsayılan olarak Kaynaklar panelinde açar.
  • DevTools uzantısı tarafından eklenebilecek rastgele seçenek.

Kalıcı

Bu bölümde, DevTools'un yaptığınız değişiklikleri nasıl kaydettiğini kontrol eden seçenekler listelenir.

Onay kutusu. 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 bölümüne bakın.

Hata Ayıklayıcı

Bu bölümde, Hata Ayıklama Aracı davranışını kontrol eden seçenekler listelenmektedir.

Onay kutusu. 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 JavaScript devre dışı bırakıldı. simgesini, DevTools ise Kaynaklar'ın yanında uyarı Uyarı: simgesini gösterir.

Adres çubuğunda bir simge ve DevTools'daki Kaynaklar'ın yanında bir uyarı simgesi.

Onay kutusu. Eş zamansız yığın izlemeyi (stack trace) devre dışı bırakma, Çağrı Yığını'nda eş zamansız işlemin "tam 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.

Çağrı yığınındaki eşzamansız işlem.

Daha fazla bilgi için Asenkron yığın izlemelerini görüntüleme başlıklı makaleyi inceleyin.

Global

Bu bölümde, DevTools'ta genel etkileri olan seçenekler listelenmektedir.

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.

Onay kutusu. Yazarken ara seçeneği, arama sorgunuzu yazarken DevTools'un 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ığı" gösterilmektedir. Ardından, bu seçeneği etkinleştirdiğinizde DevTools, Enter tuşuna bastığınızda sizi ilk sonuca yönlendirir.

Sync

Bu bölümde, cihazlar arasındaki ayar senkronizasyonunu ayarlayabilirsiniz.

Onay kutusu. Ayarların senkronizasyonunu etkinleştir, DevTools ayarlarını birden fazla cihazda senkronize etmenize olanak tanır.

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