未加星标

Debugging Angular CLI Applications in Visual Studio Code

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
Debugging Angular CLI Applications in Visual Studio Code

In this post, we are going to create an Angular CLI application, then add configuration to debug it in Visual Studio Code.

Watch on YouTube

TLDR - For an Angular CLI application, create a debug configuration in VS Code, install the Debugger for Chrome extension, then run in debug mode.

Debugging Angular CLI Applications in Visual Studio Code

Table of Contents

Creating a Starter Project

Creating Debug Configuration

Learn VS Code
Debugging Angular CLI Applications in Visual Studio Code

If you're interested in learning more about VS Code, you definitely want to check out the upcoming Learn VS Code course.

Creating a Starter Project

To be able to test an Angular CLI application, you need an Angular CLI application :) I'll provide the basic steps, but for more reference on how to get started look at the Angular CLI page .


Debugging Angular CLI Applications in Visual Studio Code

First, you'll need to install the Angular CLI.

npm install -g @angular/cli

Related Course: Getting Started with javascript for Web Development

After that finishes, you'll need to actually generate your new application. This will take a bit as it needs to install LOTS of NPM packages.

ng new my-app

Open the project in VS Code and you should see the following.


Debugging Angular CLI Applications in Visual Studio Code

Now, that you've got your new fancy Angular app, go ahead and run it to make sure everything looks right.

ng serve

Should look like this.


Debugging Angular CLI Applications in Visual Studio Code
Creating Debug Configuration

Assuming you've made it this far, we are ready to start debugging! Before we do, however, it's worth understanding how configuring debugging in VS Code works. Basically debug configurations are saved in a launch.json file which is stored inside of a .vscode folder. This .vscode folder is used to store different configurations for Code including our required debugging stuff.

Before you create your debug configuration, you need to install the Debugger for Chrome extension. Find and install this extension from the extension tab in VS Code. After installing, reload VS Code.


Debugging Angular CLI Applications in Visual Studio Code

Now, to create a debug configuration, you can open the debug panel (the bug looking button on the left panel). At the top of the debug panel, you should see a dropdown that says "No Configurations".


Debugging Angular CLI Applications in Visual Studio Code

To the right of that dropdown, there is a gear icon. Click this button to have VS Code automatically generate that .vscode folder and launch.json file mentioned above.

Then choose Chrome.

You should get the following configuration created for you.


Debugging Angular CLI Applications in Visual Studio Code

The only thing we need to do is update the port from 8080 to 4200.


Debugging Angular CLI Applications in Visual Studio Code
Let's Debug

Now we're ready! Go ahead and click the play button at the top of the Debug panel which will launch an instance of Chrome in debug mode. Keep in mind your app should already be running from using ng serve earlier. In VS Code, you should see the Debug toolbar pop up.


Debugging Angular CLI Applications in Visual Studio Code

With this up and running, you can set a breakpoint in your App.component.ts. Open up your App.component.ts and add a breakpoint inside of the component by clicking in the gutter (to the left of the line numbers). Should look like this.


Debugging Angular CLI Applications in Visual Studio Code

Now, refresh debugging by clicking the refresh button on the debugging toolbar. This should open your application again and trigger this breakpoin. You should be directed back to VS Code directly to the place where you set your breakpoint.


Debugging Angular CLI Applications in Visual Studio Code

From here, you can set more breakpoints, inspect variables, etc. If you are interested in learning more about debugging JavaScript in general in either Chrome or VS Code you can check out Debugging JavaScript in Chrome and Visual Studio Code .

Again, if you're interested in learning more about VS Code, you'll definitely want to check out the upcoming Learn VS Code course.

If you have any follow up questions or comments, leave one below of find me on twitter @jamesqquick .

For video content, check out my YouTube Channel

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: Code,VS,Angular,debug,CLI,your,should
分页:12
转载请注明
本文标题:Debugging Angular CLI Applications in Visual Studio Code
本站链接:https://www.codesec.net/view/588507.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(54)