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

Kayce Basques

Chrome 66'da Geliştirici Araçları'nda sunulacak yeni özellikler ve önemli değişiklikler şunlardır:

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

Ağ panelinde komut dosyasını yoksay

Ağ panelindeki Başlatan sütunu, bir kaynağın neden istendiğini açıklar. Örneğin, Örneğin, JavaScript bir resmin getirilmesine neden oluyorsa Initiator sütunu size İsteğe neden olan JavaScript kodu.

Önceden, çerçeveniz ağ isteklerini bir sarmalayıcı içinde sarmaladıysa Initiator sütunu olmazdı. Tüm ağ istekleri, aynı sarmalayıcı kod satırını işaret ediyor.

Bu senaryoda asıl istediğiniz, isteğe neden olan uygulama kodunu görmektir. İşte bu artık mümkün:

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

"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 Komut dosyasını veya komut dosyasını yoksayma başlıklı makaleyi inceleyin.

Önizleme ve Yanıt sekmelerinde okunaklı şekilde yazdırma

Ağ panelindeki Önizleme sekmesi artık algılandığında kaynakları varsayılan olarak okunaklı şekilde yazdırıyor bu kaynakların küçültüldüğünü öğrendik.

Önizleme sekmesi, analytics.js içeriğinin varsayılan olarak okunmasını sağlar.

2. Şekil. analytics.js içeriğinin varsayılan olarak yazdırıldığı Önizleme sekmesi

Bir kaynağın küçültülmüş sürümünü görüntülemek için Yanıt sekmesini kullanın. Bu önerileri manuel olarak da Yanıt sekmesinden yeni Biçim düğmesini kullanarak kaynakları okunaklı hâle getirebilirsiniz.

Biçim düğmesini kullanarak analytics.js içeriğini manuel olarak yazdırma.

3. Şekil. analytics.js içeriğini Biçim düğmesini kullanarak manuel olarak okunaklı hâle getirmek

Önizleme sekmesinde HTML içeriğini önizleme

Önceden, Ağ panelindeki Önizleme sekmesinde bir HTML kaynağının kodu gösteriliyordu bazı durumlarda HTML önizlemesini oluştururken kullanabilirsiniz. Önizleme sekmesi artık her zaman HTML'nin temel bir görüntüsünü oluşturur. Tam işlevli bir tarayıcı tasarlanmadığı için sayfa gösterilmeyebilir HTML'yi tam olarak gerektiği gibi kullanabilirsiniz. HTML kodunu görmek istiyorsanız Yanıt sekmesini tıklayın veya bir kaynağı sağ tıklayın ve Kaynaklar panelinde aç'ı seçin.

Önizleme sekmesinde HTML önizlemesi.

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 şunun için Yakınlaştırmayı otomatik olarak ayarla'yı seçin: cihaz yönünü değiştirdiğinizde görüntü alanını otomatik olarak yeniden boyutlandırır.

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'ı kullanıma sunduğunda bir sınırlamaydı, , HTML içinde tanımlanan stillerdeki değişiklikleri izleyemedi. Örneğin, Şekil 7'de kuralında, h1 öğeler için font-weight: bold tanımlayan dokümanın head parametresi kullanılır.

HTML'de tanımlanan stillere bir örnek

5. Şekil. HTML'de tanımlanan stillere bir örnek

Chrome 65'te, font-weight beyanını Geliştirici Araçları Stil bölmesinden değiştirdiyseniz, Local Geçersiz kılmalar değişikliği izlemez. Başka bir deyişle, bir sonraki yeniden yüklemede stil font-weight: bold konumuna geri dön Ancak Chrome 66'da bunun gibi değişiklikler artık sayfa yüklemelerinde de 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 Hatalarını Ayıklamaya Başlayın videosunu oluşturduğumda, bazı izleyiciler o etkinlik işleyici ayrılma noktaları, çerçeveleri temel alan uygulamalarda işe yaramaz. dinleyiciler genellikle çerçeve kodu içinde toplanır. Örneğin, Şekil 8'de bir click olarak ayarladım ayrılma noktasının sayısını gösterir. Demoda düğmeyi tıkladığımda Geliştirici Araçları otomatik olarak işleyici kodunu eklemeniz gerekir. Bu durumda, 1802. satırda Vue.js'nin sarmalayıcı kodunda duraklatılır. pek işe yaramaz.

Vue.js'de tıklama ayrılma noktası duraklıyor sarmalayıcı kodunu kullanabilirsiniz.

6. Şekil. Vue.js'de click ayrılma noktası duraklıyor sarmalayıcı kodu

Vue.js komut dosyası ayrı bir dosyada olduğundan bu komut dosyasını Çağrı Grubu'ndaki yok sayabilirim bölmesini kullanarak bu click ayrılma noktasını daha kullanışlı hale getirin.

Çağrı Yığını bölmesindeki Vue.js komut dosyası yoksayılıyor.

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

Düğmeyi bir dahaki sefere tıklayıp click ayrılma noktasını tetiklediğimde, Vue.js kodunu yürütüyor ve uygulamamın dinleyicisinde, kodun ilk satırında duraklar. ara vermek 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 duraklatılıyor

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

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

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

  • Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
  • Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i Daha fazla > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
  • @ChromeDevTools adresinden tweet atabilirsiniz.
  • Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.