Bir Tools dan daha fazlası : Chrome Dev Tools

Sizlere DevToolsun az bilinen ama çok işe yarayan özelliklerinden bahsedeceğim.

DevTools Tarayacı üzerinde sayfaları düzenlemenize sorunları hızlı bir şekilde tespit etmenize yarayan bir geliştiricinin belki de en sevdiği araçtır.

DevTools ile CSS, html, Javascriptleri manipüle edebilir, sitenin hızını yavaşlatabilir, sitedeki hataları uyarıları görebilir, performans iyileştirmelerini yapabilir, site açıldığında yüklenen dosyaları apileri kontrol edebilir, performans testi yapabilir, site verilerini temizleyebilir. Ayrıca site kaynaklarını kontrol edebilir ve daha bir sürü özelliğinden faydalanarak daha rahat bir kodlama yapabilirsiniz. Hadi başlayalım…

İlk önce açmak için sağ tık yapıp incele diyebilirsiniz ya da Command+Option+C (Mac) veya Control+Shift+C (Windows, Linux, ChromeOS) tuşlarına basarak da açabilirsiniz. Ya da cmd + alt + i veya cmd + opt + j de kullanabilirsiniz.

Command Palate Cmd + shift + p

Öncelikle DevTools özelliklerine hızlıca ulaşmak için Command Palate açabilirsiniz. Genelde makalede anlatırken Command Palate kullanacağım.

Show Rules Özelliği

Command Palatine Show Rules Hover özelliğini açtığınızda cetvel özelliğini etkinleştirmiş olursunuz.

Dom elementlerin üzerine geldiğinizde genişliğini ve yüksekliğini görebilirsiniz.

DevTools da arama : cmd + f

Açılan alanda istediğiniz seçici metni yazarak çok kolay bir şekilde dom içinde seçim yapabilirsiniz.

Dev tools da html editleme

Yapmanız gereken elementin üzerine gelip sağ tıklayıp edit as html seçmek ve seçtiğiniz zaman seçili alan size html dom elementi olarak edit’leyebilirsiniz.

Dom elementlerinde gezinirken DevTools sizin hareketlerinizi takip eder ve bunları indexler. Sonradan bunlara ulaşmak için yapmanız gereken $(0) komutunu kullanmak. $(0) buradaki 0 index numarasıdır 0,1,2 diye gider sizin hareketinize göre kaydeder.

Global değişken olarak hafızaya kayıt etme

Dom elementleri arasında gezinti yaparken “Store as global veriable” seçeneğiyle elementi hafıza kaydedebilirsiniz. Sonradan console temp1, temp2 yazarak hafızadaki elementi çağırabilirsiniz.

Element Copy Özellikleri

Copy Element kullanarak seçtiğiniz elementin hafıza copyasını oluşturabilir. Copy selector ile seçici yolunu alabilir. Copy JS path ile Javascript seçiciyi alabilir. “Copy styles” ile de style seçici yolunu alabilirsiniz

Kullanılmayan Javascript ve Cssleri yakalamak

Command Palatte show coverage açın ve yenile işaretine tıklayarak siteyi yeniden yükleyin.

Bundan sonra kodu analiz etmeye başlayabilirsiniz. Kullanılmayan CSS ve JS’ler kırmızı gözükecektir.

Umarım faydalı olmuştur. Bu makaleye eklemeye yapmaya devam edeceğim