Google I/O 2016 sona erdi. Paul Bakaus, Paul Irish ve Seth Thompson'un DevTools'un geleceğini özetleyen konuşması da dahil olmak üzere DevTools, I/O'da güçlü bir şekilde yer aldı. 2016 ve sonrasında DevTools'un nereye gittiği hakkında daha fazla bilgi edinmek için aşağıdaki videoya göz atın veya okumaya devam edin.
Yazma
DevTools, web geliştirme yaşam döngüsünün her aşamasını kolaylaştırmayı amaçlar. Geliştirici Araçları'nın bir web sitesinde hata ayıklamanıza veya profil oluşturmanıza yardımcı olabileceğini biliyor olabilirsiniz ancak site oluşturmanıza yardımcı olması için nasıl kullanacağınızı bilmiyor olabilirsiniz. "Yazarlık", site oluşturma işlemini ifade eder. Önümüzdeki dönemdeki hedeflerimizden biri, sitenizi birden fazla cihazda iterasyon, deneme ve emülasyon yapmanızı kolaylaştırmaktır.
Cihaz modu
Geliştirici Araçları ekibi, ilk büyük yükseltmesini Chrome 49'da alan Cihaz Modu deneyiminde iterasyon yapmaya devam ediyor. Güncellemelere genel bakış için Mart ayındaki gönderiye (Mobil cihazlara öncelik veren bir dünya için yeni cihaz modu) göz atın. Temel hedef, sitenizi tüm form faktörlerinde görüntülemek ve taklit etmek için sorunsuz bir iş akışı sağlamaktır.
Mart ayında yayınladığımız makaleden bu yana Canary'da kullanıma sunulan bazı cihaz modu güncellemelerinin kısa bir özetini aşağıda bulabilirsiniz.
Bir sayfayı belirli bir cihaz olarak görüntülerken sayfanızda cihaz donanımını göstererek deneyime daha fazla dahil olabilirsiniz.
Cihaz yönü menüsü, gezinme çubuğu ve klavye gibi farklı sistem kullanıcı arayüzü öğeleri etkinken sayfanızı görüntülemenize olanak tanır.
Masaüstü hikayesi de iyileştirildi. Cihaz Modu'nun yakınlaştırma özelliği sayesinde, üzerinde çalıştığınız ekrandan daha büyük masaüstü ekranlarını (ör. 4K (3.840 piksel x 2.160 piksel) ekran) taklit edebilirsiniz.
Ağ paneline geçmek zorunda kalmadan doğrudan cihaz modu kullanıcı arayüzünden ağ hızını düşürebilirsiniz.
Kaynak karşılaştırmaları
Bir sitenin stilini değiştirirken yaptığınız değişiklikleri takip etmeyi unutmanız kolaydır. Geliştirici Araçları, bu sorunu düzeltmek için değişikliklerinizi takip etmenize yardımcı olmak amacıyla Kaynaklar panelinin satır numarası kenar boşluğunda görsel ipuçları kullanır. Silinen satırlar kırmızı çizgiyle, değiştirilen satırlar mor renkle, yeni satırlar ise yeşil renkle vurgulanır.
Ayrıca, yeni Hızlı Kaynak çekmecesi sekmesinde değişikliklerinizi takip edebilirsiniz:
Hızlı Kaynak sekmesi, CSS kurallarınızla aynı anda HTML veya JavaScript kaynak kodunuza odaklanmanızı ilk kez sağlıyor. Ayrıca, Stil bölmesindeki bir CSS özelliğini tıkladığınızda Hızlı Kaynak sekmesi otomatik olarak kaynaktaki tanıma atlar ve bu tanımı vurgular.
Hemen denemek için Chrome Canary'da sources diff deneysel sürümünü etkinleştirin.
Canlı Sass düzenleme
Sass düzenleme iş akışında yapılacak bazı önemli iyileştirmelere göz atın. Bu özellikler deneysel aşamanın çok başındadır. Bu özellikler kullanıma sunulduğunda daha sonra bir gönderi paylaşacağız.
DevTools, Sass değişkenlerini her zaman istediğiniz gibi görüntülemenize ve düzenlemenize olanak tanıyacak. Bir Sass değişkeninden derlenmiş bir değeri tıkladığınızda yeni Hızlı Kaynaklar sekmesi, değişkenin tanımına atlar.
Bir Sass değişkeninden derlenmiş bir değeri düzenlediğinizde, düzenlemeniz yalnızca seçtiğiniz özelliği değil, Sass değişkenini de günceller.
Progresif web uygulamaları
Google I/O 2016'daki web ve Chrome konuşmalarının listesine göz atarsanız web geliştirme dünyasında ortaya çıkan büyük bir temayla karşılaşırsınız: Progresif Web Uygulamaları.
Progresif web uygulaması modeli ortaya çıktıkça DevTools, geliştiricilerin harika progresif web uygulamaları oluşturmak için ihtiyaç duyduğu araçları sağlamak amacıyla hızla iterasyon yapıyor. Bu modern uygulamaları oluşturmanın ve hata ayıklamanın genellikle benzersiz koşullara sahip olduğunu fark ettik. Bu nedenle DevTools'ta, Progressive Web Uygulaması geliştirmeye özel bir panel oluşturduk. Chrome Canary'ı açın. Kaynaklar panelinin yerini Uygulama panelinin aldığını görürsünüz. Kaynaklar panelindeki tüm işlevler aynı şekilde kullanılabilir. Özel olarak progresif web uygulaması geliştirme için tasarlanmış birkaç yeni bölme vardır:
Manifest bölmesi, uygulama manifest dosyasının görsel bir temsilini sunar. Buradan "Ana ekrana ekle" iş akışını manuel olarak tetikleyebilirsiniz.
Hizmet Çalışanları bölmesi, mevcut sayfaya kayıtlı hizmet çalışanını incelemenize ve onunla etkileşim kurmanıza olanak tanır.
Depolama alanını temizle bölmesi, sayfayı temiz bir şekilde görüntüleyebilmeniz için her türlü veriyi silmenize olanak tanır.
JavaScript
Kullanıcı arayüzü ile arka uç arasındaki sınırı aşmak, full-stack web geliştirmenin zor bir parçasıdır. Bir web uygulamasında hata ayıklama yaparken arka uçunuzun 500 durum kodu döndürdüğünü fark ederseniz DevTools'un yararlılığının sınırına ulaşmışsınız demektir. Bu durumda, bağlamı değiştirmeniz ve sorunu gidermek için arka uç geliştirme ortamınızı başlatmanız gerekir.
Ancak Node.js'de yazılan arka uçlarla birlikte, ön uç ve arka uç arasındaki sınırlar bulanıklaşmaya başlıyor. Node.js, V8 JavaScript motorunda (Google Chrome'u destekleyen motor) çalıştığından DevTools'dan Node.js'de hata ayıklamanın mümkün olmasını istedik. Node.js ekipleri için V8, DevTools ve Google Cloud Platform sayesinde artık bir Node.js uygulamasını incelemek üzere DevTools'un güçlü hata ayıklama özelliklerinin tümünü kullanabilirsiniz. Bu işlev, Node.js gecelik derlemelerine eklenmiş olsa da DevTools entegrasyonu, büyük bir sürüme eklenmeden önce hâlâ geliştirilmektedir. Node.js uygulamanızdaki hataları DevTools'dan düzeltmek, bir gün node --inspect app.js'yi geçmek ve herhangi bir Chrome penceresinde DevTools'dan bağlanmak kadar basit olacak.
Node Inspector gibi mevcut araçlar kullanıcı arayüzüne dayalı hata ayıklama deneyimleri sunsa da yeni Node.js DevTools entegrasyonu, DevTools'un asenkron yığın hata ayıklama, kara kutu ve ES6 desteği gibi en son hata ayıklama özellikleriyle güncel kalır.