在VS CODE中调试Angular代码
Chrome Dev Tools 可以调试js程序,但是可能需要和源码之间来回切换。
如果是使用VS CODE来开发Angular,可以直接在VS CODE中调试。
按照如下的步骤即可:
第一步, 安装Debugger for Chrome。 同时可以选择安装中文插件,可以将IDE的菜单汉化
第二步, 项目根目录下如果没有自动创建.vscode/launch.json,可以在项目根目录下手动创建 .vscode/launch.json,内容如下:
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome with ng serve",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
}
]
}
${workspaceRoot}可以写成项目的根目录。例如D:\temp\angluartest。 VS CODE同时引入多个工程的代码时,${workspaceRoot}要写成对应工程的根目录。
第三步,启动工程,npm start。 在VS CODE按F5进入调试状态,最后打开 Chrome 输入调试工程对应的url,会直接在 VS CODE 中进入断点。
还有一点需要注意的是,不要在F5打开的chrome中再设置断点用F12调试,否则调试时VS CODE和chrome都会进入,调试不方便。
vscode中加入了多个前端工程时,除了需要配置每个工程的launch.json。还需要选择对应的工程后,再按下F5进行调试。
在VS CODE中调试Angular代码的更多相关文章
- VS Code直接调试Angular代码
安装VS Code扩展 安装Debugger for Chrome 安装Debugger for Firefox 配置Launch.json文件 Launch.json文件的创建和生成我们可以利用VS ...
- SharePoint Framework 在Visual Studio Code中调试你的本地解决方案
博客地址:http://blog.csdn.net/FoxDave Visual Studio Code不知道大家都有没有,界面清爽,编辑快速,是一个非常好的前端开发工具.本文介绍如何使用Goog ...
- 【vue】在VS Code中调试Jest单元测试
在VS Code中调试Jest单元测试 添加调试任务 打开 vscode launch.json 文件,在 configurations 内加入下面代码 "configurations&qu ...
- [置顶] 如何在Python IDLE中调试Python代码?
好久没有用Python了,居然忘记了怎么在Python IDLE中调试Python代码.百度了一下,然后还是写下来吧,以免以后又忘记了. 1. Set break point in the sourc ...
- linux系统下如何在vscode中调试C++代码
本篇博客以一个简单的hello world程序,介绍在vscode中调试C++代码的配置过程. 1. 安装编译器 vscode是一个轻量的代码编辑器,并不具备代码编译功能,代码编译需要交给编译器完成. ...
- Windows平台下使用vs code来调试python代码(2)
背景:上篇文章我们介绍了怎么搭建相关的环境,文章链接:https://www.cnblogs.com/yahuian/p/10507467.html,这篇文章来介绍怎么调试我们的程序. 1.Debug ...
- VS2013中实现angular代码智能提示
第一步:在项目同添加angular js文件的引用: 这里使用NuGet包管理器来给项目添加angular js install-package angularjs 第二步:添加智能提示js文件 我们 ...
- ubuntu下VS code如何调试C++代码
最近开始使用Vs codel,真的方便,可以和git结合.下面总结一下如何调试程序, 我写了一个实例程序(不重要) #include <iostream> #include <fst ...
- SharePoint Framework 在Visual Studio Code中调试你的托管解决方案
博客地址:http://blog.csdn.net/FoxDave 上一篇介绍了如何在本地调试你的SharePoint Framework解决方案,本篇介绍如何调试你的SharePoint Onl ...
随机推荐
- PAT Basic 1023 组个最小数 (20 分)
给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的最小的数就 ...
- 网卡绑定(bonding)
就是将多块网卡绑定同一IP地址对外提供服务,可以实现高 可用或者负载均衡.当然,直接给两块网卡设置同一IP地址 是不可能的.通过bonding,虚拟一块网卡对外提供连接, 物理网卡的被修改为相同的MA ...
- loj2613 「NOIP2013」华容道[最短路]
感觉和以前做过的一个推箱子很像,都是可以用bfs解决的,而且都是手玩出结论. 因为起始棋子肯定是要和空格交换的,所以第一件事是先把空格移到棋子旁边.然后讨论怎么设计搜索状态.由于和推箱子实在太像了,所 ...
- 1+X证书试题
2019年下半年Web前端开发中级理论考试 (考试时间9:00-11:30 共150分钟) 1. 本试卷共3道大题,满分100分. 一.单选题(每小题2分,共30小题,共60分) 1.在Bootstr ...
- CSS引入外部字体方法,附可用demo
有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然 ...
- Nuxt 服务端渲染
前言 Nuxt.js 是一个基于 Vue.js 的通用应用框架. ssr 渲染服务端 可以看官方文档 https://zh.nuxtjs.org/guide/ nuxt 与平常 jsonp 不一样 , ...
- HDU-1358-Period(KMP, 循环节)
链接: https://vjudge.net/problem/HDU-1358#author=0 题意: For each prefix of a given string S with N char ...
- centos6实现基于google authenticator 的ssh登录二次验证
1.手机安装google身份验证器,在浏览器搜索身份验证器安装即可. centos6安装所需要的软件--- google-authenticator 2.查看这个包生成的所有文件和命令 3.输入goo ...
- 题解 矩阵 matrix
矩阵 matrix Description 给出一个 n × m 的矩阵.请在其中选择至多 3 个互不相交的,大小恰为 k × k 的子矩阵,使得子矩阵的 权值和最大. Input 第一行三个整数 n ...
- perl 数组变量(Array) 转载
Perl 变量(2)--数组 原文地址:Perl 变量(2)--数组 作者:飞鸿无痕 二.数组 数组是标量数据的有序列表. 数组可以含任意多个元素.最小的数组可以不含元素,而最大的数组可以占满全部可用 ...