步骤：

  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. 剑指offer-重构二叉树-树-python

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...

  2. 行内元素（例如）设置float之后才能用width调整宽度

    因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西, 1. 块元素. 特性:有物理属性,width,height写值起作用,而且要占据一行.2. 内联元素. 特性:没有物理属性.但是ma ...

  3. ThinkPHP无法打开或点击不了Trace的问题

    首先先确认是否打开了Trace配置项,ThinkPHP3.*为'SHOW_PAGE_TRACE'=>true,ThinkPHP5.*为'app_trace'=>true. 如果已经确认开启 ...

  4. 33. Search in Rotated Sorted Array (JAVA)

    Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...

  5. 【学习】019 SpringBoot

    一.SpringBoot介绍 1.1.SpringBoot简介 在您第1次接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得一堆反复黏贴的配 ...

  6. jenkins上job误删除怎么恢复

    1.点击jobConfigHistory 2.点击Show deleted jobs only 3.找到被删除的 记录,点击Restore

  7. DDD领域驱动设计初探（五）：AutoMapper使用

    前言:前篇搭建了下WCF的代码,就提到了DTO的概念,对于为什么要有这么一个DTO的对象,上章可能对于这点不太详尽,在此不厌其烦再来提提它的作用: 从安全上面考虑,领域Model都带有领域业务,让Cl ...

  8. postman(二)：详解在Pre-request Script中如何执行请求

    一.这里以Pre-request Script标签来介绍 postman提供了postman提供了一个"Send a request"代码段,他是已经封装好的发送请求的方法 一个& ...

  9. springboot 集成p6spy

    pom.xml <dependency> <groupId>p6spy</groupId> <artifactId>p6spy</artifact ...

  10. ppt打不开，显示发现文件中的内容有问题。可尝试修复此演示文稿

    原因分析 主要是因为文件是网络下载的,office自动锁定了文件(默认不可编辑). 解决办法 在文件上右键-属性-解除锁定(最下面),就不会进行检查了,问题也就解决了. ppt文件---右键---属性 ...