Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debug & Run Angular2 Typescript with Visual Studio Code?

Debug & Run Angular2 Typescript with Visual Studio Code?

I am trying to debug Angular2 typescript application with VS code https://angular.io/guide/quickstart

Can anyone please share steps to debug & run from VS code?

like image 226
Sanket Avatar asked Apr 08 '16 08:04

Sanket


People also ask

Apa yang dimaksud dengan debug?

Debugging adalah proses untuk mencari dan menghapus suatu bug dalam sebuah program atau sistem. Yang dimaksud bug adalah suatu eror atau cacat yang dapat menyebabkan program atau sistem tidak berjalan dengan sempurna.

Apa itu Debug dan fungsinya?

Pada dasarnya, debugging adalah proses menguji untuk mencari eror atau galat pada suatu program pada komputer maupun perangkat lainnya yang menggunakan pemrograman. Proses ini merupakan salah satu tahap yang sangat penting dalam pemrograman.

Apa fungsi dari debugging?

Debugging adalah proses mengidentifikasi dan menghapus bug atau error di dalam kode. Bug inilah menyebabkan sebuah aplikasi atau software tidak berjalan dengan semestinya. Misalnya, gagal login, error saat input data, disfungsi fitur, blue screen, dll.

Bagaimanakah cara kerja debugging?

Pertama, cara kerja debug adalah dengan mereproduksi bug lewat pendokumentasian semua isu yang ada secara benar. Hal ini bertujuan untuk menentukan skala prioritas, menyelesaikannya dengan tepat, memetakan bug, dan menguji coba di berbagai perangkat dan browser.


2 Answers

After lot of research, I found these steps-

Before you begin, make sure you have latest version of VS code. You can verify latest version – Help > Check For Updates or About.

  1. Install extension called 'Debugger for Chrome'. Once install complete, restart VS code.

  2. Go to Debug window, open launch.json using Chrome.

  3. In Launch.json configuration section, use below config

    {     "name": "Launch localhost with sourcemaps",     "type": "chrome",     "request": "launch",     "url": "http://localhost:3000/Welcome",     "sourceMaps": true,     "webRoot": "${workspaceRoot}" } 
  4. In tsconfig.json, make sure you have "sourceMap": true

This completes your debug environment settings. Now, before you start debugging, make sure all your existing Chrome.exe instances are closed. Verify from Task Manager OR Use DOS command ‘killall chrome’

  1. Run your project, using npm start command and Chrome as default browser.

  2. Once application is run successfully, you will receive port number. Copy URL from chrome browser and paste into url section above. (NOTE: If you are using routing in your application then url would like above otherwise it will be ending index.html etc)

  3. Now, place breakpoints wherever you want in your typescript files.

  4. Again, go to debug window in VS code, and hit Run. Your tab/instance connected to debugger will looks like below.

Chrome Debugging

like image 193
Sanket Avatar answered Oct 13 '22 04:10

Sanket


Specify a userDataDir - this will avoid collisions with other Chrome instances you may already have running. I've noticed because of this, Chrome just stops listening on any port you specify. Below is what I use and it is great!

{     "name": "Launch",     "type": "chrome",     "request": "launch",     "url": "http://localhost:3000/#/about",     "port": 9223,     "sourceMaps": true,     "diagnosticLogging": true,     "webRoot": "${workspaceRoot}",     "userDataDir": "${workspaceRoot}/out/chrome" } 

Thanks to @reecebradley - GitHub: Cannot connect to the target: connect ECONNREFUSED

like image 37
HydTechie Avatar answered Oct 13 '22 06:10

HydTechie