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

Sofia Emelianova
Sofia Emelianova

Üçüncü taraf çerezlerinin kullanımdan kaldırılması

Siteniz üçüncü taraf çerezleri kullanıyor olabilir. Bu nedenle, siteniz kullanımdan kaldırılmaya yaklaştığında harekete geçmenizin zamanı geldi. Etkilenen çerezlerle ilgili ne yapmanız gerektiğini öğrenmek için Üçüncü taraf çerezlerinin sona ermesine 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ştirildiğinden, Sorunlar sekmesi yakında üçüncü taraf çerezlerinin kullanımdan kaldırılmasından ve desteğin sonlandırılmasından etkilenecek çerezler konusunda sizi uyarır. Bu sorunlarla karşılaşmamak için istediğiniz zaman onay kutusunun işaretini kaldırabilirsiniz.

Sorunlar sekmesinde, yakında üçüncü taraf çerezlerinin kullanımdan kaldırılmasıyla ilgili bir uyarı.

Chromium sorunu: 1466310.

Web sitenizin çerezlerini Özel Korumalı Alan Analiz Aracı ile analiz edin

Geliştirici Araçları için Özel Korumalı Alan Analiz Aracı uzantısı, yayın öncesi en son 0.3.2 sürümüyle aktif olarak geliştirilmektedir. 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 rehberlik sağlar.

Ç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. DevTools'u açın ve Özel Korumalı Alan paneline gidin. Bu panel, üst kısımdaki Diğer sekmeler'e dokunun. açılır menü 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ın (PSAT) nasıl kullanılacağı hakkında daha fazla bilgi için aşağıdakileri inceleyin:

  • PSAT Nasıl Yapılır?
  • Desteğin sonlandırılmasından sonra nelerin olabileceğini tahmin etmek için bir Değerlendirme Ortamı oluşturun.
  • Etkilenecek unsurları belirlemek için Genel Analiz İşlemleri bölümüne bakın.
  • Analizler, e-ticaret, TOA hizmetleri, yerleşik içerikler ve daha fazlası dahil olmak üzere sık karşılaşılan senaryoları nasıl analiz edeceğinizi öğrenmek için Analiz Senaryoları bölümündeki demo örneklerine göz atın.

Ayrıca, Sorun bildirme ile ilgili kılavuza bakın.

Gelişmiş yoksayılanlar listesi

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

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

Normal ifade eklemeden önce ve sonra.

Chromium sorunu: 1496301.

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

Onay kutusu. Yakalanan istisnalarda duraklat seçeneği işaretli olarak kodda hata ayıkladığınızda Hata Ayıklayıcı artık hem eşzamanlı hem de eşzamansız olan aşağıdaki yakalanmış istisnalarda yürütmeyi durdurur:

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

Yoksayılmayan kod üzerinden geçen yakalanan bir istisnada duraklat.

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 Onay kutusu. Yakalanan istisnalarda duraklat'ı işaretleyin.
  2. Sayfadaki "Yakalanan" senaryolar listesinin altında, farklı düğmeleri tıklayın ve belirtilen durumlarda yürütmenin duraklatıldığını görün.

Eşzamansız çağrılarda yakalanan ve/veya yakalanmamış istisnalarda (işaretlendiğinde) yürütmeyi duraklatmak için Hata Ayıklayıcı, sözler genelinde ret işleyicileri arar. Bu sürümden itibaren Hata Ayıklayıcı, try...finally bloğunun hiçbir istisna yakalamamasına benzer şekilde, artık Promise.finally() için bir istisna yakalayacağını tahmin etmiyor.

Chromium sorunları: 1489312, 1291064.

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

Kaynak eşleme spesifikasyonu, x_google_ignoreList yerine ignoreList alanını benimsemiştir. Geliştirici Araçları da artık eski adın yedeğiyle yeni adı desteklemektedir. Çerçeveler ve paketleyiciler artık yeni alan adını kullanabilir.

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

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

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

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ırıp chrome://inspect/#devices üzerinden bu ağ hedefine bağlandığınızda.

Giriş modunu açıp kapatma işlemini çalışırken görmek için videoyu izleyin.

Chromium sorunu: 1410433.

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

iframe'lerde hata ayıklamanızı kolaylaştırmak için, Öğeler paneli artık #document düğümlerinin yanında documentURL gösteriyor.

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

Chromium sorunu: 1376976.

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

İncelenen bir çerçevenin İçerik Güvenliği Politikası (İGP) ayrıntılarını artık görüntüleyebilirsiniz. Ayrıntıları görüntülemek için Uygulama > Çerçeveler'e gidin, bir çerçeve seçin ve 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.

İyileştirilmiş animasyon hata ayıklaması

Animasyonlar sekmesinde artık şunları yapabilirsiniz:

  • Video yer imlecini ayarlamak için zaman çizelgesi başlığında herhangi bir yeri tıklayın. Animasyon, hâlihazırda oynatılıyorsa oynatılmaya devam eder, aksi takdirde durur. Daha önce, öğeyi sürüklemeniz gerekiyordu.
  • Tüm animasyon adları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 Console'daki öz XSS uyarısı

Onay kutusu. Kod yapıştırılırken Self-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 kandırarak Geliştirici Araçları'na kötü amaçlı kod yapıştırmanızı sağlayan ve saldırganın web hesaplarınız ile kişisel bilgilerinizin kontrolünü ele geçirmesini sağlayan bir saldırıdır.

Yeni bir Geliştirici Araçları kullanıcısıysanız ve kod yapıştırmaya çalışıyorsanı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 sorulduğunda allow pasting yazın. Yapıştırmaya bir kez izin verildiğinde uyarı bir daha gösterilmez.

Kodu Kaynaklara yapıştırırken &#39;Bu koda güveniyor musunuz?&#39; iletişim kutusu.

Chromium sorunu: 345205.

Web çalışanları ve iş kümelerinde etkinlik işleyici ayrılma noktaları

Kaynaklar > Etkinlik İşleyici Ayrılma Noktaları bölümünde bir etkinlik kesme noktası ayarladığınızda, web sitenizdeki bu etkinlikte duraklatmanın yanı sıra Hata Ayıklayıcı artık, ilgili etkinlik Paylaşılan Depolama İş Akışı da dahil olmak üzere herhangi bir türdeki bir web çalışanı veya iş uygulamasında gerçekleştiğinde de duraklar.

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 yeni medya rozetini Öğeler panelinde <audio> ve <video> öğeleri için etkinleştirebilirsiniz. Rozeti tıkladığınızda, bu öğelerde hata ayıklayabileceğiniz Medya paneline yönlendirilirsiniz.

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 sağladığı 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'nin adı Tahmine dayalı yüklemeler olarak değiştirildi. Tahmine dayalı yükleme, ziyaret edilen çoğu sayfayı önceden oluşturmak ve önceden getirmek amacıyla web siteniz için tanımlayabileceğiniz tahmin kurallarına göre hemen sayfa yüklemelerine olanak tanır.

Önceden yüklemenin, tahmine dayalı yükleme olarak yeniden adlandırılmasından önceki ve sonraki süreç.

Chromium sorunu: 1478888.

Lighthouse 11.2.0

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

Bu güncelleme, performans kategorisinde bir revizyon içerir. Performans analizleri artık performans metrikleri üzerindeki tahmini etkilerine göre puanlanıyor ve önceliklendiriliyor. Ayrıca, performans puanı göstergesi her bir metriğin puanı nasıl etkilediği hakkında daha ayrıntılı bilgiler içerir.

Öncesi ve sonrası performans revizyonu.

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 mevcut:

  • Ekran okuyucular artık Kaynaklar > Kesme noktaları altındaki onay kutularının durumunu (işaretli veya işaretli değil) bildirecektir.
  • Artık klavyeyi kullanarak Bunun gibi sorunları gizle açılır menüsüne erişebilirsiniz.

Chromium sorunları: 1488645, 1484918.

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler ve iyileştirmeler şunlardır:

  • Performans: Kayıtta bazen eksik olan LCP göstergesi düzeltildi (1487136).
  • Tahmine dayalı yüklemeler: panelindeki açılır menüde yer alan hedeflerin tam URL'leri (1471020) düzeltildi.
  • Kapsam:
    • Oldukça basılmış kod için satır satır kapsam düzeltildi (1464974).
    • Kapsam bilgileri artık sayfalar yeniden yüklendiğinde güncellenir (1494457).
  • Konsol:
    • Mesajlardaki kısmi metin seçimi düzeltildi (1487449).
    • Otomatik tamamlama açılır menüsünün (1487453) titremesi düzeltildi.
    • Yığın yolları ve yığın izlemelerdeki URL'lerde desteklenen parantezler (1473926).
  • Kaynaklar: TypeScript using anahtar kelimesinin söz dizimi vurgulaması (1490515) destekleniyordu.
  • Hızlı Aç menüsü artık gizli yöntemleri (1492957) göstermektedir.
  • Uygulama > Arka plan hizmetleri: Yeniden boyutlandırma sırasında artık üst işlem çubuğu metni sarar (1487276).
  • Öğeler > Stiller:
    • Yerleştirilmiş öğ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 bozukluklarını düzeltmek için yorumları artık çıkartılıyor (1101224).
  • : Öncelik sütununda artık başlangıç önceliği bilgilerini içeren bir ipucu gösterilmektedir (aynı sayfa, Büyük istek satırları işaretlendiğinde gösterilir) (1495735).
  • Kullanımdan kaldırma işlemleri:
    • Renk biçimi ayarı önceki sürümlerde devre dışı bırakılmış olup kaldırılmıştır.
    • Geçersiz kılmaların kolaylaştırılması (1473681) sonrasında, az kullanılması nedeniyle Kaynaklar'daki Tüm geçersiz kılmaları sil seçeneği artık kaldırılmıştır.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

  • crbug.com adresinden öneri veya geri bildirim gönderin.
  • Geliştirici Araçları'nda, Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
  • @ChromeDevTools adresine tweet gönderin.
  • Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.

Geliştirici Araçları'ndaki Yenilikler

DevTools'daki Yenilikler serisinde ele alınan her şeyin listesi.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59