步骤：

  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. vue项目如何监听窗口变化，达到页面自适应？

    [自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...

  2. html常用标签、包含关系、常用术语,以及网页设计中的字体分类

    编程比较舒适的等宽字体:DejaVu Sans Mono 字体的分类: serif (衬线字体){在笔画上面有些特殊的修饰效果} sans-serif (非衬线字体){横平竖直.横就是横,点就是点} ...

  3. Red Hat Enterprise Linux查看系统版本命令

    # arch 返回结果为i686表示32位系统,x86_64表示64位系统. # uname -a # uname -r # lsb_release -a # cat /proc/version # ...

  4. 搬家至csdn

    搬家至csdn https://blog.csdn.net/qq_42866164

  5. UEditor使用报错Cannot set property 'innerHTML' of undefined

    仿用UEditor的setContent的时候报错,报错代码如下Uncaught TypeError: Cannot set property ‘innerHTML’ of undefined.调试u ...

  6. Spring基础17——使用注解来配置Bean

    1.组件扫描 组件扫描(component scanning):Spring能够从classpath下自动扫描,侦测和实例化具有特定的注解的组件. 特定组件包括: —@Component:基本注解,标 ...

  7. tp5 微信授权

    protected $appid = '****************'; //微信 appidprotected $appsecrt = '******************'; //微信 ap ...

  8. PAT Basic 1037 在霍格沃茨找零钱 (20 分)

    如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 —— 就如海格告诉哈利的:“十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一个西可,很容易.”现在,给定 ...

  9. tee 多重定向

    1.命令功能 tee读取标准输入的数据,并将内容输出成文件. 2.语法格式 tee  option  file tee  [-ai]  文件 参数说明 参数 参数说明 -a 追加到文件后面,非覆盖 - ...

  10. Codeforces 950 010子序列拆分 数列跳棋

    A B a,b两个序列分成K段 每一段的值相等 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset ...