Tiven Wang
Wang Tiven March 22, 2018
425 favorite favorites
bookmark bookmark
share share

Debugging TypeScript Language in Visual Studio Code

Visual Sudio Code debugging: https://code.visualstudio.com/docs/editor/debugging

TypeScript Language debugging: https://code.visualstudio.com/docs/languages/typescript

注意设置: "outFiles": ["${workspaceRoot}/lib/**/*.js"] https://stackoverflow.com/questions/31169259/how-to-debug-typescript-files-in-visual-studio-code

Debugging TypeScript Angular application

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:4200/",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}"
}
  1. 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. [2.]

https://scotch.io/tutorials/debugging-angular-cli-applications-in-visual-studio-code

https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

https://medium.com/front-end-weekly/a-guide-to-debugging-angular-applications-5a36bd88b4cf

References

Similar Posts

  • Angular - Syncfusion Components How to use Syncfusion Components to create dashboard page in Angular Application?
  • Angular - Consume OData Services How to consume odata service in Angular Application?
  • TypeScript TypeScript Series: Language Handbook
  • TypeScript - Decorators Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.
  • Angular - UI5 Web Components The UI5 Web Components share fundamental UI5 qualities with others to provide enterprise-grade features, Fiori UX and themeability. The goal is to achieve an easy consumption of UI5 controls to lower the entry barrier to use UI5 controls for own applications and to avoid complexity of UI5 rendering-stack by making the consumption of the full-stack UI5 optional. In general, the UI5 Web Components are targeting for Web Developers who want to have more flexibility to use just HTML tags or arbitrary JS frameworks.
  • What's Functional Programming 什么是函数式编程 (Functional Programming)

Comments

Back to Top