Chrome DevTools hızla gelişiyor. Bu nedenle, birkaç bileşende kullanıma sunduğumuz yeni işlevlere ve iyileştirmelere dikkatinizi çekmek istedik. Daha açık belirtmek gerekirse, bazı kullanıcı arayüzü değişiklikleri, yüksek çözünürlüklü JS profilleme ve yeni Workspace özellikleri hakkında konuşacağız.
- Yüksek çözünürlüklü profil oluşturma artık 0,1 milisaniye hassasiyete sahip
- Araç çubukları DevTools'un üst kısmına, geçersiz kılma işlemleri ise konsol çekmecesine taşındı
- Çalışma Alanları'na, dosya ekleme/kaldırma/arama işlemlerini destekleyen çeşitli özellikler eklendi
Yüksek Çözünürlüklü Profil Oluşturma
CPU profilleme, JavaScript'inizin ne kadar verimli olduğunu görmek için oldukça kullanışlı bir özelliktir. Geleneksel profil görünümlerine ek olarak bu yaz, bir sayfanın JavaScript işlemenin zaman içindeki durumunu görsel olarak gösteren bir alev grafiği kullanıma sunduk. Çağrı yığınınızın ne kadar derin gittiğini ve işlevlerin tek tek işlenmesinin ne kadar sürdüğünü kolayca görüntülemek için kullanılabilir.
Yakın zamana kadar hem geleneksel Ağır (aşağıdan yukarı) hem de Ağ (yukarıdan aşağı) gösterimlerinin yanı sıra Alev Grafiği, yalnızca 1 milisaniye hassasiyetine kadar olan işlemleri gösteriyordu. Çoğu uygulama için bu yeterlidir. Ancak kullanıcı arayüzünde hızın gerçekten önemli olduğu bir şey üzerinde çalışıyorsanız (ör. oyun) 1 milisaniyelik çözünürlük, sitenizin yavaşlamasına veya kullanıcı arayüzünüzün gecikmeli görünmesine neden olan şeyle ilgili anlamlı sonuçlar elde etmek için çok büyük olabilir. Yüksek Çözünürlüklü Profillemeyi etkinleştirmek için (şu anda yalnızca Canary):
- Geliştirici Araçları ayarlarını açın.
- Genel sekmesinde, Profilleyici altında Yüksek çözünürlüklü CPU profilleme'yi etkinleştirin.
Aşağıda, normal profillemede ve yüksek çözünürlükte görülen bir Alev Grafiği örneği verilmiştir. Bu örnekte, HTML5Rocks.com ana sayfasının yüklenmesinin profili oluşturulmaktadır:
Normal profil oluşturma çözünürlüğünde, işlem süresi her zaman sonraki milisaniyeye yuvarlanır. Bu nedenle, yalnızca 0,1 milisaniye veya daha kısa süren bir işlem yine 1,0 milisaniye sürdüğü şeklinde raporlanır ve diğer işlemler çağrı yığınında hiç gösterilmeyebilir.
Yüksek çözünürlüklü profilleme, JavaScript sanal makinesinde büyük bir yükü olduğundan varsayılan olarak devre dışıdır. Normal profil oluşturma çözünürlüğünden daha iyi görünse de yalnızca bu çözünürlüğe gerçekten ihtiyacınız varsa kullanmanızı öneririz.
Geliştirici Araçları kullanıcı arayüzü iyileştirmeleri
Canary'da her zaman yeni özellikler kullanıma sunulsa da dikkatinizi birkaç önemli kullanıcı arayüzü değişikliğine çekmek istiyoruz: Genel olarak kullanıcı arayüzünün üst kısmına çıkan düğmeler, Zaman Çizelgesi gezinme ve bilgi panelleri ve geçersiz kılma işlemlerinin Console çekmecesine taşınması.
Öncelikle, nereden geldiğimizden bahsedelim. Zaten zaman çizelgesi hakkında konuştuğumuz için ilk iki sorunu tek bir ekran görüntüsü ile çözmeye çalışacağım. Zaman Çizelgesi'nin şu anda Chrome'da (stabil) görünümü:
Zaman Çizelgesi şu anda aşağıdaki gibi görünüyor.
Aşağıdakilere dikkat edin:
- Artık hem sol taraftaki zaman çizelgesi araç çubukları hem de sağ taraftaki genel Geliştirici Araçları araç çubukları ve düğmeleri ekranın üst kısmında yer alıyor.
- Zaman Çizelgesi kayıtlarının iç içe yerleştirilme yapısı artık sol taraftaki panelde yer alıyor. Hatta klavyeyi kullanarak kayıtlar arasında gezinebilirsiniz. Yukarı ve aşağı kaydırmaya yarayan yukarı ve aşağı ok tuşlarının yanı sıra iç içe yerleştirilmiş kayıtları açmak ve kapatmak için sol ve sağ ok tuşlarını da kullanabilirsiniz.
- Saat ayrıntıları artık seçtiğiniz giriş için sağ taraftaki bir panelde gösterilir. (Fareyle diğer girişlerin üzerine gelerek de ilgili bilgileri alabilirsiniz.)
Şimdi konsol çekmecesine göz atalım. Konsolu çekmecesini açmak için DevTools'tan Escape tuşuna veya konsol çekmecesi düğmesine 
basın. Böylece çekmece alttan açılır.
Varsayılan olarak Console ve Arama sekmeleriniz olur. Önceden Üzerine Yazma olarak bilinen işleve erişmek için DevTools ayarlarını açın ve "Konsol çekmecesinde "Emülasyon" görünümünü göster" seçeneğinin yanındaki kutuyu işaretleyin. Ayarlar kutusunu kapattığınızda, konsol çekmecesinde aşağıdaki ekran görüntüsünde gösterildiği gibi bir Emülasyon sekmesi görürsünüz:
Tüm emülasyon işlemlerinizi buradan yapabilirsiniz.
Bu değişikliğin nedeni, daha önce emülasyon geçersiz kılmalarınızı değiştirmek için Ayarlar'a girip çıkmak ve ardından geri dönüp sayfanızı görüntülemek zorunda olmanızdı. Artık stil üzerinde değişiklik yaparken emülasyon geçersiz kılma işlemlerinizi değiştirebilirsiniz.
İyileştirilmiş çalışma alanları
Özellikle çalışma alanları, içerik üretme iş akışınızı oldukça basitleştirebilecek bir özelliktir. Ancak hak ettiği kadar ilgi görmez. Workspaces ile, Geliştirici Araçları'nda deneme yapıp değişiklik yapmak ve değişikliklerinizi kaynak dosyalarınıza kopyalayıp yapıştırmak yerine, tüm bunları Chrome'dan ayrılmadan Geliştirici Araçları'nda değişiklik yapabilir, değişikliklerin tarayıcıda oluşturulmasını izleyebilir ve dosyalarınızın kalıcı yerel bir sürümüne kaydedebilirsiniz.
Chrome Geliştirici Araçları'nda 2013'teki Devrimler makalesini henüz okumadıysanız önce bu makaleyi inceleyin, ardından son birkaç ay içinde bu özellikleri nasıl iyileştirdiğimizi öğrenmek için buraya dönün.
Dosya ekleme işlemi daha kolay
2013'teki Revolutions makalesinde, yeni bir çalışma alanı oluşturmak için klasörün çalışma alanlarınıza eklenmesi ve ardından klasörün bir ağ kaynağıyla eşlenmesi gerekiyordu. Bu işlemi tek bir adıma indirgedik: Kaynaklar'ın sol panelinde sağ tıklayıp Çalışma alanına klasör ekle'yi seçmeniz yeterlidir. Bu işlem, çalışma alanlarınıza eklemek için yeni bir klasör seçebileceğiniz bir dosya iletişim kutusu açar. (Bu işlem, şu anda vurgulanan klasörü Workspace'lerinize eklemez.)
Dosya Oluşturma ve Kaldırma
Artık Workspaces'de Workspaces için kullandığınız yerel dizine yeni dosya ekleyebilirsiniz. Soldaki Kaynaklar panelinde bir klasörü sağ tıklayıp Yeni Dosya'yı seçmeniz yeterlidir.
Dosyaları Çalışma Alanları'ndan da kaldırabilirsiniz. Soldaki Kaynaklar panelinde bir dosyayı sağ tıklayın ve Dosyayı Sil'i seçin.
Dosyayı Kopyala'yı seçerek de dosyaları kopyalayabilirsiniz.
Yenile
Artık doğrudan çalışma alanlarında yeni dosya oluşturabileceğiniz (veya dosyaları sileyebileceğiniz) için Kaynaklar dizini de otomatik olarak yenilenip bu yeni dosyaları gösterir. Aksi takdirde, klasörü sağ tıklayıp pop-up menüden Yenile'yi seçerek yenilemeyi zorlayabilirsiniz.
Bu yöntem, başka bir düzenleyicide açık olan dosyalarınızı değiştirirseniz ve değişikliklerin DevTools'da gösterilmesini isterseniz de yararlıdır.
Dosyalarda arama yapma
Dosyalarda arama yapma arayüzünü biraz daha hassaslaştırdık. Artık DevTools'a yüklenen tüm dosyaların yanı sıra çalışma alanlarınızdaki tüm dosyalarda da dize araması yapabilirsiniz. Bir dize veya normal ifade arayabilirsiniz. Her dosya veya sayfada bulunan her bir ifadeyle eşleşme sağlanır. Workspaces'te birden fazla dosyayı aramak için (şu anda Canary sürümünde):
- Escape tuşuna basarak konsol çekmecesini açın ve Arama penceresini açmak için Konsol'un yanındaki Arama sekmesini tıklayın.
VEYA
Arama penceresini açmak için Ctrl + Shift + F (Mac'te Cmd + Opt + F) tuşuna basın.
- Sorgunuzu Arama Kaynakları kutusuna yazıp Enter tuşuna basın. Sorgunuz normal bir ifadeyse veya büyük/küçük harf duyarlı olmaması gerekiyorsa uygun kutuyu tıklayın.
Yoksayılanlar Listeleri
Sonuçlarınızın arasında çok sayıda .git veya README.md dosyası varsa dosya metinlerinde arama yapmak ya da dosya adlarına göre filtreleme yapmak çok sıkıcı olabilir.
Bu nedenle, çalışma alanınızı görüntülerken ve ararken belirli dosya türlerini veya klasörleri hariç tutabilmeniz için Workspace'e bir yoksayma listesi özelliği ekledik.
Workspaces'te mevcut paylaşılan yoksayılanlar listesini görüntüleyip değiştirmek için:
- Geliştirici Araçları Ayarları'nı açın.
- Çalışma Alanı'nı tıklayın.
- Genel bölümündeki Klasör hariç tutma kalıbı kutusunda kalıpları görüntüleyebilir ve/veya düzenleyebilirsiniz.
Varsayılan olarak aşağıdaki global hariç tutma kalıplarını göndeririz:
Bu normal ifade, Git, SVN, Mercurial, Eclipse ve IntelliJ'deki proje dosyalarının, OS X DS_Store ve Çöp dosyalarının meta verilerini ve Sass'taki önbelleği gibi göz ardı edilmesine değer diğer bazı öğeleri hariç tutar. Alt klasörleri de dahil olmak üzere klasörün tamamı, kullanıcı arayüzünde gösterilmemesi ve dosyalarda arama yapılırken görünmemesi için kullanıcı arayüzünden hariç tutulur.
Çalışma alanına özgü yoksayılanlar listeleri
Daha ayrıntılı aramalar yapmak için aramalardaki dağınıklığı azaltmak amacıyla belirli bir çalışma alanınızdaki dosyaları ve klasörleri hariç tutmayı da seçebilirsiniz. Hariç tutulan klasörler kaynaklar dizininde de görünmez.
Bir klasörün tamamını çalışma alanınızdan hariç tutmak için sol Kaynaklar panelinde klasörü sağ tıklayın ve Klasörü Hariç Tut'u seçin. Belirli bir çalışma alanı klasörünün eşlemelerini ve hariç tutulan klasörlerini görmek için:
- Geliştirici Araçları ayarlarını açın.
- Çalışma Alanı'nı tıklayın.
- İlgilendiğiniz klasörü vurgulayın.
- Düzenle'yi tıkladığınızda "Dosya sistemini düzenleyin" penceresi görünür. Bu pencereden eşlemeleri ve/veya hariç tutulan klasörleri ekleyebilir veya kaldırabilirsiniz.
