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

Üçüncü taraf çerezlerini 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 yapabileceğinizi öğ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 sorunlarla karşılaşmamak için istediğiniz zaman onay kutusunu 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 Özel 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?
• Desteği 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, TOA hizmetleri, yerleştirilmiş içerik ve daha pek çok konuda sık karşılaşılan senaryoları nasıl analiz edeceğinizi öğrenmek için Analiz Senaryoları'ndaki demo örneklerine göz atın.

Ayrıca Sorun bildirme ile ilgili kılavuzu inceleyin.

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

Kodda 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ı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 aşağıdaki makalelere bakın:

• Kaynak eşleme nedir?
• Kaynak eşlemeleriyle 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

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.

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ığında 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.
• Animasyonları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 bir 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, Konsol'da ise 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ı İşleyicisi dahil olmak üzere herhangi bir türde web işleyici veya işleyici'de ilgili etkinlik gerçekleştiğinde de duraklatıyor.

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ü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ğ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).
  • Kapsam bilgileri artık sayfa yeniden yüklendiğinde 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 de 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'daki Tüm geçersiz kılmaları sil seçeneği, geçersiz kılma işlemleri kolaylaştırıldıktan (1473681) sonra düşük kullanım nedeniyle artık kaldırıldı.

Önizleme kanallarını indirme

Chrome Canary, Yeni geliştirilenler veya Beta'yı varsayılan geliştirme tarayıcınız olarak kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.

• Geri bildirimlerinizi ve özellik isteklerinizi crbug.com adresinden bize iletebilirsiniz.
• 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.