Geliştirici Araçları Özeti: Verimli öğe düzenlemeleri, hizmet çalışanı hata ayıklaması ve materyal tasarım gölgeleri

Paul Bakaus
Paul Bakaus

DOM'ları verimli şekilde düzenlemek için DOM panelinin yeni içerik menüsünü kullanın. Doğrudan Kaynaklar paneli üzerinden hizmet çalışanlarında hata ayıklayın. Renk seçicideki tüm Materyal Tasarım tonları arasından seçim yapın. Blackbox JS kitaplıkları artık daha kolay.

DOM panelinin yeni, iyileştirilmiş içerik menüsü

yeni DOM içerik menüsü.

DOM panelinde en çok kullanılan işlemleri analiz ettik ve sağ tıklama içerik menüsünün düzenli ve yeniden düzenlenmesi gerektiği sonucuna ulaştık.

Artık bir öğeyi hızlı bir şekilde gizlemek veya silmek, :active veya :hover gibi belirli bir durumu tetiklemek ya da HTML'sini düzenlemek çok daha kolay. Dokunmatik yüzey kullanıyorsanız ve sağ tıklamak istemiyorsanız bunun yerine seçili öğenin yanındaki üç küçük noktayı tıklayın.

Kaynaklar paneli aracılığıyla hizmet çalışanlarının hatalarını ayıklama

Servis çalışanları, onları ayarladıktan sonra çok işe yarar ancak erkenden kafanızı karıştırmak zor olabilir. Hata ayıklama işlemleri, Geliştirici Araçları'ndan ayrılmayı ve chrome://serviceworker-internals/ sayfasını yeni bir tarayıcı penceresinde açmayı gerektirdiğinden bu durum daha da kötü hâle geliyordu.

Kaynaklarda Hizmet Çalışanları

Ama artık değil! Artık doğrudan Kaynaklar panelini kullanarak mevcut alan için hizmet çalışanları için hata ayıklayabilirsiniz. Bu süreç hâlâ devam ediyor, ancak önceki statükoya göre şimdiden büyük bir iyileştirme yapıldı.

Tüm renkler: renk seçicide malzeme tasarımı gölgeleri

Birkaç hafta önce, kullanıma hazır birincil ve koyu renkleri sunmak için renk seçiciye Materyal Tasarım paletini ekledik. Aslında tam sayfa tasarlamak için kaçınılmaz olarak tüm Materyal Tasarım tonlarına tam erişiminiz olması gerekir, bu nedenle bunları tasarladık.

Gölgeleri görüntülemek için birincil renklerden birine uzun basın ve bunun yerine bir gölgeyi tıklayın.

Blackbox JavaScript kitaplıkları ayarlarda daha kolay

JavaScript Blackboxing bir süredir kullanımdaydı, ancak keşfedilmesi o kadar kolay değildi. Yalnızca sizin yazdığınız koda odaklanmak (ve tüm sarmalama kodunu gizlemek) için sayfadaki bir komut dosyasına kara kutu yapmanıza olanak tanıyan bir özelliktir.

Bu sayfayı Ayarlar'a taşıdık. Deneyin:

Blackboks

En iyiler

  • Oluşturma açma/kapatma düğmelerine erişim yok mu? Oluşturma Ayarları, Geliştirici Araçları ana menüsüne ("Diğer Araçlar"ın altında) taşındı. Olağan şüphelilere (ör. FPS ölçer) ek olarak "Basılı medyayı emüle et" seçeneğini de taşıdık.
  • Çok amaçlı adres çubuğuna chrome://inspect yazmaktan sıkıldınız mı? Cihazları İncele seçeneğine artık yeni ana menüde "Diğer Araçlar" bölümünden de erişebilirsiniz.
  • Oluşturma veya Arama gibi bu kapatılabilir Çekmece sekmelerinden birini yanlışlıkla mı kapattınız? Artık soldaki yeni menüyü kullanarak bunları yeniden açabilirsiniz.

Her zaman olduğu gibi, düşüncelerinizi Twitter veya aşağıdaki yorumlar üzerinden bize iletin ve hataları crbug.com/new adresine gönderin.

Gelecek ay görüşmek üzere!
Paul Bakaus ve Geliştirici Araçları Ekibi