首先安装扩展调试插件debugger for chrome

点击瓢虫按钮，进行调试项目的配置，点击配置按钮

选择Chrome环境，

会弹出Chrome调试配置文件launch.json，修改下端口即可。

若是没有lauch.json配置文件产生，也可以通过以下方式进行配置文件的打开。选择添加配置

再选择Chrome：Launch，修改下端口即可

打开项目，通过ctrl+`【注意该`为Tab键上的`】输入ng serve启动项目。

切换到瓢虫界面，比如我们在app.component.ts里头设置了一个断点，

启动调试按钮，会自动弹出浏览器页面

刷新页面之后，会发现，程序运行到，断点位置。

我们可以进行变量的查看，异常捕获，调用堆栈等调试。

Visual Studio Code如何调试代码的更多相关文章

  1. Mac上使用Visual Studio Code开发/调试.NET Core代码

    Mac上使用Visual Studio Code开发/调试.NET Core代码 .Net Core 1.0终于发布了,Core的一大卖点就是跨平台.这个跨平台不只是跨平台运行,而且可以跨平台开发.今 ...

  2. SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

    博客地址:http://blog.csdn.net/FoxDave Visual Studio Code不知道大家都有没有,界面清爽,编辑快速,是一个非常好的前端开发工具.本文介绍如何使用Goog ...

  3. 如何用Visual Studio Code远程调试运行在服务器上的nodejs应用

    假设我有一个nodejs应用,运行在AWS - 亚马逊云平台上(Amazone Web Service).我想用本地的Visual Studio Code来远程调试服务器端的nodejs应用. Vis ...

  4. 在Mac上使用Visual Studio Code开发/调试.NET Core代码

    .Net Core 1.0终于发布了,Core的一大卖点就是跨平台.这个跨平台不只是跨平台运行,而且可以跨平台开发.今天抽空研究了下在Mac下如何使用VS Code来开发.NET Core程序,并且调 ...

  5. visual studio code 里调试运行 Python代码

    最近对微软的visual studio code 挺感兴趣的,微软的跨平台开发工具.轻量简洁. 版本迭代的也挺快的,截止16年8月2日已经1.3.1版本了,功能也愈加完善.(16年12月18日 已经, ...

  6. SharePoint Framework 在Visual Studio Code中调试你的托管解决方案

    博客地址:http://blog.csdn.net/FoxDave 上一篇介绍了如何在本地调试你的SharePoint Framework解决方案,本篇介绍如何调试你的SharePoint Onl ...

  7. [翻译]使用Visual Studio Code怎样调试Rust

    我将 Visual Studio Code 作为Rust首选编辑器.遗憾的是 VS Code 不能非常好地完成 Rust 的调试. 配置调试器不难,但仍然需要几个步骤.我已经完整配置了好几次.我正在写 ...

  8. Visual Studio Code 添加设置代码段(snippet)

    从VSCode发布以来就在关注,最近已经更新到版本0.10.8,已经支持了插件功能.日常使用编辑器已经由Sublime Text迁移到了VSCode.使用中遇到了这个问题,在网上也没搜到解决方案.记录 ...

  9. Visual Studio Code 写Python 代码

    最近在博客园新闻里面看到微软发布的Visual Studio Code 挺好用的,现在在学习Python,查看官网发布的VSCode 是支持Python代码,自己试着安装用一下,下面是我的安装以及配置 ...

随机推荐

  1. Bellman-Ford算法 - 有向图单源最短路径

    2017-07-27  08:58:08 writer:pprp 参考书目:张新华的<算法竞赛宝典> Bellman-Ford算法是求有向图单源最短路径的,dijkstra算法的条件是图中 ...

  2. Kruskal算法-最小生成树

    2017-07-26  10:32:07 writer:pprp Kruskal算法是根据边的加权值以递增的方式,一次找出加权值最低的边来建最小生成树:并且每次添加的边不能造成生成树有回路,直到找到N ...

  3. PAT1063. Set Similarity (25)

    来自http://blog.csdn.net/tiantangrenjian/article/details/16868399 set_intersection 交集  set_union 并集  s ...

  4. The 2014 ACM-ICPC Asia Mudanjiang Regional Contest

    The 2014 ACM-ICPC Asia Mudanjiang Regional Contest A.Average Score B.Building Fire Stations C.Card G ...

  5. 利用JS获取地址栏的中文参数

    地址栏中为:localhost:22865/ZYHSYY.aspx?BQH=305&DoctorName=张三&DoctorId=100我想利用JS获取到“张三”,请问该如何写js?目 ...

  6. WPF 自定义依赖属性

      原博客地址:http://www.cnblogs.com/DebugLZQ/archive/2012/11/30/2796021.html    DependencyObject和Dependen ...

  7. iRed邮箱使用情况

    iRedAdmin-Pro 在域名的用户列表里直接显示了邮箱使用情况的百分比,并有一个细小的进度条以不同颜色标示百分比情况.用户的邮箱限额定义在 mailbox.quota,当前使用情况定义在 use ...

  8. HTTP请求常用状态码

    常见的http请求响应的状态码 一些常见的状态码为: 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状 ...

  9. 【git】项目更新方法

    [放弃修改] 工作区 -- 暂存区 -- 本地仓库 -- 远程仓库 工作区 -- 暂存区: git diff git checkout .  /  git reset --hard 暂存区 -- 本地 ...

  10. Flask的简单认识

    Flask的简单认识 Flask是轻量级的框架,适用于简单的程序 与Django的比较: Django: 无socket,中间件,路由,视图(CBV,FBV),模板,ORM, cookie,sessi ...