Geliştirici Araçları'ndaki yenilikler (Chrome 120)

Sofia Emelianova
Sofia Emelianova

Üçüncü taraf çerezlerini kullanımdan kaldırma

Sitenizde üçüncü taraf çerezleri kullanılıyor olabilir. Bu çerezlerin desteği sonlandırılma sürecinde, artık işlem yapmanız gerekiyor. Etkilenen çerezlerle ilgili ne yapabileceğinizi öğrenmek için Üçüncü taraf çerezlerinin sonlandırılmasına hazırlanma başlıklı makaleyi inceleyin.

Onay kutusu. Üçüncü taraf çerezleriyle ilgili sorunları dahil et onay kutusu, tüm Chrome kullanıcıları için varsayılan olarak etkinleştirilmiştir. Bu nedenle, Sorunlar sekmesi artık üçüncü taraf çerezlerinin kullanımdan kaldırılması ve kullanımdan kaldırılmasından etkilenecek çerezler hakkında sizi uyarır. Bu sorunlarla karşılaşmamak için istediğiniz zaman onay kutusunu temizleyebilirsiniz.

Üçüncü taraf çerezlerine yönelik desteğin sonlandırılmasıyla ilgili sorunlar sekmesinde yer alan bir uyarı gösterilir.

Chromium sorunu: 1466310.

Özel Korumalı Alan Analiz Aracı ile web sitenizin çerezlerini analiz etme

Geliştirici Araçları için Özel Korumalı Alan Analiz Aracı uzantısı, en son yayın öncesi 0.3.2 sürümüyle etkin bir şekilde geliştirilme aşamasındadır. Bu araç, web sitenizin çerezleri nasıl kullandığını anlamanıza olanak tanır ve gizliliği korumaya yönelik yeni Chrome API'leri hakkında yol gösterir.

Çerezlerinizi analiz etmek için:

  1. Chrome'da uzantıyı yükleyin.
  2. En iyi analiz için web sitenizi tek bir sekmede açın.
  3. Geliştirici Araçları'nı açın ve Özel Korumalı Alan paneline gidin. Bu panel, üstteki Daha fazla sekme. açılır düğmesinin arkasında gizlenmiş olabilir.
  4. Çerezler bölümünü açın ve Bu sekmeyi analiz et'i tıklayın. Araç herhangi bir çerez bulamadıysa sayfayı yeniden yüklemeyi deneyin.

Özel Korumalı Alan Analiz Aracı.

Özel Korumalı Alan Analiz Aracı'nı (PSAT) kullanma hakkında daha fazla bilgi için aşağıdaki kaynaklara göz atın:

Ayrıca Raporlama sorunları ile ilgili kılavuzu inceleyin.

Geliştirilmiş yoksayılanlar listelemesi

node_modules için varsayılan hariç tutma kalıbı

Bu sürüm, varsayılan normal ifadeyi özel hariç tutma kuralı olarak etkinleştirmek için Ayarlar'a dokunun. Ayarlar > Yoksayma Listesi. Yalnızca kodunuza odaklanmanıza yardımcı olmak için Hata Ayıklayıcı artık /node_modules/ ve /bower_components/ komut dosyalarını varsayılan olarak atlar. Bu kuralı dilediğiniz zaman ayarlardan devre dışı bırakabilirsiniz.

Normal ifade eklendikten önce ve sonra.

Chromium sorunu: 1496301.

İstisnalar artık yakalanırsa veya yoksayılmamış koddan geçerse yürütülmesini durdurur

Kodda Onay kutusu. yakalanan istisnalarda duraklat işaretli olduğunda, Hata Ayıklayıcı artık hem eşzamanlı hem de eşzamansız aşağıdaki istisnalarda yürütmeyi durdurur:

  • Çağrı yığınındaki yoksayılmayan çerçevelerde yakalanan istisnalar.
  • Çağrı yığınındaki yoksayılmamış çerçevelerden geçen istisnalar yakalandı. Örneğin, ekran görüntüsüne bakın.

Yok sayılmayan kod üzerinden geçen yakalanmış bir istisnayı duraklatın.

Bu davranışı test etmek için bu demo sayfasını açın:

  1. Geliştirici Araçları'nı açın > Kaynaklar, hidden klasörünü yoksayılanlar listesine ekleyin ve Onay kutusu. Yakalanan istisnalarda duraklat seçeneğini işaretleyin.
  2. Sayfada, "Yakalananlar" bölümünün altında senaryo listesinde, farklı düğmeleri tıklayın ve yürütmenin belirtilen durumlarda duraklatıldığını görün.

Hata Ayıklayıcı, eşzamansız çağrılarda yakalanan ve/veya yakalanmamış istisnalarda (işaretlendiğinde) yürütme işlemini duraklatmak için vaatler genelinde ret işleyiciler arar. Bu sürümden itibaren Hata Ayıklayıcı, try...finally blokunun herhangi bir istisnayı yakalamasına benzer şekilde, Promise.finally() ürününün bir istisnayı yakalayacağını tahmin etmez.

Chromium sorunları: 1489312, 1291064.

x_google_ignoreList, kaynak eşlemelerde ignoreList olarak yeniden adlandırıldı

Kaynak eşleme spesifikasyonu, x_google_ignoreList yerine ignoreList alanını benimsedi ve Geliştirici Araçları artık eskisinin yedeğiyle yeni adı destekliyor. Çerçeveler ve paketleyiciler artık yeni alan adını kullanabilir.

Kaynak eşlemeleri, web siteniz tarafından sunulan küçültülmüş kod yerine yazdığınız kodda hata ayıklamanızı sağlar.

Kaynak eşlemeleri hakkında daha fazla bilgi edinmek için aşağıdaki konulara bakın:

Uzaktan hata ayıklama sırasında yeni giriş modunu açma/kapatma

Artık Chrome sekmesinde uzaktan hata ayıklarken dokunma ve fare girişi arasında geçiş yapabilirsiniz. Örneğin, --remote-debugging-port=<port> ile bir Chrome örneği çalıştırıp bu ağ hedefine chrome://inspect/#devices üzerinden bağlandığınızda.

Giriş modu açma/kapatma işleminin nasıl yapıldığını görmek için videoyu izleyin.

Chromium sorunu: 1410433.

Öğeler paneli artık #document düğümün URL'lerini gösteriyor

iframe'lerde daha kolay hata ayıklamanızı sağlamak için Öğeler paneli artık #document düğümün yanında documentURL gösteriyor.

Öncesi ve sonrası bölümü, #document düğümünün yanında documentURL&#39;yi gösterir.

Chromium sorunu: 1376976.

Uygulama panelindeki geçerli İçerik Güvenliği Politikası

Artık incelenen bir karenin İçerik Güvenliği Politikası (İGP) ayrıntılarını görüntüleyebilirsiniz. Ayrıntıları görüntülemek için Uygulama'ya gidin > Çerçeveler'i seçin, bir çerçeve seçin ve sayfayı aşağı kaydırarak İçerik Güvenliği Politikası (İGP) bölümüne gidin.

Uygulama sekmesinde bulunan İçerik Güvenliği Politikası bölümü.

Chromium sorunu: 1424714.

Animasyonlarda hata ayıklama iyileştirildi

Animasyonlar sekmesinde artık şunları yapabilirsiniz:

  • Video yer imlecini ayarlamak için zaman çizelgesi başlığında herhangi bir yeri tıklayın. Animasyon oynatılıyorsa oynatılmaya devam eder, aksi takdirde durur. Daha önceleri sürüklemeniz gerekiyordu.
  • Animasyonların tamamını görmek için ad sütununu yeniden boyutlandırın.

Chromium sorunları: 1492460, 1489721.

"Bu koda güveniyor musunuz?" Kaynaklar'daki iletişim kutusu ve Console'daki kendi kendine XSS uyarısı

Onay kutusu. Kod yapıştırırken Self-XSS ile ilgili uyarı göster denemesi varsayılan olarak etkinleştirildi. Self-XSS (kendi kendine siteler arası komut dosyası), kötü amaçlı kodları Geliştirici Araçları'na yapıştırmanız için sizi kandıran ve bir saldırganın web hesaplarınızın ve kişisel bilgilerinizin kontrolünü ele geçirmesine olanak tanıyan bir saldırıdır.

Yeni bir Geliştirici Araçları kullanıcısıysanız ve kodu yapıştırmaya çalışıyorsanız Kaynaklar panelinde artık Bu koda güveniyor musunuz? iletişim kutusu gösterilirken Konsol'da artık benzer bir uyarı gösterilir. Yalnızca anladığınız ve kendiniz incelediğiniz kodu yapıştırın. Yapıştırmak için, istendiğinde allow pasting yazın. Bir kez yapıştırmaya izin verildikten sonra uyarı bir daha gösterilmez.

&#39;Bu koda güveniyor musunuz?&#39; iletişim kutusunu görebilirsiniz.

Chromium sorunu: 345205.

Web çalışanlarındaki ve iş akışlarındaki etkinlik işleyici ayrılma noktaları

Kaynaklar'da bir etkinlik ayrılma noktası ayarladığınızda > Etkinlik İşleyici Ayrılma Noktaları: Web sitenizdeki bu etkinlikte duraklatmaya ek olarak Hata Ayıklayıcı da artık ilgili etkinlik Paylaşılan Depolama İş Akışı dahil herhangi bir türde web çalışanı veya iş akışında gerçekleştiğinde duraklatılacak.

Bir hizmet çalışanı, zaman aşımını ayarlama işlevini çağırdığında hata ayıklayıcı duraklatıldı.

Chromium sorunu: 1445175.

<audio> ve <video> için yeni medya rozeti

Artık Öğeler panelinde <audio> ve <video> öğeleri için yeni medya rozetini etkinleştirebilirsiniz. Rozeti tıkladığınızda Medya paneline yönlendirilirsiniz. Bu sayede bu öğelerde hata ayıklayabilirsiniz.

Ses ve video etiketleri için yeni medya rozeti etkinleştirildi.

Bu özellik, geliştirme aşamasındadır ve daha da iyileştirilecektir. Geliştirici Araçları ekibi, bu iyileştirmeyi başardığı için Junseo (Jeremy) Yoo'ya teşekkür etmek istiyor.

Chromium sorunu: 1448214.

Önceden yükleme, Tahmine dayalı yükleme olarak yeniden adlandırıldı

Önceki terimi aşırı kullanmaktan kaçınmak ve davranışı daha iyi yansıtmak için Uygulama > Önceden yükleme, Tahmine dayalı yüklemeler olarak yeniden adlandırıldı. Tahmine dayalı yükleme, web sitenizin gezinilen sayfaların çoğunu önceden oluşturması ve önceden getirmesi için tanımlayabileceğiniz spekülasyon kurallarına dayanan neredeyse anında sayfa yüklemeye olanak tanır.

Önceden yüklemenin tahmine dayalı yüklemeye yeniden adlandırılmasından önce ve sonra.

Chromium sorunu: 1478888.

Lighthouse 11.2.0

Lighthouse paneli artık Lighthouse 11.2.0'ı çalıştırıyor. Değişikliklerin tam listesini inceleyin.

Bu güncellemede performans kategorisinin revizyonu yer alır. Performans analizleri artık performans metrikleri üzerindeki tahmini etkilerine göre puanlanıp önceliklendiriliyor. Ayrıca, performans puanı göstergesi, her bir metriğin puanı nasıl etkilediğiyle ilgili daha ayrıntılı bilgiler içerir.

Öncesi ve sonrası performans revizyonu.

Geliştirici Araçları'nda Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme konusuna bakın.

Chromium sorunları: 772558.

Erişilebilirlikle ilgili iyileştirmeler

Bu sürüm aşağıdaki erişilebilirlik iyileştirmelerine sahiptir:

  • Ekran okuyucular artık Kaynaklar > altındaki onay kutularının durumunu (işaretlenmiş veya işaretlenmemiş) duyuracaktır Ayrılma noktaları.
  • Artık Bunun gibi sorunları gizle açılır menüsüne klavyeden erişebilirsiniz.

Chromium sorunları: 1488645, 1484918.

Çeşitli öne çıkan anlar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

  • Performans: Kayıtta bazen eksik olan LCP göstergesi düzeltildi (1487136).
  • Tahmine dayalı yüklemeler: panelindeki açılır menüde (1471020) hedeflerin tam URL'leri düzeltildi.
  • Kapsam:
    • Güzel yazdırılmış kod için satır satır kapsam düzeltildi (1464974).
    • Kapsam bilgileri artık sayfa yeniden yüklendiğinde güncelleniyor (1494457).
  • Konsol:
    • Mesajlardaki kısmi metin seçimi düzeltildi (1487449).
    • Otomatik tamamlama açılır menüsünün titremesi sorunu düzeltildi (1487453).
    • Yığın yollarında ve URL'lerde, yığın izlemelerde (1473926) desteklenen parantezler.
  • Kaynaklar: TypeScript using anahtar kelimesinin söz dizimi vurgulaması destekleniyor (1490515).
  • Hızlı Aç menüsü artık gizli yöntemleri gösteriyor (1492957).
  • Uygulama > Arka plan hizmetleri: Üst işlem çubuğu artık yeniden boyutlandırma sırasında metni sarmalıyor (1487276).
  • Öğeler > Stiller:
    • Yuvalı öğeler için devralınan CSS değişkenlerinin çözünürlüğü düzeltildi (1492162).
    • Bir CSS özelliği devre dışı bırakılırken söz dizimi aralarını düzeltmek için yorumları artık çıkarılıyor (1101224).
  • : Öncelik sütununda artık ilk öncelik ile ilgili bilgileri içeren bir ipucu gösteriliyor (Büyük istek satırları işaretlendiğinde da aynısı gösterilir) (1495735).
  • Desteğin sonlandırılması:

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