前端断点调试攻略——原生 JS、模块化打包及 MVVM 框架项目

        在前端开发过程中，调试是至关重要的环节。浏览器的 source 断点调试功能为我们提供了强大的工具来解决各种项目中的问题。在此将向大家介绍在无需编译打包的原生 JS 类型项目、模块化编译打包的项目以及采用MVVM 类型框架项目中如何使用浏览器 source 进行断点调试，以解决不同模式下的调试问题。

一、原生 JS 项目调试

        原生 JavaScript 项目相对较为简单直接，但在调试时也需要一些技巧。

        1. 打开浏览器开发者工具 - 在浏览器中打开要调试的页面，按下 F12 键或右键点击页面选择“检查”，打开开发者工具。

        2. 切换到 Sources 面板 - 在开发者工具中，找到“Sources”选项卡，点击切换到该面板。

         3. 找到要调试的文件 - 在左侧的文件目录中找到对应的 JavaScript 文件。如果是单页面应用，可能需要在“Sources”面板的“Page”文件夹下查找。

        4. 设置断点 - 在代码中找到要调试的位置，点击行号旁边的空白区域即可设置断点。当代码执行到该位置时，程序会暂停执行，方便我们查看变量的值、调用栈等信息。

        5. 调试代码 - 设置好断点后，可以刷新页面或执行相关操作触发代码执行。当代码执行到断点处时，程序会暂停，此时可以在右侧的“Scope”面板中查看当前作用域下的变量值，在“Call Stack”面板中查看调用栈信息。可以通过单步执行（F10 或点击开发者工具中的“Step Over”按钮）、进入函数内部（F11 或点击“Step Into”按钮）、跳出函数（Shift+F11 或点击“Step Out”按钮）等方式进行调试。

二、模块化编译打包后代码调试

        在现代前端开发中，我们经常使用模块化打包工具如 Webpack、Rollup 等进行项目构建。调试打包编译后的代码会稍微复杂一些。

        1. 生成 source map 文件 - 在项目的构建配置中，确保开启了 source map 的生成。例如，在 Webpack 配置中，可以设置`devtool: 'source-map'`。这样在打包后的代码中会生成对应的 source map 文件，方便我们在调试时定位到原始代码的位置。

        2. 打开浏览器开发者工具 - 与原生 JS 项目调试相同，打开浏览器开发者工具。

        3. 切换到 Sources 面板 - 在开发者工具中，找到“Sources”选项卡，点击切换到该面板。

        4. 找到打包后的文件 - 在左侧的文件目录中找到打包后的文件，通常会在“webpack://”或类似的文件夹下。如果开启了 source map，点击打包后的文件时，右侧会显示原始代码的内容，并可以在原始代码中设置断点进行调试。

        5. 调试代码 - 设置好断点后，触发代码执行，程序会在断点处暂停。此时可以像调试原生 JS 项目一样查看变量值、调用栈等信息进行调试。

三、MVVM 框架代码调试

        MVVM 框架如 Vue、Angular 等在前端开发中广泛应用，调试这些框架的代码也有一些特定的方法。

        1. 安装开发者工具扩展 - 对于 Vue 项目，可以安装 Vue Devtools 扩展；对于 Angular 项目，可以安装 Angular Devtools 扩展。这些扩展可以帮助我们更好地调试框架代码。

        2. 打开浏览器开发者工具 - 打开浏览器开发者工具。

        3. 切换到 Sources 面板 - 在开发者工具中，找到“Sources”选项卡，点击切换到该面板。

        4. 找到框架相关文件 - 根据使用的框架不同，找到对应的框架文件。例如，对于 Vue 项目，可能会在“vue.runtime.esm.js”等文件中找到框架的核心代码。对于 Angular 项目，可能会在“angular.js”等文件中找到框架代码。

        5. 设置断点 - 在框架代码或自己的项目代码中设置断点。需要注意的是，对于框架代码的调试，需要对框架的内部实现有一定的了解，以便更好地设置断点和分析问题。

        6. 调试代码 - 设置好断点后，触发代码执行，程序会在断点处暂停。此时可以查看变量值、调用栈等信息进行调试。同时，可以结合开发者工具扩展提供的功能，如 Vue Devtools 中的组件查看、状态管理等功能，更好地理解和调试项目。