步骤：

  1. 在构建工具（webpack、gulp 等）的配置中开启生成 source map
  2. 将 VSCode 配置中的debug.allowBreakpointsEverywhere设置为true（重要！这个选项默认是false）

现在就可以愉快得在源码上下断点了。

参见：Can set break points in the Visual Studio Code debugger for Typescript, but not for other languages that compile to JavaScript · Issue #41937 · Microsoft/vscode

Visual Studio Code - 在 JS 源码（TS、压缩前代码）上使用断点的更多相关文章

  1. MySql轻松入门系列——第二站 使用visual studio 对mysql进行源码级调试

    一:背景 1. 讲故事 上一篇说了mysql的架构图,很多同学反馈说不过瘾,毕竟还是听我讲故事,那这篇就来说一说怎么利用visual studio 对 mysql进行源码级调试,毕竟源码面前,不谈隐私 ...

  2. 【Visual Studio Code 】使用Visual Studio Code + Node.js搭建TypeScript开发环境

    1.准备工作 Node.js Node.js - Official Site Visual Studio Code Visual Studio Code - Official Site 安装Node. ...

  3. 使用Visual Studio Code + Node.js搭建TypeScript开发环境

    Visual Studio Code搭建Typescript开发环境 —— 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...

  4. Visual Studio调试到OpenCV源码中

    TL;DR VS2015下,build-farm/vs2015-x64/bin/Debug/目录,*.pdb文件,都拷贝到install/x64/vc14/bin目录,就可以调试进去opencv源码了 ...

  5. [转]Node.js tutorial in Visual Studio Code

    本文转自:https://code.visualstudio.com/docs/nodejs/nodejs-tutorial Node.js tutorial in Visual Studio Cod ...

  6. 用 Visual Studio Code 调试 Node.js

    环境: Visual Studio Code  Node.js 1. 关闭运行中的程序 2.打开入口文件,我这里的入口文件为 app.js 3.点击左侧菜单栏的 debug 按钮 4.点击运行按钮 5 ...

  7. 使用Visual Studio Code搭建TypeScript开发环境

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  8. 在Visual Studio Code中开发Office Add-in

    作者:陈希章 发表于 2017年7月13日 上一篇 我介绍了如何在Visual Studio中开发Office Add-in,因为有标准的项目模板,一系列配套的工具,尤其是自带的一键调试功能,可以让开 ...

  9. Visual Studio Code + live-server编辑和浏览HTML网页

    第一步: 安装Visual Studio Code + Node.JS 第二步:通过如下命令行安装live-server npm install -g live-server 第三步:打开Visual ...

随机推荐

  1. linux：shell脚本格式

    shell脚本格式:     #!/bin/bash //第一行指定bash     命令群.....          例子:     #!/bin/bash     DESCDIR='/tmp/t ...

  2. goaccess实现nginx实现日志可视化

    一:goaccess模块 goaccess模块是将nginx的日志定向到goaccess模块里实现,原理很简单,只要将文件定向到那里就可以,goaccess是已经集成好显示数据的一个页面,非常的美观和 ...

  3. GUI学习之十九——QFontComboBox学习总结

    我们上一章学习了QComboBox的用法,这一章我们来看一下它的一个比较常用的子类:QFontComboBox(). 一.描述: QFontComboBox()是QComboBox()的一个子类,但是 ...

  4. python3-获取对象信息

    当我们拿到一个对象的引用时,如何知道这个对象是什么类型.有哪些方法呢? 使用type() 首先,我们来判断对象类型,使用type()函数: 基本类型都可以用type()判断: >>> ...

  5. 值栈ValueStack的原理与生命周期

    1.ValueStack贯穿整个 Action 的生命周期,保存在request域中,所以ValueStack和request的生命周期一样.当Struts2接受一个请求时,会迅速创建ActionCo ...

  6. Springboot读取properties配置文件数据

    一.使用@ConfigurationProperties来读取 1.Coffer entity @Configuration @ConfigurationProperties(prefix = &qu ...

  7. pycharm不支持svn，是需要svn命令行工具没有安装(for windows)

    1. 安装svn命令行工具 Subversion for Windows下载https://sourceforge.net/projects/win32svn/?source=typ_redirect ...

  8. DevExpress v18.2版本亮点——Analytics Dashboard篇（二）

    行业领先的.NET界面控件——DevExpress v18.2版本亮点详解,本文将介绍了DevExpress Analytics Dashboard v18.2 的版本亮点,新版30天免费试用!点击下 ...

  9. Django【第6篇】：Django之ORM单表操作（增删改查）

    django之数据库表的单表查询 一.添加表记录 对于单表有两种方式 # 添加数据的两种方式 # 方式一:实例化对象就是一条表记录 Frank_obj = models.Student(name =& ...

  10. vuex使用方法

    vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.比如:我们有几个页面 ...