DevTools Konsolunu kullanmak için zaman kazandıran altı ipucu

  • History |
  • |
  • 0 Yorum

Microsoft Edge DevTools mühendisi Patrick Brosset kısa süre önce, tarayıcı DevTools'un en popüler özelliklerinden biri olan mütevazı Konsol'dan en iyi şekilde yararlanmak için web geliştirme topluluğunun favori ipuçlarını topladı. DevTools'da daha üretken olmanıza yardımcı olabilecek Patrick'in blog gönderisinden birkaç önemli nokta ve kendimize ait birkaç ipucu topladık.

Ama önce: Konsol Nedir?

Microsoft Edge DevTools'da Konsol aracının iki ana işlevi vardır. Birincisi, bir web sitesinin Javascript'inden günlüğe kaydedilen mesajların ve hataların çıktısını almaktır. Örneğin, web sitenizin kodunun üzerinde yazan bir Javascript satırı console.log(`My code is running!`);varsa, DevTools'un Konsol sekmesinde aşağıdaki çıktıyı almayı beklersiniz.
Konsol çıktısı: "Kodum çalışıyor!"
Konsolun ikinci işlevi bir Javascript REPL işlevi görür, yani Javascript satırlarını doğrudan sekmede yazabilir ve çalıştırabilirsiniz.
Konsolda 2+2 4 olarak değerlendiriliyor
Konsolun temelleri hakkında daha fazla bilgiyi Microsoft Edge DevTools Konsolu belgelerinde bulabilirsiniz .

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

Bazen Konsolda birkaç satır kod çalıştırmak faydalı olabilir. Bunu her satırdan sonra Shift + Enter tuşlarına basarak yapabileceğinizi biliyor muydunuz? Konsolda çok satırlı kod yürütüldüğünde , bu örnekte gösterildiği gibi bir sonuç görüntülenmeden önce tüm satırlar çalıştırılacaktır .
Konsolda yürütülen çok satırlı kod
Konsolda komutları yeniden kullanmanın birkaç yolu vardır; bu, özellikle karmaşık veya çok satırlı kodu tekrar tekrar yürütürken yardımcı olur. Diğer birçok REPL'de olduğu gibi, önceden girilen kodda geri dönmek için DevTools Konsolundaki yukarı oka basabilirsiniz. Ek olarak, Konsolun otomatik tamamlama özelliği, geçmişte girdiğiniz komutların geçmişini içerir. Sadece satırın bir kısmını yazmaya başlayın, öneriler içeren bir otomatik tamamlama kutusu görünecektir.

Daha da uzun veya daha karmaşık kodlar için DevTools'daki Snippets aracını da kullanabileceğinizi belirtmekte fayda var. Parçacıkları açmak için Kaynaklar sekmesini seçin. Ardından, Snippet'leri ortaya çıkarmak için sol bölmede >> simgesini tıklayın. Bu bölmeden, istediğiniz zaman çalıştırmak için kod parçacıkları oluşturabilir, kaydedebilir ve yeniden yükleyebilirsiniz. Snippet'ler, REPL aracılığıyla etkileşimli olarak değil komut dosyaları olarak çalıştığından, bir snippet çalıştırılırken burada yalnızca Konsol'a açıkça günlüğe kaydedilen içerik görünür.

2. İpucu: $ komutlarını kullanın

Konsol programları API DevTools'un bazı yerleşik kısayolları Konsolu sık kullanılan komutları girerek sağlamaktadır. Burda biraz var: