在HTML中加断点进行调试是前端开发中常用的技术，它允许开发者暂停代码的执行，检查和修改变量的值，以及逐步执行代码以查找问题，通常，断点不是直接加在HTML代码中，而是加在JavaScript代码中，因为HTML本身只是标记语言，不涉及逻辑执行，下面是如何在现代浏览器中使用开发者工具进行断点调试的详细步骤。
（图片来源网络，侵删）
1. 打开开发者工具
要开始调试，你需要先打开浏览器的开发者工具，不同的浏览器有不同的打开方式，以下是一些常见浏览器的打开方法：
Google Chrome: 右键点击页面选择检查，或使用快捷键Ctrl+Shift+I（Windows）/ Cmd+Opt+I（Mac）。
Mozilla Firefox: 右键点击页面选择检查元素，或使用快捷键Ctrl+Shift+I（Windows）/ Cmd+Opt+I（Mac）。
Safari: 右键点击页面选择检查元素，或使用快捷键Ctrl+Alt+I（Windows）/ Cmd+Opt+I（Mac）。
Microsoft Edge: 右键点击页面选择检查，或使用快捷键Ctrl+Shift+I。
2. 切换到源代码面板
在开发者工具窗口中，你会看到多个标签页，包括“元素”、“控制台”、“源代码”等，要设置断点，需要切换到“源代码”（Sources）标签页。
3. 选择要调试的脚本
在“源代码”（Sources）标签页中，你可以看到页面加载的所有脚本文件，这些文件可能是本地的，也可能是远程的，找到你想要调试的JavaScript文件并点击它。
4. 设置断点
找到你想要暂停执行的代码行，点击该行前面的空白区域（行号左侧），当出现一个蓝色或红色的圆点时，表示在该行设置了断点，红色断点表示暂停条件更复杂，例如只在表达式值为真时暂停。
5. 执行代码并触发断点
设置断点后，你可以执行可能触发断点的代码，如果你的断点设置在页面加载时就会执行的位置，通常只需刷新页面即可，如果断点设置在某个事件触发后才会执行的位置，你需要手动触发那个事件。
6. 查看和修改变量值
一旦代码执行到达断点，它将在开发者工具中暂停，此时，你可以查看当前作用域内的所有变量及其值，你也可以修改这些值来测试不同的条件。
7. 逐步执行代码
在断点暂停后，你可以逐步执行代码，以下是一些有用的按钮和功能：
恢复执行：点击这个按钮可以停止当前暂停的断点，让代码继续执行直到下一个断点或结束。
步入（Step Into）：这个按钮可以让你进入一个函数内部，逐行执行代码。
跳过（Step Over）：这个按钮会让你执行下一行代码，如果是函数调用，则会整个函数一起执行过去。
跳出（Step Out）：如果你已经在一个函数内部，这个按钮会让你执行到函数的末尾，回到调用该函数的地方。
8. 使用调用堆栈
在断点暂停时，你可以查看调用堆栈（Call Stack），它显示了当前执行位置的函数调用序列，这有助于你理解代码是如何达到当前执行点的。
9. 移除断点
如果你不再需要某个断点，可以点击断点所在行的蓝色或红色圆点来移除它。
上文归纳
通过以上步骤，你可以在HTML页面中加入断点并进行调试，这是一个强大的工具，可以帮助你理解和解决问题，记住，熟练使用断点调试是成为一名高效前端开发者的关键技能之一。
评论(0)