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

Üçüncü taraf çerezlerini aşamalı olarak kullanımdan kaldırma

Siteniz üçüncü taraf çerezleri kullanıyor olabilir. Bu çerezlerin desteğinin sonlandırılmasına yaklaştığımız için harekete geçme zamanı geldi. Etkilenen çerezlerle ilgili ne yapmanız gerektiğini öğrenmek için Üçüncü taraf çerezlerinin sonlandırılmasına hazırlanma başlıklı makaleyi inceleyin.

Üçüncü taraf çerez sorunlarını dahil et onay kutusu tüm Chrome kullanıcıları için varsayılan olarak etkinleştirildi. Bu nedenle Sorunlar sekmesi artık üçüncü taraf çerezlerinin desteğinin sonlandırılması ve aşamalı olarak kullanımdan kaldırılmasından etkilenecek çerezlerle ilgili olarak sizi uyarıyor. Bu sorunları görmeyi durdurmak için onay kutusunu istediğiniz zaman temizleyebilirsiniz.

Chromium sorunu: 1466310.

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

DevTools için Özel Korumalı Alan Analiz Aracı uzantısı, 0.3.2 sürümüne sahip en son ön sürümüyle aktif olarak geliştirilmektedir. 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 Gizlilik Korumalı Alan paneline gidin. Bu panel, üstteki açılır menüsünün arkasında gizlenmiş olabilir.
4. Çerezler bölümünü açıp Bu sekmeyi analiz et'i tıklayın. Araç herhangi bir çerez bulamadıysa sayfayı yeniden yüklemeyi deneyin.

Özel Korumalı Alan Analiz Aracı'nın (PSAT) nasıl kullanılacağı hakkında daha fazla bilgi için aşağıdakilere bakın:

• PSAT'ın Nasıl Yapılır?
• Destek sonlandırma işlemi geçerlilik kazandıktan sonra ne olabileceğini tahmin etmek için bir değerlendirme ortamı oluşturun.
• Etkilenecek yönleri belirlemek için Genel Analiz İşlemleri bölümüne bakın.
• Analizler, e-ticaret, SSO hizmetleri, yerleştirilmiş içerik ve daha fazlası dahil olmak üzere yaygın senaryoları nasıl analiz edeceğinizi öğrenmek için Analiz Senaryoları bölümündeki demo örneklerine göz atın.

Ayrıca Sorunları bildirme ile ilgili yönergelere göz atın.

Gelişmiş yoksayılanlar listesi

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

Bu sürümde, varsayılan normal ifade Ayarlar > Yoksay Listesi'nde özel hariç tutma kuralı olarak etkinleştirilir. Yalnızca kodunuza odaklanmanıza yardımcı olmak için Hata Ayıklama Aracı artık varsayılan olarak /node_modules/ ve /bower_components/ komut dosyalarını atlayacaktır. Bu kuralı dilediğiniz zaman ayarlardan devre dışı bırakabilirsiniz.

Chromium sorunu: 1496301.

İstisnalar artık yakalanırsa veya yoksayılmayan koddan geçerse yürütmeyi durdurur

Yakalanan istisnalarda duraklat seçeneği işaretliyken kodda hata ayıklama yaptığınızda Hata Ayıklama Aracı artık hem eşzamanlı hem de eşzamansız olarak yakalanan aşağıdaki istisnalarda yürütmeyi durdurur:

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

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

1. Geliştirici Araçları > Kaynaklar'ı açın, hidden klasörünü yoksayılanlar listesine ekleyin ve Tespit edilen istisnalarda duraklat'ı işaretleyin.
2. Sayfada, "Tespit edilen" senaryo listesinin altındaki farklı düğmeleri tıklayarak belirtilen durumlarda yürütmenin duraklatıldığını görebilirsiniz.

Hata Ayıklama Aracı, yakalanan ve/veya yakalanmayan istisnalarda (onaylandığında) yürütmeyi duraklatmak için promises'de ret işleyicileri arar. Bu sürümden itibaren Hata Ayıklama Aracı, try...finally bloğunun istisna yakalamamasına benzer şekilde Promise.finally()'nin istisna yakalayacağını artık tahmin etmez.

Chromium sorunları: 1489312, 1291064.

x_google_ignoreList, kaynak haritalarda ignoreList olarak yeniden adlandırıldı

Kaynak haritalar spesifikasyonu, x_google_ignoreList yerine ignoreList alanını benimsedi ve DevTools artık eski ad için yedek seçenekle birlikte 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ıza olanak tanır.

Kaynak haritaları hakkında daha fazla bilgi için:

• Kaynak eşleşmeleri nedir?
• Kaynak eşlemelerle dağıtmak yerine orijinal kodunuzda hata ayıklama

Uzaktan hata ayıklama sırasında yeni giriş modu açma/kapatma düğmesi

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

Giriş modunun nasıl değiştirildiğini görmek için videoyu izleyin.

Chromium sorunu: 1410433.

Öğeler panelinde artık #document düğümlerinin URL'leri gösteriliyor

Öğeler panelinde, iFrame'lerde daha kolay hata ayıklama yapabilmeniz için #document düğümlerinin yanında artık documentURL gösteriliyor.

Chromium sorunu: 1376976.

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

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

Chromium sorunu: 1424714.

İyileştirilmiş animasyon hata ayıklama

Animasyonlar sekmesinde artık şunları yapabilirsiniz:

• Video yer imlecini ayarlamak için zaman çizelgesi başlığındaki herhangi bir yeri tıklayın. Animasyon, zaten oynatılıyorsa oynatmaya devam eder, aksi takdirde durdurulur. Daha önce, bu öğeleri sürüklemeniz gerekiyordu.
• Animasyon adlarının tamamını görmek için ad sütununu yeniden boyutlandırın.

Chromium sorunları: 1492460, 1489721.

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

Kod yapıştırırken kendi kendine XSS hakkında uyarı göster denemesi varsayılan olarak etkinleştirilmiştir. Self-XSS (kendi kendine siteler arası komut dosyası çalıştırma), sizi DevTools'a kötü amaçlı kod yapıştırmaya yönlendiren ve saldırganın web hesaplarınızın ve kişisel bilgilerinizin kontrolünü ele almasına olanak tanıyan bir saldırıdır.

Yeni bir Geliştirici Araçları kullanıcısıysanız ve kod yapıştırmaya çalışırsanız Kaynaklar panelinde artık Bu koda güveniyor musunuz? iletişim kutusu gösterilir ve Konsol'da da 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. Yapıştırmaya bir kez izin verildikten sonra uyarı bir daha gösterilmez.

Chromium sorunu: 345205.

Web işçileri ve iş parçacıklarında etkinlik işleyicisi kesme noktaları

Kaynaklar > Etkinlik Dinleyicisi Kesme Noktaları bölümünde bir etkinlik kesme noktası belirlediğinizde Hata Ayıklama Aracı, web sitenizde bu etkinlikte duraklatmanın yanı sıra artık Ortak Depolama Alanı Workleti dahil olmak üzere herhangi bir türde web işleyici veya worklet'te ilgili etkinlik gerçekleştiğinde de duraklatılır.

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 bu öğelerde hata ayıklama yapabilmeniz için Medya paneline yönlendirilirsiniz.

Geliştirme aşamasında olan bu özellik daha da iyileştirilecektir. Geliştirici Araçları Ekibi, bu iyileştirmeyi hayata geçirdiği için Junseo (Jeremy) Yoo'ya teşekkür eder.

Chromium sorunu: 1448214.

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

Önceki terimin aşırı kullanımını önlemek ve davranışı daha iyi yansıtmak için Uygulama > Ön yükleme, Spekülatif yüklemeler olarak yeniden adlandırıldı. Spekülatif yükleme, web sitenizin tanımlayabileceğiniz spekülasyon kurallarına göre hemen hemen anında sayfa yüklemesine olanak tanır. Bu sayede, web siteniz gezinilen çoğu sayfayı önceden oluşturur ve önceden getirir.

Chromium sorunu: 1478888.

Lighthouse 11.2.0

Lighthouse panelinde artık Lighthouse 11.2.0 sürümü kullanılıyor. Değişikliklerin tam listesini inceleyin.

Bu güncelleme, performans kategorisinde kapsamlı bir revizyon içerir. Performans analizleri artık performans metriklerine tahmini etkilerine göre puanlanır ve öncelik verilir. Ayrıca performans puanı göstergesi, her bir metriğin puanı nasıl etkilediği hakkında daha ayrıntılı bilgi içerir.

Geliştirici Araçları'ndaki Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunları: 772558.

Erişilebilirlikle ilgili iyileştirmeler

Bu sürümde aşağıdaki erişilebilirlik iyileştirmeleri yapılmıştır:

• Ekran okuyucular artık Kaynaklar > Duraklatma noktaları bölümündeki onay kutularının durumunu (işaretli veya işaretsiz) okur.
• Artık Buna benzer sorunları gizle açılır menüsüne klavyeyle erişebilirsiniz.

Chromium sorunları: 1488645, 1484918.

Diğer öne çıkan özellikler

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

• Performans: Kayıtta bazen eksik olan LCP göstergesi düzeltildi (1487136).
• Spekülatif yüklemeler: Ağ panelindeki açılır menüde hedeflerin tam URL'leri düzeltildi (1471020).
• Kapsam:
  • Güzel bir şekilde yazdırılan kod için satır satır kapsam düzeltildi (1464974).
  • Sayfa yeniden yüklendiğinde artık kapsam bilgileri güncelleniyor (1494457).
• Konsol:
  • Mesajlarda kısmi metin seçimi düzeltildi (1487449).
  • Otomatik doldurma açılır menüsünün titremesi düzeltildi (1487453).
  • Yığın yollarında ve yığın izlemelerinde desteklenen parantezler (1473926).
• Kaynaklar: TypeScript using anahtar kelimesinin söz dizimi vurgulaması desteklendi (1490515).
• Hızlı Aç menüsünde artık özel yöntemler gösteriliyor (1492957).
• Uygulama > Arka plan hizmetleri: Üst işlem çubuğu artık yeniden boyutlandırıldığında metni sarar (1487276).
• Öğeler > Stiller:
  • Yuvalanmış öğeler için devralınan CSS değişkenlerinin çözünürlüğü düzeltildi (1492162).
  • Bir CSS özelliği devre dışı bırakıldığında söz dizimi boşluklarını düzeltmek için artık yorumları kaldırılıyor (1101224).
• Ağ: Öncelik sütununda artık ilk öncelikle ilgili bilgileri içeren bir ipucu gösteriliyor (Büyük istek satırları işaretlendiğinde aynı ipucu gösterilir) (1495735).
• Kullanımdan kaldırılanlar:
  • Renk biçimi ayarı önceki sürümlerde devre dışı bırakılmıştı ve artık kaldırıldı.
  • Kaynaklar bölümündeki Tüm geçersiz kılmaları sil seçeneği, geçersiz kılmaların basitleştirilmesinden sonra düşük kullanım nedeniyle kaldırıldı (1473681).

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.