Tercihler

Sofia Emelianova
Sofia Emelianova

Geliştirici Araçları'nın ve panellerinin görünümünü ve davranışını, Ayarlar. Ayarlar > Tercihler'i kullanarak yapılandırın. Bu sekmede, hem genel özelleştirme seçenekleri hem de panele özel seçenekler listelenir.

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

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

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

Bu referans, aşağıdaki simgelerle farklı ayarları belirtir:

  • Onay kutusu. Onay Kutusu
  • Açılır listeler Açılır menü.
  • Kullanımdan kaldırıldı. Kullanımdan Kaldırıldı

Varsayılan tercihleri geri yüklemek için Tercihler sekmesinin sonuna gidin ve 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 listelenmiştir.

Temalar Açılır menü., Geliştirici Araçları kullanıcı arayüzü için bir renk teması belirler.

Temalar: DevTools teması, sistem tercihinden koyu temaya değiştiriliyor. - Sistem tercihi - Açık - Koyu

Panel düzeni Açılır menü., panellerdeki bölmeleri düzenler.

Öğeler > Stiller, kardeş sekmeleri ve Kaynaklar > Hata ayıklayıcı bölmesini etkiler. Otomatik seçeneği, düzeni Geliştirici Araçları genişliğine bağlı hale getirir.

Panel düzeni: Öğenin panel düzeni yataydan dikeye değiştiriliyor. - yatay - dikey - otomatik

Kullanımdan kaldırıldı. Renk biçimi Açılır menü., Öğeler > Stiller'e giderek CSS renk değerlerinin biçimini ayarlar.

Geliştirici Araçları, geçerli renk değerlerini otomatik olarak seçilen biçime dönüştürür.

Renk biçimi: Stiller bölmesinde renk biçimlerini değiştirme.
  • Yazıldığı şekilde
  • HEX: #dac0de
  • RGB: rgb(128 255 255)
  • HSL: hsl(300deg% 80 %90)

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ı 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, klavyeyi kullanarak panelleri açmanızı sağlar.

Bu videoda, ilgili klavye kısayollarını kullanarak sekmeler arasında nasıl geçiş yapacağınız 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 düğmelerin üzerinden geç. yer paylaşımını gizler.

Onay kutusu. Her güncellemeden sonra Yenilikleri Göster özelliği, her Chrome güncellemesinden sonra otomatik olarak Yenilikler çekmecesini 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 özelliği, Arama sekmesini kullanarak Chrome uzantılarındakiler de dahil olmak üzere yüklenen tüm JavaScript dosyalarını aramanıza olanak tanır.

Bu videoda, bir uzantı kaynak dosyasında nasıl metin araması yapacağınız gösterilmektedir.

Onay kutusu. Kenar çubuğunda dosyaları otomatik olarak göster seçeneğ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 sekmeler arasında geçiş yaparken gezinme ağacında 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 küçültülmüş JavaScript dosyalarının kaynaklarını bulmasını sağlar.

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

Onay kutusu. Sekmenin odağını taşımayı etkinleştir seçeneği, Düzenleyici'ye bir Sekme karakteri eklemek yerine Sekme tuşu. Sekme tuşunun odağını Geliştirici Araçları'nın içinde taşımasını sağlar.

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

Bu videoda ilk olarak Sekme tuşuyla eklenmiş 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 seçeneği, girintiyi Düzenleyici'de açılan kaynak dosyadaki girintiye ayarlar.

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

Bu video ilk olarak sekiz boşluktan oluşan varsayılan girintiyi gösterir. Daha sonra bu seçeneği etkinleştirdiğinizde, kaynak dosyanın varsayılan girintisi geçersiz kılınır.

Onay kutusu. Otomatik tamamlama, Düzenleyici'de kullanışlı öneriler sunulmasını sağlar.

Bu videoda hiç öneri gösterilmiyor. Daha sonra bu seçeneği etkinleştirdiğinizde Düzenleyici'de komut tamamlama önerileri gösterilir.

Onay kutusu. Köşeli ayraç eşleştirme, Düzenleyici'de açık kırmızı ile altı çizili ve vurgulu köşeli ayraç, kıvrık ayraç veya parantez olmadan gösterir.

Altı kırmızıyla çizilmiş çift içermeyen kıvrık ayraç.

Onay kutusu. Kod daraltma, kod bloklarını Düzenleyici'de kıvrık ayraçlar halinde daraltmanıza ve genişletmenize olanak tanır.

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 katlanacağı gösterilmektedir.

Boşluk karakterlerini göster Açılır menü., Düzenleyici'de boşluk karakterleri görüntüler.

Geliştirici Araçları'nın yeniden yüklenmesi gerekir. Seçenekler aşağıdakileri yapar:

  • Tümü, tüm boşluk karakterlerini nokta (...) olarak belirtir. Ayrıca, Düzenleyici, Sekme karakterini çizgi () olarak belirtir.
  • Sonra, satırların sonundaki boşluk karakterlerini açık kırmızı renkte vurgular.
Boşluk karakterlerini göster: Seçenekler seçildi: Tümü ve Son. - Yok - Tümü (`...`) - Geride

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

İşlevin yürütülmesi sırasında duraklatılan Hata Ayıklayıcı, atama ifadelerinin yanında değişken değerleri gösterir.

Onay kutusu. Bir kesme noktası tetiklendiğinde Kaynaklara Odaklan paneli, yürütmenin duraklatıldığı ayrılma noktasının bulunduğu satırda Kaynaklar > Düzenleyici'yi açar.

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

Onay kutusu. CSS kaynak eşlemelerini etkinleştir seçeneği, Geliştirici Araçları'nın oluşturulan CSS dosyalarının kaynaklarını (ör. .scss) bulup size göstermesine olanak tanır.

Kaynaklar paneli, gezinme ağacının Yazılanlar bölümünde .scss dosyalarını gösterir. Öğeler panelindeki Stiller bölmesinde, CSS kurallarının yanında .scss kaynaklarının bağlantıları gösterilir.

Onay kutusu. Dosya sonundan sonra kaydırmaya izin ver seçeneği, Düzenleyici'deki son satırdan daha ileriye gitmenize olanak tanır.

Bu videoda, bu seçeneği etkinleştirdiğinizde sayfayı kaydırarak dosyanın sonunu nasıl geçeceğiniz gösterilmektedir.

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

Devre dışı bırakılırsa Geliştirici Araçları, aşağıdakine benzer Console mesajlarını günlüğe kaydeder:

Console'da, güvenlik nedeniyle uzak dosya yolundan yüklemenin yasak olduğunu bildiren bir mesaj.

Varsayılan girinti Açılır menü., Sekme tuşu. Sekme tuşunun Düzenleyici'ye yerleştireceği boşluk sayısını seçmenize olanak tanır.

Varsayılan girinti: Geçersiz kılma seçeneklerini devre dışı bırakma ve varsayılan girintiyi iki boşluktan sekize, 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 ve ardından bir Sekme karakterine 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 seçeneği, DOM ağacında gölge DOM düğümlerini gösterir.

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

Onay kutusu. Kelime kaydırma, DOM ağacındaki uzun satırları keser ve bunları sonraki satıra sarmalar.

Nesne paneli, uzun satırları kelimelere göre böler ve bunları bir sonraki satıra sarmalar.

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

Nesne panelinde HTML yorumları gösterilir.

Onay kutusu. Fareyle üzerine gelindiğinde DOM düğümünü göster, İncele'ye dokunun. 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 video ilk olarak DOM ağacında DOM düğümlerinin seçilmediğini gösterir. Daha sonra bu seçeneği etkinleştirdiğinizde, Öğeler paneli fareyle üzerine gelindiğinde düğümleri seçer.

Onay kutusu. Ayrıntılı inceleme ipucu göster, bir öğenin üzerine geldiğinizde İncele'ye dokunun. denetleme modunda görüntü alanında ipucunu gösterir.

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

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

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

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

Daha fazla bilgi bağlantısı, mülkteki MDN CSS Referansı'nı yönlendirir.

CSS mülkündeki belgeleri içeren ipucu.

Bu bölümde, panelini özelleştiren seçenekler listelenmiştir. Seçeneklerin çoğu panel ayarlarında olduğu gibidir.

Onay kutusu. Günlüğü koru seçeneği, panelindeki Günlüğü sakla ile aynıdır. Sayfa yüklemelerinde istekleri kaydeder.

Bu video, öncelikle sayfa yeniden yüklendiğinde yenilenen istek günlüğünü, daha sonra bu seçeneği etkinleştirdiğinizde devam ettiren gösterir.

Onay kutusu. Ağ günlüğünü kaydet, panelindeki Ağ günlüğünü kaydet. Ağ günlüğünü kaydet ile aynıdır. Ağ günlüğündeki istekleri 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 çekmecesindeki 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.

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

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

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

Ağ sekmesindeki Şelale sütunu, renk kodlamasız ve renk kodludur.

Onay kutusu. Ağ günlüğünü çerçeveye göre gruplandır seçeneği, panelindeki Çerçevelere göre gruplandırma 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ış istekleri içeren ağ isteği günlüğü.

Onay kutusu. Bu sitede reklam engellemeyi zorunlu kıl, Geliştirici Araçları açıkken sayfada algılanan reklamları engeller.

Ağ panelinde, Engellenen İstekler filtresi etkinleştirilmiş olarak gösterilen reklamla ilgili bir ağ isteği.

Performans

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

Flamechart fare tekerleği hareketi Açılır menü., flame grafiğinde gezindiğinizde fare tekerleğinize kaydırma veya yakınlaştırma işlemi atar.

Alev grafiği fare tekerleği hareketi: Fare tekerleği hareketi, alev grafiğinde kaydırma yerine yakınlaştırma olarak değiştiriliyor. - Kaydır - Yakınlaştır

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

Konsol

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

Konsol ve Ayarlar'daki benzer seçenekler.

Onay kutusu. Ağ mesajlarını gizle seçeneği, ağ mesajlarını Konsol'da gizler.

Bu videoda, hem Ayarlar. 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 sadece seçili bağlam (üst, iframe, çalışan veya uzantı) için mesajları göstermesini sağlar.

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

Onay kutusu. XMLHttpRequests günlüğü Console günlüğü XHR ve getirme isteklerini oluşturur.

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

Onay kutusu. Zaman damgalarını göster seçeneği, Konsol'un iletilerin yanında zaman damgalarını göstermesini sağlar.

Console'da listelenen, zaman damgalarına sahip mesajlar.

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

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

Konsol 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 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 neler olduğu gösterilmektedir.

Onay kutusu. Benzer mesajları konsolda gruplandır seçeneği, Console'un benzer mesajları bir arada gruplandırmasını sağlar.

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

Console'daki benzer iletiler bir arada gruplanmış şekilde.

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'da da bulabilirsiniz.

Konsolda CORS hataları gösteriliyor.

Onay kutusu. Eager değerlendirme, siz bir komut yazarken Console'un çıkış önizlemesini göstermesini sağlar.

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

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

Onay kutusu. Kod değerlendirmesini kullanıcı işlemi olarak kabul et, Konsol'da çalıştırdığınız herhangi bir komutu kullanıcı etkileşimine dönüştürür.

Yani değerlendirmeden sonra navigator.userActivation.isActive değeri true olarak ayarlanır. Aynı seçeneği Konsol > Ayarlar'da da bulabilirsiniz.

Bu videoda, navigator.userActivation.isActive uygulamasının bu seçeneğin etkinleştirilmesinden önceki ve sonraki değerlendirme sonucu gösterilmektedir.

Onay kutusu. Console.trace() iletilerini otomatik olarak genişlet, Console'un günlükleri günlüğe kaydettiğinde genişletilmiş console.trace() mesajlarını görüntülemesini sağlar.

Console'da genişletilmiş console.trace() mesajı.

Onay kutusu. Gezinme sonrasında günlüğü koru seçeneği, Console'un her gezinmede günlüğe bir Navigated to mesajı vermesini sağlar ve günlükleri tüm sayfalara kaydeder.

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

Konsol, 'Gidilen yer' mesajlarını gösterir ve farklı sayfalardaki günlükleri kaydeder.

Uzantı

Bu bölümde, Chrome Geliştirici Araçları uzantıları için bağlantı işlemeyi özelleştiren seçenekler listelenmektedir.

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

Bağlantı işleme: Bağlantıları açmak için bir seçenek belirleme. - Otomatik. Dosyaları **Kaynaklar** panelinde varsayılan olarak açar. - Geliştirici Araçları uzantısı tarafından eklenebilen isteğe bağlı seçenek.

Kalıcı

Bu bölümde, Geliştirici Araçları'nın yaptığınız değişiklikleri nasıl kaydettiğini kontrol eden seçenekler listelenmektedir.

Onay kutusu. Yerel geçersiz kılmaları etkinleştir seçeneği, Geliştirici Araçları'nın sayfa yüklemeleri genelindeki kaynaklarda yaptığınız değişiklikleri korumasını sağlar.

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

Hata Ayıklayıcı

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

Onay kutusu. JavaScript'i devre dışı bırak seçeneği, JavaScript devre dışı bırakıldığında web sayfanızın nasıl görüneceğini ve davranacağını görmenizi sağlar.

Sayfanın yükleme sırasında 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 buna karşılık gelen JavaScript devre dışı. simgesini gösterir. Geliştirici Araçları ise Kaynaklar'ın yanında uyarı Uyarı. simgesi gösterir. Adres çubuğunda bir simge ve Geliştirici Araçları'nda Kaynaklar'ın yanında bir uyarı simgesi

Onay kutusu. Eşzamansız yığın izlemeyi devre dışı bırak seçeneği, eşzamansız işlemin Çağrı Yığını'ndaki "tam hikayesini" gizler.

Kullandığınız çerçeve, izlemeyi destekliyorsa varsayılan olarak Hata Ayıklayıcı, eşzamansız işlemleri izlemeye çalışır. Çağrı Yığınındaki eşzamansız işlem. Daha fazla bilgi için Eşzamansız yığın izlemeleri görüntüleme bölümünü inceleyin.

Global

Bu bölümde, Geliştirici Araçları'nda küresel etkileri olan seçenekler listelenmektedir.

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

Bu video ilk olarak bir bağlantıyı tıklayıp Geliştirici Araçları'nı olmadan yeni bir sekmenin nasıl açılacağını gösterir. Ardından bu seçeneği etkinleştirdiğinizde Geliştirici Araçları'nın yer aldığı yeni bir sekme açılır.

Onay kutusu. Yazarken arama, Geliştirici Araçları'nın siz arama sorgunuzu yazarken ilk arama sonucuna "atlanmasını" sağlar. Devre dışı bırakılırsa Geliştirici Araçları sizi yalnızca Enter tuşuna bastığınızda sonuca yönlendirir.

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

Sync

Bu bölüm, cihazlar arasında ayar senkronizasyonunu ayarlamanıza olanak tanır.

Onay kutusu. Ayarları senkronize etmeyi etkinleştir seçeneği, Geliştirici Araçları ayarlarını birden fazla cihaz arasında 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.