Chrome Geliştirici Araçları hızlı ilerler. Bu nedenle, birkaç bileşende sunduğumuz yeni işlevlere ve iyileştirmelere dikkatinizi çekmek istiyoruz. Şimdi de bazı kullanıcı arayüzü değişiklikleri, yüksek çözünürlüklü JS profili oluşturma ve yeni Workspace özelliklerini ele alacağız.
- Yüksek çözünürlüklü profil oluşturma artık 0,1 milisaniye hassasiyette yapılıyor
- Araç çubukları Geliştirici Araçları'nın en üstüne, Geçersiz kılmalar ise konsol çekmecesine taşındı
- Çalışma alanları, dosya eklemeyi/kaldırmayı/aramayı destekleyen çeşitli özellikler ekledi
Yüksek Çözünürlüklü Profil Oluşturma
CPU profili oluşturma, JavaScript'inizin ne kadar verimli olduğunu görmek için oldukça kullanışlı bir özelliktir. Geleneksel profil görünümlerinin yanı sıra bu yaz, bir sayfanın zaman içindeki JavaScript işlemesini görsel olarak temsil eden Flame Grafiği'ni kullanıma sunduk. Çağrı yığınınızın ne kadar derin olduğunu ve her bir işlevlerin 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ğaç (yukarıdan aşağıya) temsillerinde ve Flame Grafiği'nde yalnızca 1 milisaniye hassasiyete kadarki işlemler gösteriliyordu. Çoğu uygulama için bu bir sorun yaratmaz. Ancak, oyun gibi kullanıcı arayüzünde hızın gerçekten önemli olduğu bir konu üzerinde çalışıyorsanız, 1 milisaniyelik çözünürlük, sitenizin yavaş olmasına veya kullanıcı arayüzünüz gecikmeli görünmesine neden olan şeylere dair anlamlı sonuçlar elde edemeyecek kadar tıkanık olabilir. Yüksek Çözünürlüklü Profil Oluşturmayı (şu anda yalnızca Canary) etkinleştirmek için:
- Geliştirici Araçları ayarlarını açın.
- Genel sekmesinde, Profiler'in altında Yüksek çözünürlüklü CPU profil çıkarma'yı açın.
Aşağıda, normal profil çıkarmada ve yüksek çözünürlüklü olarak görülen ve HTML5Rocks.com ana sayfasının yüklendiği profilli bir Alev Grafiği örneği verilmiştir:
Normal profil oluşturma çözümlemesinde, işlem süresi her zaman sonraki milisaniyeye yuvarlanır. Böylece yalnızca 0, 1 milisaniye veya daha kısa süren bir işlem yine de 1, 0 milisaniye sürüyor olarak rapor edilir ve diğer işlemler çağrı yığınında hiç gösterilmeyebilir.
Yüksek çözünürlüklü profil oluşturma, JavaScript sanal makinesinde büyük bir ek yüke sahiptir. Bu nedenle varsayılan olarak devre dışı bırakılır. Normal profil çıkarma çözünürlüğünden kesinlikle daha iyi görünse de, bu çözümü sadece kesinliğe gerçekten ihtiyacınız olduğunda kullanmanızı öneririz.
Geliştirici Araçları Kullanıcı Arayüzü İyileştirmeleri
Canary'de her zaman kullanıma sunulan yeni özellikler olsa da, kullanıcı arayüzünde yapılan birkaç önemli değişikliğe dikkatinizi çekmek istiyoruz: Genel olarak kullanıcı arayüzünün üst kısmına çıkan düğmeler, Zaman Çizelgesi'nde gezinme ve bilgi panelleri, Geçersiz Kılmaların Konsol Çekmecesi'ne taşınması.
İlk olarak, nereden geldiğimize bir göz atalım. Zaman Çizelgesi hakkında konuştuğumuz için bir çift ekran görüntüsüyle ilk iki kuşu öldürmeye çalışacağım. Chrome'da (kararlı) Zaman Çizelgesi şu anda aşağıdaki gibi görünür:
Zaman Çizelgesi'nin şu anda nasıl göründüğüne bakalım.
Aşağıdakilere dikkat edin:
- Hem sol hem de genel olarak Geliştirici Araçları için araç çubukları ve düğmeleri ekranın üst kısmında görebilirsiniz.
- Zaman Çizelgesi kayıtlarının artık soldaki panelde iç içe yerleştirme yapıları vardır. Hatta bunlar arasında gezinmek için klavyeyi bile kullanabilirsiniz. Ekranı yukarı ve aşağı kaydırmak için yukarı ve aşağı tuşlarının yanı sıra, iç içe yerleştirilmiş kayıtları açmak ve kapatmak için sol ve sağ tuşlarını da kullanabilirsiniz.
- Artık seçtiğiniz girişin sağ tarafındaki panelde saat ayrıntıları gösterilir. (Fareyle diğer girişlerin üzerine gelerek de bilgi alabilirsiniz.)
Şimdi konsol çekmecesine göz atalım. Konsol çekmecesini açmak için Geliştirici Araçları'nda Escape tuşuna basın veya konsol çekmecesi düğmesine 
basın. Çekmece aşağıdan yukarı doğru yuvarlanır.
Varsayılan olarak burada Konsol ve Arama sekmeleriniz olur. Önceden Geçersiz Kılma olarak bilinen işleve erişmek için Geliştirici Araçları ayarlarını açın ve "Konsol çekmecesinde 'Emülasyon' görünümünü göster"in yanındaki kutuyu işaretleyin. Ayarlar kutusunu kapatın. Konsol çekmecesinde aşağıdaki ekran görüntüsünde gösterildiği gibi bir Emülasyon sekmesi görünür:
Tüm emülasyonunuzu orada yapabilirsiniz.
Bu değişikliğin nedeni, önceden emülasyon geçersiz kılmalarınızı değiştirmek için Ayarlar'a girip çıktıktan sonra geri dönüp sayfanızı görüntülemektir. Artık stilleri değiştirirken emülasyon geçersiz kılmalarınızda değişiklik yapabilirsiniz.
İyileştirilmiş Çalışma Alanları
Özellikle çalışma alanları, yazma iş akışınızı biraz basitleştirebilecek bir özelliktir, ancak bu özellik, aslında hak ettiği kadar ilgi görmez. Workspaces sayesinde, Geliştirici Araçları'nda denemeler yapıp değişiklik yapmak ve değişikliklerinizi kopyalayıp kaynak dosyalarınıza yapıştırmak zorunda kalmadan, Chrome'dan ayrılmadan Geliştirici Araçları'nda değişiklik yapabilir, bunları tarayıcıda oluşturulmuş görebilir ve dosyalarınızın kalıcı bir yerel sürümüne kaydedebilirsiniz.
Chrome Geliştirici Araçları 2013 Devrimleri makalesini henüz okumadıysanız bir göz atın ve son birkaç ay içinde bu özellikleri nasıl geliştirdiğimizi öğrenmek için buraya geri dönün.
Dosya Ekleme Daha Kolay
Revolutions 2013 makalesinin zamanında, yeni bir çalışma alanı oluşturmak için klasörün çalışma alanlarınıza eklenmesi ve klasörün bir ağ kaynağı ile eşlenmesi gerekiyordu. Bu işlemi tek bir adıma indirdik: Soldaki Kaynaklar panelini sağ tıklayıp Çalışma alanına klasör ekle'yi seçin. Çalışma Alanlarınıza eklenecek yeni bir klasör seçebileceğiniz bir dosya iletişim kutusu açılır. (Şu anda vurgulanmış olan klasörü çalışma alanlarınıza eklenmez.)
Dosya Oluşturma ve Kaldırma
Artık Workspace'lerin içinden Çalışma Alanları için kullandığınız yerel dizine yeni dosyalar ekleyebilirsiniz. Soldaki Kaynaklar panelinde bir klasörü sağ tıklayıp Yeni Dosya'yı seçmeniz yeterlidir.
Ayrıca, Çalışma Alanlarından dosya kaldırabilirsiniz. Soldaki Kaynaklar panelinde bir dosyayı sağ tıklayın ve Dosyayı Sil'i seçin.
Dosyayı Çoğalt'ı seçerek de bir dosyanın kopyasını oluşturabilirsiniz.
Yenile
Artık doğrudan çalışma alanlarında yeni dosyalar oluşturabileceğiniz (veya dosya silebildiğiniz) için Kaynaklar dizini de otomatik olarak yenilenir ve bu yeni dosyaları gösterir. Aksi takdirde, bir klasörü dilediğiniz zaman sağ tıklayıp pop-up menüden Yenile'yi seçerek yenilemeyi zorunlu kılabilirsiniz.
Bu, dosyalarınızı başka bir düzenleyicide açarken değiştirildiğinde ve bu değişikliklerin Geliştirici Araçları'nda görünmesini istediğinizde de faydalıdır.
Dosyalar Arasında Arama
Dosyalarda arama için arayüzü biraz daha hassaslaştırdık. Artık, Geliştirici Araçları'na yüklenen tüm dosyaların yanı sıra çalışma alanlarınızdaki tüm dosyalarda da dize araması yapabilirsiniz. Bir dizeyi veya normal ifadeyi arayabilirsiniz. Her dosya veya sayfadaki her bir geçtiği yeri eşleştiririz. Çalışma Alanlarında (şu anda Canary'dedir) birden fazla dosya aramak için:
- Escape tuşuna basarak konsol çekmecesini açın ve Arama penceresini açmak için Konsol'un yanındaki Ara sekmesini tıklayın
VEYA
Arama penceresini açmak için Ctrl + Shift + F (Mac'te Cmd + Opt + F) tuşuna basın.
- Arama Kaynakları kutusuna sorgunuzu yazın ve Enter tuşuna basın. Sorgunuz normal bir ifadeyse veya büyük/küçük harfe duyarlı olmaması gerekiyorsa uygun kutuyu tıklayın.
Yoksayılanlar Listeleri
Sonuçlarınızı karmaşık hale getiren çok sayıda .git dosyanız veya README.md dosyanız varsa, dosya metinlerinde arama yapmak veya dosya adlarına göre filtre uygulamak çok yorucu olabilir.
Bu nedenle, Çalışma Alanlarına bir yoksayılanlar listesi özelliği ekledik. Böylece, çalışma alanınızı görüntülerken ve arama yaparken belirli dosya türlerini veya klasörleri hariç tutabilirsiniz.
Çalışma Alanlarında paylaşılan mevcut yoksayılanlar listesini nasıl görüntüleyebileceğiniz ve değiştirebileceğiniz aşağıda açıklanmıştır:
- Geliştirici Araçları'nın Ayarlar bölümünü açın.
- Çalışma Alanı'nı tıklayın.
- Yaygın altında, Klasör hariç tutma kalıbı kutusunda kalıpları görüntüleyebilir ve/veya düzenleyebilirsiniz.
Aşağıdaki varsayılan genel hariç tutma kalıplarıyla gönderilir:
Bu normal ifade; Git, SVN, Mercurial'deki meta veriler, Eclipse ve IntelliJ'deki proje dosyaları, OS X DS_Store ve Çöp Kutusu dosyaları ile Sass önbellekleri gibi göz ardı edilmeye değer diğer bazı öğeleri hariç tutar. Tüm alt klasörler de dahil olmak üzere tüm klasörleri kullanıcı arayüzünde görünmemeleri ve dosyalarda arama yaptıklarında görünmemeleri için kullanıcı arayüzünden hariç tutulur.
Çalışma Alanına Özel Yoksayma Listeleri
Aramalardaki karmaşıklığı azaltmak için, daha spesifik olmak adına belirli çalışma alanınızdaki dosya ve klasörleri hariç tutmayı da seçebilirsiniz. Hariç tutulan klasörler kaynak dizininde görünmez.
Bir klasörün tamamını çalışma alanınızdan hariç tutmak için soldaki Kaynaklar panelinde klasörü sağ tıklayın ve Klasörü Hariç Tut'u seçin. Belirli bir çalışma alanı klasörüyle ilgili eşlemeleri ve hariç tutulan klasörleri 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ıklayın. "Dosya sistemini düzenle" penceresi açılır. Bu pencerede eşlemeleri ve/veya hariç tutulan klasörleri ekleyebilir ya da kaldırabilirsiniz.
