在开发前端应用程序时，经常需要在HTML页面中嵌入JavaScript代码。这些脚本可以用于提供交互性、动态更新内容或执行其他任务。然而，当这些脚本出现错误时，它们可能会破坏整个页面。在这种情况下，调试工具非常有用，它允许您轻松地找到并解决问题。
本文将介绍如何使用谷歌浏览器自带的调试工具来编辑和调试在HTML页面中嵌入的JavaScript代码。此外，我们还将涉及其他有用的技巧和建议，以帮助您更有效地编写和调试JavaScript代码。
在谷歌浏览器中打开开发者工具
要开始调试JavaScript代码，我们需要打开谷歌浏览器自带的开发者工具。 为此，请按F12键或单击菜单中的“自定义和控制Google Chrome”按钮，然后选择“更多工具”>“开发者工具”。
一旦打开了开发者工具，您可以看到一个分为不同区域的面板。其中包括：
- 元素面板：用于查看和编辑HTML元素
- 控制台面板：用于记录JavaScript代码的输出和错误消息
- 源代码面板：用于查看和编辑JavaScript代码
在控制台中执行JavaScript代码
在调试JavaScript代码时，最常用的工具是控制台面板。此面板允许您以交互方式执行JavaScript代码，并查看其输出结果。
要在控制台中执行JavaScript代码，请切换到控制台选项卡，并输入要执行的代码。例如，以下代码将在控制台中打印“Hello World”：
console.log("Hello World");您可以通过单击控制台右上角的清除按钮来清除控制台中的所有输出。此外，如果您遇到错误，它们也将显示在控制台中。
使用断点调试JavaScript代码
当您需要检查 JavaScript 代码决定何时才执行某个功能或何时程序出现问题，那么使用断点是很有用的。断点是一种调试工具，允许您暂停JavaScript代码的执行，并查看在这一点上发生了什么。
要在JavaScript代码中设置断点，请在源代码面板中找到要设置断点的行，并单击行号。此将在该位置创建一个红色圆圈，表示一个断点已被设置。
一旦您设置了断点，您可以通过重新加载页面或触发事件来运行JavaScript代码。当JavaScript执行到断点时，谷歌浏览器会自动暂停代码的执行，并将您带到调试面板，以便您查看代码的当前状态。
在断点处卡住后，您可以使用调试工具的各种选项来检查代码并解决问题。例如，您可以使用“变量”面板查看当前的变量值，或使用“控制台”面板查看输出消息和调用堆栈。
编辑JavaScript代码
如果您需要编辑HTML中嵌入的JavaScript代码，可以在源代码面板中进行。要访问该面板，请切换到“Sources”选项卡，并找到包含要编辑代码的文件。
一旦您打开了JavaScript文件，您就可以像在任何其他文本编辑器中一样编辑它。当您保存更改时，它们将自动应用于页面上的所有实例。
示例代码
下面是一个示例代码片段，演示如何在JavaScript代码中设置断点并使用控制台记录
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14528