相对于单纯看代码，我更推荐结合调试器使用，这样可以让我们看到代码的实际执行路线和每一个代码的变化多变的。可以跳过看大段代码，也可以一步步看某段逻辑的执行情况。Javascript代码主要有两种运行环境，一种是Node.js，一种是浏览器。一般来说，我会使用VSCode的调试器调试运行在Node.js上的JS代码，调试运行在浏览器上的JS代码我会使用chromedevtools。直到有一天我发现VSCode也可以在浏览器上调试JS代码。我试过了，真的很好吃。有多香？一起来看看吧。项目根目录下有一个.vscode/launch.json文件，里面保存了VSCode的调试配置。我们点击AddConfiguration按钮来添加一个debugchrome配置。配置是这样的：url是网页的地址，我们可以运行本地devserver，这里填写地址。然后点击debug运行：VSCode会启动一个Chrome浏览器加载网页，然后停在我们的断点处。调用堆栈、作用域变量等将显示在左侧面板上。最底层当然是webpack的入口，我们可以单步调试webpack的runtime部分。也可以看看render的过程，比如ReactDOM.render到渲染到一个子组件，中间做了什么。或者看一个组件的hooks的值是如何变化的（hooks的值保存在组件的fiberNode的memerizedState属性中）：可以看到，调试webpack运行时代码非常容易，或者调试React源代码，或业务代码。方便的。也许你会说，这在chromedevtools中也有，有什么特别的吗？确实，chromedevtools可以做同样的事情，但是VSCode在调试网页代码方面有两个主要优势：在编辑器中给代码打断点，也可以边调试边修改代码。使用同一个工具调试Node.js代码和网页代码，所以体验可以复用，体验一致。关于第一点，chromedevtools的sources其实是可以修改代码并保存的，但毕竟不是专门的编辑器，用它来写代码比较别扭。个人比较习惯边调试边修改代码，VSCode在这方面胜出。我们一般使用VSCode来调试Node.js，VSCode也可以用来调试网页，所以只要熟悉一个工具就可以了，不需要去学习chromedevtools的使用，调试经验跟VSCode更好一些，毕竟我们日常使用的编辑器更方便，这也是VSCode胜出的地方。但是你可能会说我要看简介信息？即每个函数的耗时，这对于分析代码性能非常重要。VSCode调试器也支持这一点：点击左边的按钮，可以记录一段时间的耗时信息，可以手动停止，可以指定固定时间，可以指定断点。选择某个断点有3种方式。配置文件信息是在一段代码的执行过程中记录的。它会在项目根目录下保存一个xxx.cpuprofile文件，里面记录了每个函数的执行耗时，可以逐层分析某段代码的耗时，从而定位问题，优化性能。如果安装了vscode-js-profile-flame的VSCode扩展，也可以换成火焰图显示。有些同学可能看不懂火焰图。解释一下：我们知道某个函数的执行路径是有调用栈的，可以看到一步一步调用了哪个函数，就是一条线。但实际上这个函数调用的函数不是只有一个，可能是多个：调用栈只保存了到某个函数的路由，而火焰图保存了所有的执行路由。所以你会在火焰图中看到这样一个分叉：其实这就是执行过程：我们来计算一个问题：函数A总共耗时50ms，它调用的函数B耗时10ms，它调用的函数C耗时10ms.20毫秒，问：函数A的其余逻辑需要多少毫秒？显然，可以计算为50-10-20=20ms。可能你觉得函数D耗时太长，那我们先看具体代码，再看能不能优化，再看耗时。就是这么简单，这就是配置文件性能分析所做的，简单的加法和减法。火焰图中每个方块的宽度也反映了耗时，所以比较直观。JS引擎采用事件循环的方式不断执行JS代码，因为火焰图反映了所有代码的执行时间，所以可以看到每个事件循环的代码执行时间，以及耗时多少。每个条形的宽度代表每个循环的耗时。当然是越薄越好，以免遮挡渲染。因此，性能优化的目标是将火焰图做成小细条，不能再粗了。回到正题，VSCode的cpuprofile和flamegraph其实比chromedevtools的性能更简洁易用，可以满足大部分需求。我觉得，除非你想看渲染和内存信息，因为VSCode没有支持，你需要用chromedevtools来调试JS代码，查看profile信息和火焰图，VSCode就够了。反正我觉得VSCode调试网页的JS代码很香，你们觉得呢？
