下面以 Vue 项目为例说明 1 安装 目前 Debugger for Chrome 已经处于遗留状态，不建议使用。 建议安装 JavaScript Debugger (Nightly) 。该版本为预

每个应用，不论大小，都需要理解程序是如何运行失败的。当我们写的程序没有按照自己写的逻辑走的时候，我们就会逐步一一排查问题。在平常开发过程中我们可能会借助console.log来排查,但是现在我们可以借助vscode断点来调试项目。 在可以从 Chrome 浏览器调试你的 Vue…

如果我们在构建 Vue3 时增加 `-sourcemap` 参数，那得到的结果可以让我们在 Chrome 浏览器中直接调试 TS 源码。

如图↑，直接sources面板中打断点。 若在第6行的空行打断点，看到一个动画显示断点从第六行溜到第七行。vscode的debugger扩展实质就是与这个通信，并反馈结果到自己的ui上。 因此如果你看到vscode中用鼠标打的断点与显示不一致，那么其实是浏览器就是这样做的，只是…

作为前端开发，基本每天都要调试 Vue/React 代码，不知道大家都是怎么调试的，但我猜大概有这么几种： 不调试，直接看代码找问题 console.log 打印日志 用 Chrome Devtool

这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战 前言 我们了解块级作用域吗？块级作用域是任何一对花括号 {} 中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是

Sources Panel 记录当前页面所有引用关联的文件资源，通过面板可以查看文件内容、修改文件内容、js调试等。开发过程中最常用来打断点查看任务执行顺序进行调试。

已加载的全部资源，以域名划分文件夹。 大家都会用的就略了... 黑盒脚本：跟代码时不会走的代码的内部，比如第三方框架。一般来说，正确的使用f10 f11 f12不需要使用这个