首先安装扩展调试插件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. Percona 工具包 pt-online-schema-change 简介

    mysql的在线表结构修改,因为低效和阻塞读写.一直被诟病.至于ALTER TABLE 的原理,参看我上一篇文章.MySQL在线修改大表结构.看完后,发现的问题是还是会锁的,且对于在线更新的这块也是不 ...

  2. UVA 725 UVA 10976 简单枚举

    UVA 725 题意:0~9十个数组成两个5位数(或0开头的四位数),要求两数之商等于输入的数据n.abcde/fghij=n. 思路:暴力枚举,枚举fghij的情况算出abcde判断是否符合题目条件 ...

  3. WebUploader 解决文件多次上传和删除上传文件的问题

    文件多次上传有两种情况: 1. 上传前的多次选择 2. 上传成功后,再次选择 其实API上,已经有了介绍了,不知道为什么有同学还是不知道如何做,我来抛砖引玉吧. 配置项: duplicate {Boo ...

  4. excel 拖拽计算时,固定一个数

    $ 表示静态引用(也叫绝对引用)的意思.即固定引用的单元格的行或列. $A1即固定列为A,$A$2即固定引用为A列2行的单元格. A$3则只固定引用为第三行. 我们在使用excel拖拽计算时,常遇到这 ...

  5. JSON01_资料

    1. 资料网址: http://blog.csdn.net/vincent_czz/article/details/7333977 http://blog.csdn.net/huangwuyi/art ...

  6. spring3: AOP 之代理机制

    Spring AOP通过代理模式实现,目前支持两种代理:JDK动态代理.CGLIB代理来创建AOP代理,Spring建议优先使用JDK动态代理. JDK动态代理:使用java.lang.reflect ...

  7. 一个较好的style与ControlTemplate结合的示例(以Button为例)

    <!--按钮背景画刷-->    <LinearGradientBrush x:Key="buttonBackgroundBrush">        &l ...

  8. JSP静态包含和动态包含的区别和联系

    JSP页面的静态包含和动态包含 JSP中有两种包含:静态包含:<%@include file="被包含页面"%>和动态包含: <jsp:include page= ...

  9. hdu 5981 Guess the number

    Guess the number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 160000/160000 K (Java/Other ...

  10. IOS-环信

    一.即时通讯 即时通讯,又称实时通讯 即时通信(Instant Messaging,简称IM)是一个实时通信系统,允许两人或多人使用网络实时的传递文字消息.文件.语音与视频交流 即时通讯在开发中使用的 ...