片段 Chrome DevTools 调试 - Javascript

Chrome DevTools 是一个非常强大的调试工具，它可以帮助开发人员快速地调试 JavaScript 代码和其他前端技术。其中一项功能就是在代码中添加断点，使您可以暂停代码执行。接下来，我们将介绍如何在 Chrome DevTools 中进行 Javascript 调试。

开启 DevTools

要开启 DevTools，在 Chrome 浏览器中，右键单击页面上的任何元素，然后选择“检查”。您也可以按下 Ctrl+Shift+I。

添加断点

要在代码中添加断点，请在 DevTools 中打开“源”面板，然后单击要添加断点的行号。断点将被添加到代码行的左侧。

运行代码

在添加断点之后，您可以在 DevTools 中的“控制台”面板中运行 JavaScript 代码。当代码达到断点时，它将停止在那里。

使用调试器

要使用调试器，通过按 F8 或单击“继续”按钮，使代码继续执行。通过单击“单步执行”按钮，可以逐行执行代码。通过单击“跳转到下一个断点”按钮，可以跳过当前断点并在下一个断点上停止。

调试 console.log()

您可以使用 console.log() 语句在控制台中打印变量或消息来调试 JavaScript。

总结

在本教程中，我们介绍了如何在 Chrome DevTools 中进行 JavaScript 调试。您可以在代码中添加断点，使用调试器控制代码的执行，并使用 console.log() 调试消息和变量。