无题
我们学了如何用 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 ...
无题
前面几节讲了用 VSCode Debugger 调试 Vue 和 React 项目，但同学们经常会遇到一些断点相关的问题，比如：
在文件里打的断点是灰的，一直不生效
断点断在了奇怪的文件和位置
不知道什么原因导致的，该怎么解决。
这是因为不清楚 VSCode Debugger 里打的断点是怎么在网页里生效的。
这节就来讲下这个：
断点映射的原理我们在 VSCode 里打的断点是这样的：
VSCode 会记录你在哪个文件哪行打了个断点。
在 breakpoints 这里可以看到：
代码经过编译打包之后，可能会产生一个 bundle.js，网页里运行的是这个 js 文件：
我们打的断点最终还是在代码的运行时，也就是网页里断住的，所以在 VSCode 里打的断点会被传递给浏览器，通过 CDP 调试协议。
但是问题来了，我们本地打的断点是一个绝对路径，也就是包含 ${workspaceFolder} 的路径，而网页里根本没有这个路径，那怎么断住的呢？
这是因为有的文件是关联了 sourcemap 的，也就是文件末尾的这行注释：
它会把文件路径映射到源码路径。
如果映射到的源码路径直 ...
无题
Vue、React 的项目怎么调试我们都知道了，这节我们来调试下 React 的源码。
把 react 和 react-dom 包下载了下来，在项目里引入，开发服务跑起来后，打开 Chrome Devtools 打断点调试。
你会发现调试的是 react-dom.development.js
这是因为 react-dom 包下就是编译后的 react-dom.development.js 文件：
而源码里这些逻辑是分散在不同的包里的，所以就算搞懂了逻辑，也不知道这些逻辑在哪些包里，只能靠搜索来定位。
那怎么能够调试 React 最初的源码呢？
也就是这样的效果：
这就需要用到我们刚学的 sourcemap 的知识了：
用 VSCode 调试 React 项目我们用 create-react-app 创建一个 react 项目，然后 npm run start 跑起来。
这时候浏览器访问就可以用 Chrome DevTools 调试了：
但我们的目标是在 VSCode 里调试，所以要添加一个 VSCode 的 debugger 配置：
然后点击 debug 启动：
这时候 ...
无题
知道了如何调试 React 源码，这节我们再来调试下 Vue 源码。
首先，还是通过 vue cli 创建项目（要用 5.0 以上的 cli）：
安装 @vue/cli 后执行 vue create vue-demo 创建 vue 项目：
选择 vue3 的模版。
安装完之后进入到 vue-demo 目录，执行 npm run serve 把开发服务跑起来。
浏览器访问，会看到渲染出的页面：
修改下 vue.config.js，把 devtool 改成 source-map：
然后我们进行调试：
点击调试窗口的 create a launch.json file 来创建调试配置文件：
修改调试配置如下：
1234567891011{ "type": "chrome", "request": "launch", "name": "调试 Vue 项目", "runtimeExecutable": & ...
无题
VSCode Debugger 调试的时候需要创建调试配置，默认生成的配置往往不是符合需求的，需要做一些修改。
比如调试 Vue 项目时，默认生成的调试配置是这样的：
而我们最终用的是这样：
那能不能像生成默认配置一样，快速生成我们需要的调试配置呢？
可以的，这需要用到 VSCode 的 Snippets 功能。
Snippets 是代码片段的意思，输入前缀就可以快速填入代码片段。
我们如何自己写一个 Snipppets 呢？
按住 cmd + shift + p 调出 VSCode 命令面板，输入 snippets，选择 Configure User Snippets：
创建一个项目级别的 Snippets：
在 .vscode 下就会多出一个 xx.code-snippets 的文件：
注释的部分就是 demo 配置，我们把它打开：
prefix 就是这个 snippets 生效的前缀
body 是插入的内容
description 是描述
scope 是指定 snippets 生效的语言
这个 snippets 的作用就是在这个项目目录下的 js、ts ...
无题
学会了网页里 JS 的调试，我们再来学下 Node.js 代码的调试。
我们准备一段 Node.js 的代码：
123456789const fs = require('fs/promises');(async function() { const fileContent = await fs.readFile('./package.json', { encoding: 'utf-8' }); await fs.writeFile('./package2.json', fileContent);})();
就是简单的文件读写，先用 node index.js 跑一下：
然后以调试模式启动，加个 –inspect-brk 参数：
1node --inspect-brk ./index.js
–inspect 是以调试模式启动，–inspect-brk 是以调试模式启动并且在首行断住。
然后你就会发现它打印了 ws 的地址：
...
无题
前面两节我们学习了怎么调试 Node.js、npm scripts，这节我们来过一遍 VSCode Node Debugger 的常用配置。
首先，从 attch 的方式开始：
attach有这样一个 Node.js 文件：
12345678910const http = require('http');const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ data: 'Hello World!' }));});server.listen(8888);
我们以调试模式启动：
然后 VSCode Debugger 添加一个 attach 类型的 Node 调试配置，端口是 9229:
点击调试启动就可以连上。
打个断点 ...
无题
作用域想必大家都知道，就是变量生效的范围，比如函数就会生成一个作用域，声明的变量只在函数内生效。
调试的时候，可以看到作用域的信息，这样的作用域一共有 9 种。
下面我们就一起过一遍这 9 种作用域吧：
Global 作用域通过 var 声明一个变量，打个断点，可以看到 Scope 里有 Global 类型的作用域，也就是全局作用域，里面保存了变量 a：
在浏览器环境下，可以通过 a 访问全局变量，也可以通过 window.a 访问。
Local 作用域声明个函数，在函数内声明一个变量，调用这个函数的时候，可以看到 Scope 里有 Local 类型的作用域，也就是本地作用域，里面保存了变量 b：
这两种作用域都很常见，没啥好说的。
Block 作用域es6 加入了块语句，它也同样会生成作用域：
如图，会把里面声明的变量 a 放到 Block 作用域内，也就是块级作用域。
if、while、for 等语句都会生成 Block 作用域：
前几种作用域很常规，但下面这种作用域绝大部分前端就不知道了：
Script 作用域这段代码大家觉得会生成什么作用域：
很多同学都会说，不是 ...
无题
每个前端项目都有 npm scripts，我们会用 npm scripts 来组织编译、打包、lint 等任务。
大家可能经常会跑 npm scripts，但却对这些命令行工具是怎么实现的并不了解。
那如果想了解这些工具的实现原理，应该怎么做呢？
这就是今天的主题：调试 npm scripts。
这些命令行工具的 package.json 里都会有个 bin 字段，来声明有哪些命令：
npm install 这个包以后，就会放到 node_modules/.bin 目录下：
这样我们就可以通过 node ./node_modules/.bin/xx 来跑不同的工具了。
我们也可以用 npx 来跑，比如 npx xx，它的作用就是执行 node_modules/.bin 下的本地命令，如果没有的话会从 npm 下载然后执行。
当然，最常用的还是放到 npm scripts 里：
这样就直接 npm run xxx 跑就行了。
npm scripts 本质上还是用 node 来跑这些 script 代码，所以调试他们和调试其他 nod ...
无题
Nest.js 是当下最流行的 Node.js 服务端框架，它建立在 Express 之上，实现了 IOC 的架构模式，并且对很多方案都有集成，比如 websocket、graphql 等。
当然，这节不是讲 Nest.js 的原理，而是讲如何调试 Nest.js 的项目，如何调试 Nest.js 的源码。
调试 Nest.js 项目Nest.js 提供了快速创建项目的命令行工具 @nest/cli，首先全局安装它：
1npm i -g @nestjs/cli
然后用 nest new nest-test 快速创建一个 nest 的项目。
进入项目目录，执行 npm run start 就会启动服务：
然后浏览器访问 http://localhost:3000 ，可以看到 Hello World，说明服务启动成功了。
然后我们创建一个 node 调试配置，指定 npm 为 runtime：
这里 console 要设置为 integratedTerminal，这样日志会输出在 terminal，就和我们手动执行 npm run start 是一样的。
不然，日志会输 ...