Bu sayfa, Cloud Translation API ile çevrilmiştir.

Geliştirici Araçları'ndaki Yenilikler (Chrome 66)

Kayce Basques

Chrome 66'da Geliştirici Araçları'na eklenecek yeni özellikler ve önemli değişiklikler:

Ağ panelinde komut dosyasını yoksayın
Cihaz Modu'nda yakınlaştırmayı otomatik ayarlama
Önizleme ve Yanıt sekmelerinde düzgün şekilde yazdırma
Önizleme sekmesinde HTML içeriğini önizleme
HTML içindeki stillerle Yerel Geçersiz Kılmalar

Not: chrome://version adresinden hangi Chrome sürümünü kullandığınızı kontrol edin. Daha eski bir sürümü çalıştırıyorsanız bu özellikler mevcut olmayacaktır. Daha yeni bir sürümü çalıştırıyorsanız bu özellikler değişmiş olabilir. Chrome, yaklaşık 6 haftada bir yeni bir ana sürüme otomatik olarak güncellenir.

Aşağıdaki sürüm notlarının video sürümünü okuyun veya izleyin.

Ağ panelinde komut dosyasını yoksay

Ağ panelindeki Başlatan sütunu bir kaynağın neden istendiğini açıklar. Örneğin, JavaScript bir resmin getirilmesine neden oluyorsa Başlatan sütununda bu isteğe neden olan JavaScript kodu satırı gösterilir.

Daha önce, çerçeveniz ağ isteklerini bir sarmalayıcı içinde sarmaladıysa Başlatan sütunu bu kadar faydalı olmuyordu. Tüm ağ istekleri aynı sarmalayıcı kod satırını işaret ediyor.

Bu senaryoda gerçekten istediğiniz, isteğe neden olan uygulama kodunu görmektir. Bu artık mümkün:

Fareyle Başlatan sütununun üzerine gelin. İsteğe neden olan çağrı yığını, bir pop-up pencerede görünür.
Başlatıcı sonuçlarında gizlemek istediğiniz çağrıyı sağ tıklayın.
Komut dosyasını yoksayılanlar listesine ekle'yi seçin. Başlatan sütunu artık komut dosyasından yoksaydığınız tüm çağrıları gizler.

"requests.js" yoksayılıyor.

Şekil 1. requests.js yoksayılıyor

Yoksayılan komut dosyalarınızı Ayarlar'daki Yoksayılanlar Listesi sekmesinden yönetin.

Komut dosyalarını yoksayma hakkında daha fazla bilgi edinmek için Bir komut dosyasını veya komut dosyası kalıbını yoksayma başlıklı makaleyi inceleyin.

Önizleme ve Yanıt sekmelerinde düzgün yazdırma

Ağ panelindeki Önizleme sekmesi, artık kaynakların küçültüldüğünü algıladığında kaynakları varsayılan olarak düzgün şekilde yazdırır.

Önizleme sekmesi, analytics.js'nin içeriğini varsayılan olarak düzgün şekilde yazdırır.

2. Şekil. Önizleme sekmesi, analytics.js içeriğini varsayılan olarak düzgün şekilde yazdırır

Bir kaynağın küçültülmüş sürümünü görüntülemek için Yanıt sekmesini kullanın. Ayrıca, yeni Biçim düğmesini kullanarak Yanıt sekmesindeki kaynakları manuel olarak düzgün şekilde yazdırabilirsiniz.

Analytics.js içeriğini, Biçim düğmesi aracılığıyla manuel olarak güzel bir şekilde yazdırma.

3. Şekil. analytics.js içeriğini Biçim düğmesini kullanarak manuel olarak uygun şekilde yazdırma

Önizleme sekmesinde HTML içeriğini önizleme

Önceden Ağ panelindeki Önizleme sekmesi, belirli durumlarda bir HTML kaynağının kodunu gösterirken diğer durumlarda HTML'nin önizlemesini oluşturuyordu. Önizleme sekmesi artık her zaman HTML'nin temel oluşturma işlemini yapar. Tam bir tarayıcı olarak tasarlanmadığından, HTML'yi tam olarak beklediğiniz gibi görüntülemeyebilir. HTML kodunu görmek isterseniz Yanıt sekmesini tıklayın veya bir kaynağı sağ tıklayıp Kaynaklar panelinde aç'ı seçin.

Önizleme sekmesinde HTML'yi önizleme.

4. Şekil. Önizleme sekmesinde HTML'yi önizleme

Cihaz Modu'nda yakınlaştırmayı otomatik olarak ayarla

Cihaz Modu'ndayken, Yakınlaştırma açılır listesini açın ve cihaz yönünü her değiştirdiğinizde görüntü alanını otomatik olarak yeniden boyutlandırmak için Yakınlaştırmayı otomatik ayarla seçeneğini belirleyin.

Yerel Geçersiz Kılmalar artık HTML'de tanımlanan bazı stillerle çalışıyor

Geliştirici Araçları, Chrome 65'te Yerel Geçersiz Kılmalar'ı başlattığında bir sınırlama, HTML'de tanımlanan stillerde yapılan değişiklikleri izleyememesiydi. Örneğin, Şekil 7'de dokümanın head öğesinde h1 öğeleri için font-weight: bold tanımlayan bir stil kuralı bulunmaktadır.

HTML içinde tanımlanan stillere bir örnek

5. Şekil. HTML içinde tanımlanan stillere bir örnek

Chrome 65'te font-weight bildirimini Geliştirici Araçları Stil bölmesinden değiştirdiyseniz Yerel Geçersiz Kılmalar değişikliği izlemez. Diğer bir deyişle, bir sonraki yeniden yüklemede stil font-weight: bold biçimine geri döner. Ancak Chrome 66'da bu tür değişiklikler artık sayfa yüklemelerinde devam ediyor.

Bonus ipucu: Etkinlik İşleyici Ayrılma noktalarını daha kullanışlı hale getirmek için çerçeve komut dosyalarını yoksayın

JavaScript Hata Ayıklamasını Kullanmaya Başlayın videosunu oluşturduğumda bazı izleyiciler, etkinlik işleyici ayrılma noktalarının çerçeveler üzerine kurulu uygulamalar için yararlı olmadığını, çünkü etkinlik işleyicilerin genellikle çerçeve koduna sarmalandığını belirtmişti. Örneğin, Şekil 8'de Geliştirici Araçları'nda bir click ayrılma noktası oluşturdum. Demodaki düğmeyi tıkladığımda Geliştirici Araçları, işleyici kodunun ilk satırında otomatik olarak duraklıyor. Bu durumda, 1802 satırındaki Vue.js'nin sarmalayıcı kodunda duraklar ve bu pek de yararlı olmaz.

Tıklama ayrılma noktası, Vue.js'nin sarmalayıcı kodunda duraklar.

6. Şekil. click ayrılma noktası, Vue.js'nin sarmalayıcı kodunda duraklıyor

Vue.js komut dosyası ayrı bir dosyada olduğundan, bu click ayrılma noktasını daha faydalı hale getirmek için Çağrı Grubu bölmesinden söz konusu komut dosyasını yok sayabilirim.

Çağrı Yığını bölmesinde Vue.js komut dosyası yok sayılıyor.

7. Şekil. Çağrı Grubu bölmesinde Vue.js komut dosyasını yoksayma

Düğmeyi tekrar tıkladığımda ve click ayrılma noktasını tetiklediğimde, Vue.js kodu duraklamadan çalıştırılıyor ve ardından uygulamamın işleyicisindeki ilk kod satırında duraklıyor. Burada en başından beri duraklatmak istedim.

Tıklama ayrılma noktası artık uygulamanın işleyici kodunda duraklatılır.

8. Şekil. click ayrılma noktası artık uygulamanın işleyici kodunda duraklar

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.