Tercihler

Sofia Emelianova
Sofia Emelianova

Ayarlar'a dokunun. Ayarlar > Tercihler'i kullanarak Geliştirici Araçları 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 açıklamasını genişletin.

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

  • Onay kutusu. Onay Kutusu
  • Açılır menü. açılır listeleri
  • Kullanımdan kaldırıldı. Desteği sonlandı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: Sistem tercihi olan Geliştirici Araçları teması koyu/açık olarak değiştiriliyor.
  • Sistemin tercihi
  • Açık renk
  • Kasvetli

Öğ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

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)

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

Kaynaklar

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

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.

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

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.

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.

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

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

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.

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: Seçilen seçenekler: Tüm ve Sonraki.
  • Yok
  • Tümü (...)
  • Arka planda oynatma

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.

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

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

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

Console'da, uzak dosya yolundan yüklemenin güvenlik nedeniyle yasaklandığını bildiren bir mesaj
Varsayılan girinti: Üzerine 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.

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.

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

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 ile aynıdır. Ağ günlüğündeki istekleri kaydetmeyi başlatır veya durdurur.

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

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.

Ç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.

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

Performans

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

Flame chart fare tekerleği hareketleri: Alev grafiği için fare tekerleği hareketini 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 kaydırma hem de yakınlaştırma fare tekerleği işlemleri gösterilmektedir.

Konsol

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

Console'da ve Ayarlar'da benzer seçenekler.

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.

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ın nasıl seçileceği gösterilmektedir.

Bu videoda, bu seçeneğin hem Ayarlar'a dokunun. 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.

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

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

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

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.

Uzantı

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

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

Kalıcı

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

Hata Ayıklayıcı

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

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 gösterir. Geliştirici Araçları ise Kaynaklar'ın yanında bir uyarı Uyarı. simgesi gösterir.

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

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ı Grubu'ndaki eşzamansız işlem.

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

Global

Bu bölümde, Geliştirici Araçları'nda genel etkileri olan seçenekler listelenmiştir.

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.

Sync

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