Microsoft Edge DevTools mühendisi Patrick Brosset, tarayıcı DevTools'un en popüler özelliklerinden birinden en iyi şekilde elde etmek için web geliştirme topluluğunun en sevdiği ipuçlarından bazılarını topladı: mütevazı Konsol. Patrick'in blog gönderisindenbirkaç önemli nokta topladık DevTools'ta daha üretken olmanıza yardımcı olabilecek birkaç ipucunun yanı sıra.

Ama önce: Konsol nedir?

Microsoft Edge DevTools'ta Konsol aracının iki ana işlevi vardır. Bunlardan ilki, bir web sitesinin Javascript'inden kaydedilen iletilerin ve hataların çıktısını almadır. Örneğin, web sitenizin kodunda bir Javascript satırı varsa, DevTools Konsol sekmesinde aşağıdaki çıktıyı almayı beklersiniz.



Konsolun ikinci işlevi bir Javascript REPL olarak hizmet vermektedir, yani Javascript satırlarını doğrudan sekmeye yazabilir ve çalıştırabilirsiniz.
console.log(`My code is running!`);

İpucu #1: Konsol komutlarını çok satırlı giriş, komut geçmişi ve otomatik tamamlama ile çalıştırma ve yeniden çalıştırma

Bazen, Konsolda birkaç kod satırı çalıştırmak yararlı olabilir. Her satırdan sonra Shift + Enter tuşlarına basarak bunu yapabileceğinizi biliyor muydunuz? Konsolda çok satırlı kod yürütüldüğünde, bu örnekte gösterildiği gibi, sonuç görüntülenmeden önce tüm satırlar çalıştırılır.
Konsoldaki komutları yeniden kullanmanın birkaç yolu vardır, bu da özellikle karmaşık veya çok satırlı kodu tekrar tekrar yürütürken yararlıdır.
Diğer birçok REPL'de olduğu gibi, daha önce girilen kod arasında geri dönmek için DevTools Konsolu'ndaki yukarı oka basabilirsiniz. Ayrıca, Konsolun otomatik tamamlama özelliği geçmişte girdiğiniz komutların geçmişini içerir. Satırın bir bölümünü yazmaya başlayın, öneriler içeren bir otomatik tamamlama kutusu görünecektir.
Daha uzun veya daha karmaşık kodlar için DevTools'taki Parçacıklar aracını da kullanabileceğinizi belirtmek gerekir. Parçacıklar'ı açmak için Kaynaklar sekmesini seçin. Ardından, sol bölmede, Parçacıkları ortaya çıkarmak için >> simgesini tıklatın. Bu bölmeden, istediğiniz zaman çalıştırmak için kod parçacıkları oluşturabilir, kaydedebilir ve yeniden yükleyebilirsiniz. Parçacıklar REPL üzerinden etkileşimli olarak değil komut dosyası olarak çalıştığından, bir parçacık çalıştırırken yalnızca Konsol'a açıkça günlüğe kaydedilen içerik görünür.

İpucu #2: $ komutlarını kullan

DevTools'taki Konsol yardımcı programları API'si, Konsol'a sık kullanılan komutları girmek için bazı yerleşik kısayollar sağlar. İşte birkaçı:

Yöntem	Tarif	Sonuçla örnek kullanım
$()	Belirli bir sorguyla eşleşen ilk öğeyi döndürür.	> $('img').src; < "https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/media/console-array-length.msft.png"
$$()	Düğüm dizisi döndürür.	> $$('*').filter(n => getComputedStyle(n).display.endsWith('flex')); // Get all flexbox containers on a page < (3) [div.header, div.content, div.footer]
$0	Öğeler panelinde seçili olan düğümü döndürür.	> $0.textContent < "The Console Utilities API contains a collection of convenience commands for performing common tasks: selecting and inspecting DOM elements, displaying data in readable format, stopping and starting the profiler, and monitoring DOM events."
$_	En son değerlendirilen ifadeyi döndürür.	> $_.length // Get length of previous textContent result < 239

İpucu #3: Canlı ifadelerle değerlerin değişimini izleyin

Canlı ifadeler, animasyonlar sırasında değişen CSS özellikleri gibi zaman içinde değişen ifadelerin sonucunu görüntülemenizi sağlar. Canlı ifadeler Konsolun en üstüne sabitlenir ve gerçek zamanlı olarak güncellenir.
DevTools Konsolu'na canlı bir ifade eklemek için göz simgesini (??) seçin ve izlemek istediğiniz ifadeyi
girin.

İpucu #4: Üst düzey ağ istekleri ve daha fazlası ile hızlı ağ isteklerinde bulunun await

DevTools Konsolu'nda üst düzey bekleme (diğer bir de bir de aynı hizalama işlevi) kullanılabilir. Bu, rasgele zaman uyumsuz Javascript çalıştırmak için ilginç kullanımlar açar. Patrick, blog yazısında fetch API ile kullanıldığında bundan yararlanmanın yararlı bir yolunu açıklar:await

Getirme API'si (temelde XMLHTTPRequest'tir, ancak kullanımı daha kolaydır), ağdan kaynak almayı gerçekten kolaylaştırır. Asıl güzel olan, konsolun (hem Firefox hem de Chromium tabanlı tarayıcılarda) artık üst düzey await ifadelerini desteklemesidir, bu da böyle bir şey yazabileceğiniz anlamına gelir:
await (await fetch('https://api.github.com/repos/microsoft/vscode/issues?state=all&per_page=100&page=1')).json();
Ve github API aramasından ayrıştırılmış JSON doğrudan konsolunuzda olacak!

Normalde, await deyimini zaman uyumsuz bir işleve sarmanız gerekir, ancak kolaylık sağlamak için konsolda yapmanıza gerek yok.

İpucu #5: Verileri kopyala() ile panoya depolayın

Önceki örnekte, her biri kendi özelliklerine sahip 100 nesneden oluşan JSON'u günlüğe kaydettik. Sonuçla çalışmak biraz zor.

> await (await fetch('https://api.github.com/repos/microsoft/vscode/issues?state=all&per_page=100&page=1')).json();
< (100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Daha sonra dizinin yanı sıra dizi içindeki her nesnenin el ile genişletilmesi gerekir.
Ancak, JSON kolayca ile panoya kopyalanabilir. Örneğin, yukarıdaki await komutunu çalıştırdıktan sonra, JSON yükünün tamamını panoya kopyalar.copy()copy($_)

İpucu #6: Verileri console.table()

Alternatif olarak, verileri doğrudan DevTools Konsolu'nda görüntülemek istiyorsak, bunu veya herhangi bir karmaşık dizi verisini .console.table()

JSON sonucunu önceki örnekten biçimlendirdiğimizde ne olacağını görelim.console.table()

Konsolda keşfedilecek çok daha fazla şey var, ancak umarım bu ipuçları devtools'ta daha üretken olmanın bazı yeni yollarını göstermiştir. Twitter'daki @EdgeDevTools takip ederek Microsoft Edge DevTools ekibinin en son gelişmelerden haberdar olabilirsiniz.
– Rachel Simone Weil, Program Yöneticisi, Microsoft Edge DevTools
 

28.10.2021