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.

Öğ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ıdaki 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ş yapabileceğiniz gösterilmektedir.

Kaynaklar

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

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.

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ğı taşır.

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.

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.

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

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.

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 sonuna nasıl geçeceğiniz gösterilmektedir.

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

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.

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

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.

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.

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

Performans

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

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.

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ı nasıl seçeceğiniz gösterilmektedir.

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.

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

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

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.

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.