无题
我们学习了如何调试网页和 Node.js 的代码，可以在代码某一行打个断点，代码执行到这里的时候就会断住，可以看它的作用域、调用栈等。
但有的时候，我们并不知道应该在哪里打断点：
比如代码抛了异常，你想打个断点看看异常出现的原因，但你并不知道异常在哪里发生的。
比如 dom 被某个地方修改了，你想打个断点看看怎么修改的，但你并不知道是哪段代码修改了它。
比如有的断点你想只在满足某个条件的时候断住，不满足条件就不需要断住。
类似的情况有很多，需要断住，但是普通的断点又不大合适，这时候就需要其他的断点类型了。
我们分别来看一下：
异常断点代码抛了异常，你想知道在哪抛的，这时候就可以用异常断点。
比如这样一段代码：
123456function add(a, b) { throw Error('add'); return a + b; }console.log(add(1, 2));
add 函数里抛了个异常，你想在异常处断住，这时候就可以加个异常断点：
用 node 的调试来跑：
勾选 Uncaught Excepti ...
无题
写 react 项目的小伙伴应该都用过 antd 组件库，但绝大多数同学并没有看过它的源码。
而想深入掌握 antd 组件库，只熟悉参数是不行的，必须要深入到源码层面。
所以今天就来分享下如何调试 antd 的源码。
而且我敢说这种调试源码的方式 90% 的前端都不会。
为什么呢？看到后面你就知道了。
首先，我们用 create-react-app 创建一个 react 项目：
1yarn create react-app antd-react-test
创建成功后，进入到项目里，把 dev server 跑起来。
浏览器访问可以看到渲染出的页面：
然后我们安装 antd，在入口组件里引入样式和 Button 组件：
页面会显示这个 Button：
那怎么调试这个 Button 组件的源码呢？
可以这样：
首先，创建一个 VSCode 调试配置：
指定调试的 URL，然后启动调试。
在组件里打个断点，代码会在这里断住：
可以看到调用栈中上一帧是 renderWithHooks，这就是 react 源码里调用函数组件的地方。
点击那个调用栈，你就会看到：
它调用了 App ...
无题
上节写了怎么调试 antd 的源码，但很多小伙伴是写 Vue 的，可能平时用的是 Element UI 的组件库，所以这节就来讲下怎么调试 Element UI 的源码。
首先，我们用 Vue CLI（用 vue cli5） 创建一个 vue2 的项目：
123yarn global add @vue/clivue create element-vue-test
创建成功后，进入到项目目录
安装 element ui 的库，并在入口引入：
然后在 App.vue 里用一下 button 组件
之后 yarn run serve 把开发服务跑起来，就可以看到这样的页面：
Element UI 的组件正确的显示了。
接下来调试 button 组件的源码，那问题来了，我怎么知道在哪里打断点呢？
我们可以知道的是，这个 button 会处理点击事件，但是却不知道事件处理函数的代码在什么地方。
这种情况可以加一个事件断点：
在 sources 面板的 Event Listener Breakponts 里勾选 Mouse 的 click 事件，也就是在所有 click 事件的处理函数 ...
无题
众所周知，阅读源码是前端进阶的一种方式，但很多同学不会使用调试工具，不知道该怎么高效的阅读源码。市面上也没有课程专门讲调试的，而这门课程就是弥补这个领域的空白。
我们会学习网页、Node.js 的调试，还会学习调试工具的实现原理，并且自己实现一个简易版小程序调试工具、React DevTools 还有 Chrome DevTools。
课程主要分为四部分内容：用 VSCode Debugger 调试网页的 JS、用 VSCode Debugger 调试 Node.js、用 Chrome DevTools 调试网页、调试工具的原理和实现简易版调试工具。
首先，我们会学习如何用 VSCode Debugger 调试网页，以 React 项目为例，然后我们会过一遍 VSCode Chrome Debugger 的配置，之后再调试下 Vue 项目。
这个过程中会用到 sourcemap，所以接下来会讲 sourcemap 的原理和作用，webpack 的 sourcemap 配置，然后再用这些知识来调试 React、Vue 源码。
调试完 Vue、React 项目和 Vue、React 源码 ...
无题
作为前端开发，调试是每天都会接触的概念。你觉得什么是调试呢？
有同学说，我用 Chrome DevTools 调试网页，可以查看元素，网络请求，断点运行 JS，用 Performance 工具分析性能等，这是网页的调试。
有同学说，我用 VSCode Debugger 调试 Node.js，可以同时调试多个进程的代码。这是 Node.js 的调试。
有同学说，我用 React DevTools 和 Vue DevTools 的 chrome 插件来调试 React、Vue 组件，还会用独立的 React DevTools 调试 React Native 应用。这是我常用的调试工具。
没错，这些都属于调试。那它们有什么共同特点呢？
它们都是把运行的状态暴露给调试工具，做一些展示和交互。
所以，我们可以给调试下个定义：
代码在某个平台运行，把运行时的状态通过某种方式暴露出来，传递给开发工具做 UI 的展示和交互，辅助开发者排查问题、梳理流程、了解代码运行状态等，这个就是调试。
这里的某个平台，可以是浏览器、Node.js、Electron、小程序等任何能执行 JS 代码的平台。
...
无题
上节我们知道了什么是调试、调试的原理，这节我们开始学习调试工具的使用。
首先从网页的 JS 调试开始。
我们以 React 项目为例，用 create-react-app 创建一个 react 项目：
1yarn create react-app test-react-debug
进入项目目录，执行 npm run start。
它会启动一个开发服务，然后浏览器访问 localhost:3000：
打开 Chrome DevTools，在 Sources 面板找到 src/index.js，打上个断点：
然后刷新就可以开始调试了：
代码会在断点处断住，右边会显示当前 local 作用域的变量，global 作用域的变量，还有调用栈 call stack。
上面有几个控制执行的按钮，分别是：
恢复执行
单步执行
进入函数调用
跳出函数调用
让断点失效
在异常处断住
可以控制代码的执行，可以看到每一步的调用栈和作用域的变量，那理清代码的逻辑，或者排查代码中的问题不就很容易了么？
其实调试网页的 JS，除了 Chrome DevTools 外，还有一种更好用的 ...
无题
上节我们学会了如何用 VSCode Debugger 调试网页的 JS，其实它还有很多有用的配置项，这节我们一起来过一遍：
首先，调试配置文件不用自己创建，可以直接点击 Debug 窗口的 create a launch.json file 快速创建：
launch/attach创建 Chrome Debug 配置有两种方式：launch 和 attach：
它们只是 request 的配置不同：
我们知道，调试就是把浏览器跑起来，访问目标网页，这时候会有一个 ws 的调试服务，我们用 frontend 的 ws 客户端连接上这个 ws 服务，就可以进行调试了。
VSCode 的 Debugger 会多一层适配器协议的转换，但是原理差不多。
launch 的意思是把 url 对应的网页跑起来，指定调试端口，然后 frontend 自动 attach 到这个端口。
但如果你已经有一个在调试模式跑的浏览器了，那直接连接上就行，这时候就直接 attach。
比如我们手动把 Chrome 跑起来，指定调试端口 remote-debugging-port 为 9222，指定用户 ...
无题
学习调试，sourcemap 是绕不开的概念，有了它才能直接调试源码。
这一节，我们就来探究下 sourcemap：
什么是 sourcemapsourcemap 是关联编译后的代码和源码的，通过一个个行列号的映射。
比如编译后代码的第 3 行第 4 列，对应着源码里的第 8 行第 5 列这种，这叫做一个 mapping。
sourcemap 的格式如下：
123456789{ version : 3, file: "out.js", sourceRoot : "", sources: ["foo.js", "bar.js"], names: ["a", "b"], mappings: "AAgBC,SAAQ,CAAEA;AAAEA", sourcesContent: ['const a = 1; console.log(a)', 'const b = 2; co ...
无题
上节我们学习了什么是 sourcemap，这还不够，webpack 对 sourcemap 做了很多封装。
想彻底掌握 sourcemap，还要搞懂 webpack 的 sourcemap 配置。
webpack 的 sourcemap 配置是比较麻烦的，比如这两个配置的区别：
eval-nosources-cheap-module-source-map
hidden-source-map
是不是分不清楚？
其实它是有规律的。
你把配置写错的时候，webpack 会提示你一个正则：
^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$
这个就是配置的规律，是几种基础配置的组合。
搞懂了每一种基础配置，比如 eval、nosources、cheap、module，按照规律组合起来，也就搞懂了整体的配置。
那这每一种配置都是什么意思呢？
我们分别来看一下。
(可以用后面一节的项目代码来测试)
evaleval 的 api 是动态执行 JS 代码的。比如：
但有个问题，eval 的代码打不了断点。
怎 ...
无题
我们学了如何用 VSCode Debugger 调试网页，也过了一遍各种配置，并且学习了 sourcemap，这节我们实战一下。
前面调试了 React 项目，这节来调试下 Vue 项目。
Vue 项目的创建有两种方式：
用 @vue/cli 创建的 webpack 作为构建工具的项目
用 create-vue 创建的 vite 作为构建工具的项目
我们分别来看一下：
调试 @vue/cli 创建的 webpack 项目首先安装 @vue/cli：
1yarn global add @vue/cli
然后执行 vue create vue-demo1 创建 vue 项目：
选择 vue3 的模版。
安装完之后进入到 vue-demo1 目录，执行 npm run serve 把开发服务跑起来。
浏览器访问，会看到渲染出的页面：
然后我们进行调试：
点击调试窗口的 create a launch.json file 来创建调试配置文件：
把 Chrome 调试配置的 url 改成目标 url 就可以进行调试了：
点击 debug 启动，在 vu ...