Visual Studio Code’da Javascript Debug

Selamlar,

Bu makalede, gelen yoğun istek üzerine Visual Studio Code üzerinde bir AngularJS2 projesini nasıl Debug yapacağımızı hep beraber inceleyeceğiz. Tam açılımı ile Chrome üzerinde JavaScript Codelari debug edeceğiz.

extension

Bu makalede Visual Studio Code’da javascript debug amaçlı “Debugger For Chrome” extension’ı kullanılmıştır.

  1. VS Code’un altında, yandaki ikon extension2 tıklanarak extensions search alanı açılır ve “ext install Chrome” yazılarak ilgili paket indirilir. Bu işlem VS Code’un restart olmasını gerektirir.
  2. Daha sonra açık chrome uygulamaları kapatılıp, command prompta geçilir ve chrom debug mode da yandaki komut ile çalıştırılır. “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe –remote-debugging-port=9222
  3. Açılan browser penceresinde yandaki json dosyası test amaçlı çağrılır. “http://127.0.0.1:9222/json Not :Eğere ilgili sayfa gelmez ise Task manager’dan açık tüm chrome processleri kapatılıp tekrardan denenmelidir. İlgili sayfa gelmesi durumunda herşey yolunda demektir. Bende gelen örnek json sayfa aşağıdaki gibidir.127001
  4. Aşağıda görüldüğü gibi VS Code’da 1 nolu böcek resmine tıklanarak Debug ekranı açılır. 2 nolu ayara basılarak “launch.json” açılır. 3 nolu alandan “Chrome” seçilir.

debug2

5. Açılan launch.json aşağıdaki gibidir.

6. Ben altta görülen 2. ayarı (Launch localhost with sourcemaps) olarak değiştirdim: “url” kısmı, örnekte lite-server kullanıldığı için ve “:3000” portundan yayın yapıldığı için, “http://localhost:3000” şekilinde değiştirilmiştir. Ayrıca “webRoot”: olarak “app” klasörünün altında çalışıldığı için “${workspaceRoot}/app” şeklinde tanımlanmıştır. Yani tüm .ts ve .js uzantılı dosyalar bu (app) folder altında çalışmaktadır.

breakpoint

7. Chrome pencereleri tamamen kapatılır. Ve VS Code tarafında debug işlemi başlatılarak chrome browserda uygulamanın açılması sağlanır. Yukarıda görüldüğü gibi break point konan satırlar sol alanda “BreakPoint” sekmesinde satır numarasına kadar görülmektedir. Uyguma çalıştırıldığında , konan break pointlerde uygulama durur ve ilgili değişkenler aşağıda görüldüğü gibi “Variables” sekmesinden monitor edilebilir. Ayrıca sağ tıklanıp, örneğin aşağıda “this.toDos[]” dizisi “Add to Watch“‘a tıklanıp “Watch” sekmesinde izlenmesi sağlanabilir.

DebugScreen

8. Debug Modu aşağıda görüldüğü gibi ilgili buttonlar yönetilir. Sıra ile:

  • “Continue (F5)” ile devam edilir.
  • “Step Over (F10)” ile üstünden atlanır.
  • “Step Into (F11)” ile üstünde bulunan nesnenin içine yani detayına girilir.
  • “Step Out (Shift + F11)” ile üstünde bulunan nesnenin içinden çıkılır.
  • “Restart”
  • “Stop”

DebugScreenTool

9.Son olarak istenir ise ilgili satır başına “Add Conditional Breakpoint” konarak belli bir koşul sağlandığında, ilgili satırda durması sağlanabilir. Örneğin sadece “doText==”Code Yazmak”” koşulu yazılarak yapılan işin “Code Yazmak” olması durumunda ilgili satırda durması sağlanır.

Böylece Javascriptler yani “js” dosyalar veya AngularJS2 yani “ts” filelar gibi script yapılarda, aynı server side tarafında olduğu gibi, nasıl debug edilebileceğini hep beraber gördük. Bu da AngularJS2 gibi büyük ve dağıtık bir yapıda tam bir can simididir.

Geldik bir makalenin dah sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir