Google I/O 2016 sona erdi. DevTools; Paul Bakaus, Paul Ireland ve Seth Thompson'ın DevTools'un geleceğini anlattığı konuşmaları da dahil olmak üzere I/O'da güçlü bir varlık sergiledi. DevTools'un 2016 ve sonrasında nerelere ilerleyeceğ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 muhtemelen biliyorsunuzdur ancak site oluştururken bu araçları nasıl kullanacağınızı bilemeyebilirsiniz. "Yazma" ifadesi ile site oluşturma işlemini kastediyoruz. Öngörülebilir geleceğin hedeflerinden biri, birden fazla cihazda sitenizi yinelemenizi, denemenizi ve emüle etmenizi kolaylaştırmaktır.
Cihaz modu
DevTools ekibi, Chrome 49'da ilk büyük yükseltmesini alan Cihaz Modu deneyimini geliştirmeye devam ediyor. Güncellemelere genel bir bakış için Mart ayındaki yayını (Mobil öncelikli bir dünya için yeni Cihaz Modu) inceleyin. Kapsayıcı hedef, sitenizin tüm form faktörlerinde görüntülenmesi ve emülasyonu için sorunsuz bir iş akışı sağlamaktır.
Makaleyi Mart ayında yayınladığımız günden beri Canary'de yapılan bazı Cihaz Modu güncellemelerinin kısa bir özetini burada bulabilirsiniz.
Bir sayfayı belirli bir cihaz olarak görüntülerken cihaz donanımını sayfanızın etrafında göstererek deneyime daha fazla dalabilirsiniz.
Cihaz yönü menüsü, gezinme çubuğu ve klavye gibi farklı sistem kullanıcı arayüzü öğeleri etkin olduğunda sayfanızı görüntülemenize olanak tanır.
Masaüstü hikayesi de iyileşti. Cihaz Modu'nun yakınlaştırma özelliği sayesinde, aslında üzerinde çalışmakta olduğunuz ekrandan daha büyük olan masaüstü ekranlarının emülasyonunu yapabilirsiniz. Örneğin, 4K (3840 piksel x 2160 piksel) ekran gibi.
Ağı, Ağ paneline geçmek zorunda kalmadan doğrudan Cihaz Modu kullanıcı arayüzünden daraltabilirsiniz.
Kaynak farkları
Bir sitenin stilini tekrarladığınızda değişikliklerinizi kolayca unutabilirsiniz. Geliştirici Araçları, bu sorunu düzeltmek için, Kaynaklar panelindeki satır numarası oluğunda görsel işaretler kullanarak yaptığınız değişiklikleri izlemenize yardımcı olur. Silinen çizgiler kırmızı çizgiyle, değiştirilen çizgiler mor, yeni çizgiler ise yeşil renkte vurgulanır.
Değişikliklerinizi yeni Hızlı Kaynak çekmecesi sekmesinden de takip edebilirsiniz:
Hızlı Kaynak sekmesi ilk kez, CSS kurallarınızla aynı anda HTML veya JavaScript kaynak kodunuza odaklanmanıza olanak tanımaktadır. Ayrıca, Stiller bölmesinde bir CSS özelliğini tıkladığınızda, Hızlı Kaynak sekmesi otomatik olarak kaynaktaki tanımı vurgular ve bu sekmeye gider.
Hemen denemek için Chrome Canary'de sources diff denemesini etkinleştirin.
Canlı Sass düzenleme
Sass düzenleme iş akışında yakında yapılacak önemli iyileştirmelere bir göz atabilirsiniz. Bu özellikler henüz deneme aşamasındadır. Denemeniz için hazır olduğunda bunları bir sonraki yayınlayacağız.
Geliştirici Araçları, temel olarak Sass değişkenlerini istediğiniz gibi görüntülemenizi ve düzenlemenizi sağlayacak. Sass değişkeninden derlenmiş bir değeri tıkladığınızda, yeni Hızlı Kaynaklar sekmesi değişkenin tanımına gider.
Bir Sass değişkeninden derlenmiş bir değeri düzenlediğinizde, düzenlemeniz yalnızca seçtiğiniz bağımsız ö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 baktığınızda, web geliştirme dünyasında yeni ortaya çıkan devasa bir temayla karşılaşabilirsiniz: Progresif Web Uygulamaları.
Progresif Web Uygulaması modeli ortaya çıktıkça, DevTools geliştiricilerin muhteşem progresif web uygulamaları oluşturmak için ihtiyaç duydukları araçları sağlamak üzere hızla yineleme yapıyor. Bu modern uygulamaları derlemenin ve hata ayıklamanın genellikle benzersiz gereklilikler gerektirdiğini fark ettik. Bu nedenle DevTools, panelin tamamını Progresif Web Uygulaması geliştirmeye ayırdı. Chrome Canary'yi açtığınızda Kaynaklar panelinin Uygulama paneliyle değiştirildiğini göreceksiniz. Kaynaklar panelinde yer alan önceki işlevlerin tümü hâlâ mevcut. Özellikle 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, geçerli sayfa için kayıtlı hizmet çalışanını incelemenize ve onunla etkileşimde bulunmanıza olanak tanır.
Depolama Alanını Temizle bölmesi, sayfaları temiz bir seçenekle görüntüleyebilmek için her tür veriyi silmenize olanak tanır.
JavaScript
Ön uç ile arka uç arasındaki sınırı geçmek, full-stack web geliştirmenin zor bir parçasıdır. Bir web uygulamasında hata ayıklarken arka ucunuzun 500 durum kodu döndürdüğünü fark ederseniz DevTools'un kullanışlılık sınırına ulaşmışsınız demektir. Bu da sorunu gidermek için bağlamları değiştirmenizi ve arka uç geliştirme ortamınızı çalıştırmanızı gerektirir.
Ancak Node.js'de yazılan arka uçlar sayesinde, ön uç ile arka uç arasındaki sınırlar belirsizleşmeye başlıyor. Node.js, V8 JavaScript motorunda (Google Chrome'u destekleyen motor) çalıştığı için, Node.js'nin Geliştirici Araçları'ndan hata ayıklamasını mümkün kılmak istedik. V8, DevTools ve Node.js ekipleri sayesinde, artık DevTools'un güçlü hata ayıklama özelliklerinin tümünü kullanarak Node.js uygulamasını inceleyebilirsiniz. Node.js gecelik derlemelerine ulaşmış olsa da DevTools entegrasyonu, ana sürüme eklenmeden önce geliştirilmeye devam etmektedir. Node.js uygulamanızda Geliştirici Araçları'ndan hata ayıklama işlemi, ileride node --inspect app.js aracını geçip herhangi bir Chrome penceresinde Geliştirici Araçları'ndan bağlanmak kadar basit olacaktır.
Node Inspector gibi mevcut araçlar, GUI tabanlı hata ayıklama deneyimleri sunsa da yeni Node.js DevTools entegrasyonu, DevTools'un eş zamansız yığın hata ayıklama, kara kutu ve ES6 desteği gibi en son hata ayıklama özellikleriyle güncel olacaktır.