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

Üçüncü taraf çerezlerinin aşamalı olarak kullanımdan kaldırılması

Siteniz üçüncü taraf çerezlerini kullanıyor olabilir ve bu çerezlerin desteği sonlandırılmaya yaklaştığı için harekete geçme zamanı geldi. Etkilenen çerezlerle ilgili ne yapmanız gerektiğini öğrenmek için Üçüncü taraf çerezlerinin sonuna 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ıyla etkilenecek çerezler hakkında sizi uyarıyor. Bu sorunları görmeyi durdurmak için istediğiniz zaman onay kutusunun işaretini kaldırabilirsiniz.

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 ön sürüm olan 0.3.2 sürümüyle aktif olarak geliştirilmektedir. Bu araç, web sitenizin çerezleri nasıl kullandığını anlamanızı sağlar ve gizliliği korumaya yönelik yeni Chrome API'leri hakkında rehberlik sunar.

Ç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, üst kısımdaki açılır düğmesinin 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ı (PSAT) kullanma hakkında daha fazla bilgi için aşağıdakilere bakın:

• PSAT's How To.
• Desteğin sonlandırılması yürürlüğe girdikten sonra ne olacağını 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.
• Analiz, e-ticaret, SSO hizmetleri ve yerleştirilmiş içerik gibi yaygın senaryoları nasıl analiz edeceğinizi öğrenmek için Analiz Senaryoları'ndaki demo örneklerine göz atın.

Ayrıca, Sorun bildirme ile ilgili yönergeleri inceleyin.

Gelişmiş yoksayılanlar listesi

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

Bu sürüm, Ayarlar > Yoksayma Listesi'nde varsayılan normal ifadenin özel bir dışlama kuralı olarak kullanılmasını sağlar. Yalnızca kodunuza odaklanabilmeniz için hata ayıklayıcı artık varsayılan olarak /node_modules/ ve /bower_components/ kaynaklı komut dosyalarını atlayacak. Bu kuralı dilediğiniz zaman ayarlardan devre dışı bırakabilirsiniz.

Chromium sorunu: 1496301.

Artık yakalanan veya göz ardı edilmeyen koddan geçen istisnalar yürütmeyi durduruyor

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

• Arama yığınındaki yoksayılmayan karelerde yakalanan istisnalar.
• Çağrı yığınındaki yoksayılmayan çerçevelerden geçen yakalanmış 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 Yakalanan istisnalarda duraklat'ı işaretleyin.
2. Sayfadaki "Yakalandı" senaryoları listesinde farklı düğmeleri tıklayın ve belirtilen durumlarda yürütmenin duraklatıldığını görün.

Debugger, yakalanan ve/veya yakalanmayan istisnalarda (işaretlendiğinde) eşzamansız çağrılarda yürütmeyi duraklatmak için sözler genelinde ret işleyicileri arar. Bu sürümden itibaren hata ayıklayıcı, Promise.finally()'nin bir istisna yakalayacağını tahmin etmez. Bu, try...finally bloğunun herhangi bir istisna yakalamamasına benzer.

Chromium sorunları: 1489312, 1291064.

Kaynak eşlemelerinde x_google_ignoreList, ignoreList olarak yeniden adlandırıldı

Kaynak haritaları spesifikasyonunda, x_google_ignoreList yerine ignoreList alanı kullanılmaya başlandı ve DevTools artık yeni adı destekliyor. Eski ad için ise yedek destek sunuluyor. Framework'ler 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 haritaları nedir?
• Kaynak eşlemeleriyle dağıtılan kod yerine orijinal kodunuzda hata ayıklama

Uzaktan hata ayıklama sırasında yeni giriş modu geçişi

Artık bir 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ırdığınızda ve chrome://inspect/#devices üzerinden bu ağ hedefine bağlandığınızda.

Giriş modu geçişinin nasıl çalıştığını görmek için videoyu izleyin.

Chromium sorunu: 1410433.

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

iFrame'lerde hata ayıklamayı kolaylaştırmak için Öğeler paneli artık #document düğümlerinin yanında documentURL simgesini 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.

Geliş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 oynatılıyorsa oynatılmaya devam eder, aksi takdirde durdurulur. Daha önce, bu öğeyi 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 self-XSS uyarısı

Kod yapıştırılırken Self-XSS hakkında uyarı göster denemesi varsayılan olarak etkinleştirildi. Self-XSS (self cross-site scripting), kötü amaçlı kodu Geliştirici Araçları'na yapıştırmanız için sizi kandıran ve 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.

DevTools'u yeni kullanmaya başladı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 çalışanları ve worklet'lerdeki etkinlik işleyici ayrılma noktaları

Kaynaklar > Event Listener Breakpoints'te bir etkinlik kesme noktası ayarladığınızda, web sitenizdeki bu etkinlikte duraklamanın yanı sıra Debugger artık Shared Storage Worklet dahil olmak üzere her türden bir web worker veya worklet'te ilgili etkinlik gerçekleştiğinde de duraklı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 Medya paneline yönlendirilirsiniz. Böylece bu öğelerde hata ayıklayabilirsiniz.

Geliştirme aşamasında olan bu özellik daha da iyileştirilecektir. Geliştirici Araçları ekibi, bu iyileştirmeyi kullanıma sunan 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 terimin aşırı kullanımını önlemek ve davranışı daha iyi yansıtmak için Uygulama > Önceden yükleme, Tahmini yüklemeler olarak yeniden adlandırıldı. Tahmine dayalı yükleme, web siteniz için tanımlayabileceğiniz tahmin kurallarına dayalı olarak neredeyse anında sayfa yüklemesine olanak tanır. Bu sayede, en çok ziyaret edilen sayfalar önceden oluşturulur ve önceden getirilir.

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üncelleme, performans kategorisinde kapsamlı bir değişiklik içerir. Performans analizleri artık performans metrikleri üzerindeki tahmini etkilerine göre puanlanıyor ve önceliklendiriliyor. Ayrıca, performans puanı göstergesi her metriğin puanı nasıl etkilediği hakkında daha ayrıntılı bilgiler içerir.

Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri 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ıldı:

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

Chromium sorunları: 1488645, 1484918.

Diğer önemli noktalar

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).
• Spekülatif yüklemeler: Ağ panelindeki açılır menüde hedeflerin tam URL'leri düzeltildi (1471020).
• Kapsam:
  • Güzel yazdırılmış kod için satır satır kapsama sorunu düzeltildi (1464974).
  • Kapsam bilgileri artık sayfa yeniden yüklendiğinde güncelleniyor (1494457).
• Konsol:
  • İletilerde kısmi metin seçimiyle ilgili sorun düzeltildi (1487449).
  • Otomatik tamamlama açılır listesinin titremesi sorunu düzeltildi (1487453).
  • Yığın izlemelerindeki yığın yollarında ve URL'lerde 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: Üstteki işlem çubuğu artık yeniden boyutlandırma sırasında metni kaydırı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ıldığında, söz dizimi hatalarını düzeltmek için yorumları artık kaldırılıyor (1101224).
• Ağ: Öncelik sütununda artık ilk öncelik hakkında bilgi içeren bir ipucu gösteriliyor (Büyük istek satırları işaretlendiğinde de aynı bilgi 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ı.
  • Geçersiz kılmaların basitleştirilmesinin (1473681) ardından kullanım oranının düşük olması nedeniyle Kaynaklar'daki Tüm geçersiz kılmaları sil seçeneği kaldırıldı.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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