Visual Studio Code'da Geliştirici Araçları entegrasyonu ile daha kolay tarayıcı hata ayıklaması

JavaScript'te Visual Studio Code'da hata ayıklıyorsanız, muhtemelen Chrome Hata Ayıklayıcı'yı veya Microsoft Edge Hata Ayıklayıcı uzantısını kullanmışsınızdır JavaScript hata ayıklaması artık Visual Studio Code'da yerleşik olduğundan, hata ayıklamak için de artık gerekli değildir. Bu, yalnızca bu uzantıları kaldırabileceğiniz anlamına gelmez, aynı zamanda hata ayıklamayı daha kolay hale getirdik.
Herhangi bir projede Chrome veya Microsoft Edge'de hata ayıklamak için tek yapmanız gereken F5'e basarak veya menü çubuğundaki hata ayıklama simgesini etkinleştirerek ve "Çalıştır ve hata ayıkla"yı seçerek bir oturum başlatmaktır. Alternatif olarak, Visual Studio Code komut paletini de kullanabilir ve “Debug: Open Link” komutunu çalıştırabilirsiniz. Buradan, herhangi bir uzantı yüklemek zorunda kalmadan Chrome, Edge veya Node.js'de hata ayıklamayı seçebilirsiniz.
Edge'i seçerseniz, hata ayıklama araç çubuğunda ekstra bir özellik fark edeceksiniz: bir inceleme düğmesi.
Hata ayıklama araç çubuğundaki denetle düğmesinin ekran görüntüsü
Bu düğme, Edge Developer Tools'u Visual Studio Code örneğinizin içinde başlatır. Bu düğmeyi ilk etkinleştirdiğinizde, düzenleyici sizden Visual Studio Code uzantısı için Microsoft Edge DevTools'u yüklemenizi isteyecektir Bunu yükledikten sonra bir daha sorulmayacaktır.
Microsoft Edge DevTools uzantısını yükleme istemi
Ardından DOM'yi inceleyebilir, CSS'yi değiştirebilir ve Visual Studio Code'dan çıkmadan tarayıcıda çalışan projenizin ağ isteklerini görebilirsiniz.
VS Code'daki Elements denetçisinin ekran görüntüsü
Bonus olarak, tarayıcıdaki belgeyle etkileşim kurmak için düzenleyicideki Hata Ayıklama Konsolunu da kullanabilirsiniz, tıpkı tarayıcı geliştirici araçlarındaki Konsol ile yaptığınız gibi Pencere nesnesine tam erişiminiz var ve Konsol Yardımcı Programları API'sini kullanabilirsiniz .
Hata ayıklama konsolunun ekran görüntüsü
Microsoft Edge'e otomatik olarak eklemek ve düzenleyicide Geliştirici Araçlarını başlatmak istiyorsanız, bir launch.json dosyası oluşturabilirsiniz Projeniz için `https://localhost:8080` muhtemelen değiştirilmesi gerektiğine dikkat edin.
{
"sürüm": "0.2.0" ,
"yapılandırmalar": [
{
"type": "pwa-msedge" ,
"request": "lansman" ,
"name": "Microsoft Edge'i başlatın ve Edge DevTools'u açın" ,
"url": "http://localhost:8080" ,
"webRoot": "${workspaceFolder}"

Diğer Haberler

PlatinMarket® E-Ticaret Sistemi İle Hazırlanmıştır.