步骤：

  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. HNUSTOJ-1257 You are my brother

    1257: You are my brother 时间限制: 1 Sec  内存限制: 128 MB提交: 39  解决: 15[提交][状态][讨论版] 题目描述 Little A gets to ...

  2. http请求响应丢包问题

    在与合作方联调某个明细数据接口的时候发现 1.当请求条数为4,content-length<1500时,数据可以正确返回. 2.当请求条数为5,content-length>1500时,无 ...

  3. media查询（来源于bootstrap）

    /* 大屏幕 */@media (min-width: 1200px) { ... } /* 平板电脑和小屏电脑之间的分辨率 */@media (min-width: 768px) and (max- ...

  4. 00.AutoMapper 之入门指南(Getting Started Guide)

    转载(https://www.jianshu.com/p/29ee5a94c1d9) 入门指南(Getting Started Guide) AutoMapper 是什么? AutoMapper 是一 ...

  5. WordPress用户的权限类

    WordPress的权限类这是管理 WordPress 用户权限最常用的函数.WordPress 用于角色和权限幕后工作的三个类,以及这些类提供的接口,我们可以在插件中进行高级权限管理.这三个类是: ...

  6. 记录一次TabBar使用本地图片

    方法一: 第一步:import  addpng  from '../../assets/img/add.png' 第二步: { title: '找折扣', image: addpng}, 即可. 方法 ...

  7. $strobe$monitor$display

      $strobe:当该时刻的所有事件处理完后,在这个时间步的结尾打印一行格式化的文本,语法$strobe( Argument,...);$fstrobe( Mcd, Argument,...);Mc ...

  8. .net Core——SqlSugar使用

    一.DbContext配置 public class DbContext { public DbContext() { Db = new SqlSugarClient(new ConnectionCo ...

  9. 2019 计蒜之道 初赛 第二场 A 百度AI小课堂-矩阵问题 ( 等差数列求和公式)

    题目背景 ​91029102 年 99 月 11 日,百度在 X 市 XX 中学举办了一场 AI 知识小课堂,本场 AI 知识小课堂老师教授了一些矩阵的相关知识,因为矩阵在 AI 人工智能中也有相当的 ...

  10. 深度复数网络 Deep Complex Networks

    转自:https://www.jiqizhixin.com/articles/7b1646c4-f9ae-4d5f-aa38-a6e5b42ec475  (如有版权问题,请联系本人) 目前绝大多数深度 ...