DevTools Özeti Aralık 2013

Umar Hansa
Umar Hansa

Son zamanlarda Chrome Geliştirici Araçları'na bazı küçük, bazı büyük güncellemeler yapıldı. Öğe panelindeki güncellemelerle başlayıp Console, zaman çizelgesi ve daha fazlası hakkında konuşacağız.

Devre dışı bırakılan stil kuralları, yorumlu olarak kopyalanır.

Stil bölmesindeki CSS kurallarının tamamı kopyalandığında artık devre dışı bıraktığınız stiller de kopyalanır. Bu stiller, panosuzda yorumlu olarak bulunur. [crbug.com/316532]

CSS yolu olarak kopyala

"CSS yolu olarak kopyala" artık Nesneler panelindeki DOM düğümleri için bir menü öğesi olarak kullanılabilir (XPath'i kopyala menü öğesine benzer).

CSS yolunu kopyalayın.

CSS seçicilerinin oluşturulması, stil sayfalarınız/JavaScript'inizle sınırlı olmak zorunda değildir. WebDriver testlerindeki bulucu stratejileri için alternatifler de olabilir. [crbug.com/277286]

Gölge DOM öğe stillerini görüntüleme

Gölge kök öğelerinin stilleri artık incelenebilir. [crbug.com/279390]

Console'un copy() işlevi nesneler için çalışır

Komut Satırı API'sindeki copy() yöntemi artık nesneler için de kullanılabilir. Console panelinde copy({foo:'bar'}) komutunu deneyin ve nesnenin dize haline getirilmiş ve biçimlendirilmiş bir sürümünün artık panosuzda olduğunu fark edin. [crbug.com/289348]

Konsolda normal ifade filtresi

Konsolda normal ifadeleri kullanarak konsol mesajlarını filtreleme. crbug.com/318308]

Etkinlik işleyicileri kolayca kaldırma

Belgedeki ilk fare tekerleği etkinlik dinleyicisini almak için Console panelinde getEventListeners(document).mousewheel[0]; simgesini deneyin. Bundan sonra, ilgili etkinlik dinleyicisini kaldırmak için $_.remove(); ($_ = en son değerlendirilen ifadenin değeri) seçeneğini deneyin. crbug.com/309524]

CSS uyarılarının kaldırılması

Görmüş olabileceğiniz "Geçersiz CSS mülk değeri" tarzındaki uyarılar kaldırıldı. Tarayıcı saldırıları da dahil olmak üzere gerçek dünya CSS'sine karşı daha sağlam bir uygulama oluşturmak için çalışmalar devam etmektedir. crbug.com/309982]

Zaman çizelgesi işlemleri pasta grafiğinde özetlenmiştir

Zaman çizelgesi işlemleri grafiği

Zaman çizelgesi panelinde artık Ayrıntılar bölmesinde, oluşturma maliyetlerinizin kaynağını görsel olarak gösteren bir pasta grafiği yer alıyor. Bu sayede, darboğazlarınızı bir bakışta tespit edebilirsiniz.

Önceden pop-up'larda gösterilen bilgilerin çoğunun artık kendi bölmesine taşındığını göreceksiniz. Görüntülemek, zaman çizelgesi kaydı başlatmak ve bir kare seçmek için pasta grafiği içeren yeni Ayrıntılar bölmesini kullanın. Kare görünümündeyken, seçili kareler için ortalama FPS (1000ms/frame duration) gibi ilginç istatistikler görürsünüz. [crbug.com/247786]

Resim yeniden boyutlandırma etkinliği ayrıntıları

Zaman çizelgesi panelindeki resim yeniden boyutlandırma ve kod çözme etkinlikleri artık Nesneler panelindeki DOM düğümünün bağlantısını içeriyor.

Resim yeniden boyutlandırma ayrıntıları

Resim URL'si bağlantısı, Kaynaklar panelinde ilgili kaynağa yönlendirir. crbug.com/244159]

GPU kareleri

GPU'da gerçekleşen kareler artık ana iş parçacığındaki karelerin üzerinde, en üstte gösteriliyor. crbug.com/305863]

popstate işleyicilerinde ara verme

'popstate' artık Kaynaklar paneli kenar çubuğunda etkinlik dinleyici kesme noktası olarak kullanılabilir. [crbug.com/88112]

Çekmecede bulunan oluşturma ayarları

Çekmeceyi açtığınızda artık bir dizi bölme gösterilir. Bunlardan biri Oluşturma panelidir. Boya dikdörtgenlerini, FPS ölçerini vb. göstermek için bu paneli kullanın. Bu panel, Ayarlar > "Konsol çekmecesinde "Oluşturma" görünümünü göster" bölümünden varsayılan olarak etkinleştirilebilir.

Resmi veri URL'si olarak kopyala

Resmi veri URL'si olarak kopyala

Kaynaklar panelindeki resim öğelerinin içerikleri artık veri URI'si (data:image/png;base64,iVBO...) olarak kopyalanabilir.

Bunu denemek için Çerçeveler > [Kaynak] > Resimler bölümünde resim kaynağını bulun ve bağlam menüsüne erişmek için resim önizlemesini sağ tıklayın, ardından "Resmi Veri URL'si Olarak Kopyala"yı seçin. crbug.com/321132]

Veri URI'si filtreleme

Veri URI'lerinin ait olduğunu hiç düşünmediyseniz artık Ağ sekmesinden filtreleyebilirsiniz. Filtre simgesini seçin

Filtre simgesi
diğer kaynak filtresi türlerini görüntüleyin. crbug.com/313845]

Veri URI'si filtreleme

Ağ zamanlamayla ilgili hatalar düzeltildi

Resminizin indirilmesinin 300.000 yıl sürdüğünü gördüyseniz özür dileriz. ;) Ağ kaynakları için bu yanlış zamanlamalar düzeltildi. crbug.com/309570]

Ağ kaydı davranışı üzerinde daha fazla kontrol

Kayıt ağının davranışı biraz farklıdır. Öncelikle, kayıt düğmesi Zaman Çizelgesi'nden veya CPU profilinden beklediğiniz gibi çalışır. Beklediğiniz gibi, DevTools açıkken sayfayı yeniden yüklerseniz ağ kaydı otomatik olarak başlar. Ardından kapatılır. Sayfa yüklendikten sonra ağ etkinliğini yakalamak istiyorsanız etkinleştirin. Bu sayede, son dakika ağ isteklerinin sonuçları çarpıtmasına yol açmadan şelalenizi görselleştirmek daha kolay olur. crbug.com/325878]

DevTools temaları artık uzantılar üzerinden kullanılabilir

Kullanıcı stil sayfaları artık Chrome uzantılarının Geliştirici Araçları'na özel stil uygulamasını sağlayan Geliştirici Araçları Deneyleri (onay kutusu: "Özel kullanıcı arayüzü temalarına izin ver") aracılığıyla kullanılabilir. Örnek için Örnek DevTools Tema Uzantısıyla ilgili makaleyi inceleyin. crbug.com/318566]

DevTools özet haberinin bu sayısıyla ilgili tüm bilgiler bu kadar. Henüz okumadıysanız Kasım sayısını inceleyin.