谷歌浏览器断点调试js，谷歌浏览器JS调试小技巧

1. 介绍

谷歌浏览器在开发者工具中提供了非常便捷的JS调试功能。在实际的开发中，我们常常需要定位问题，这时候使用谷歌浏览器JS调试工具就非常方便。

2. 开启调试模式

打开Chrome浏览器，打开任意网页，在浏览器中右键点击鼠标，选择“检查”或者按F12键，就会打开“开发者工具”面板。在“开发者工具”面板中，选择“Sources”，点击左上角的“+”按钮，打开文件夹选择对应的项目文件夹，在目标JS文件中设置断点。

3. 设置断点

在源代码工具中找到需要断点的代码行，将断点放在代码行的左边，使用console.log()输出调试信息，可以在控制台实时查看各个变量的值以及执行的结果。

4. 调试工具说明

在调试过程中，谷歌浏览器提供了非常实用的功能。点击“Sources”标签，就可以看到右侧的调试工具区。调试工具提供了断点列表、监视面板、控制台窗口等调试工具。

5. 开始调试

为了开始调试，您需要选择“Sources”面板中的JS文件，通过定位代码行并在其左侧设置断点来调试代码。

6. 断点列表

在断点列表中，您可以看到所有已设置的断点、监视变量和采取的行动。在代码执行到已设置断点的行时，会暂停代码，您可以通过单步调试、运行到光标处、继续运行等进行调整。

7. 监视面板

监视面板允许您跟踪定义在全局或局部范围内的表达式和变量的值。您可以通过单击监视表达式添加.millisecond,增加和删除监视等来添加表达式或变量。

8. 控制台窗口

控制台窗口允许您与调试JavaScript交互，并查看当前的调试和异常信息。当代码执行到设置断点的位置时，您会看到变量和表达式的当前值、函数的调用情况、异常抛出等。您还可以使用控制台窗口检查页面元素，验证JavaScript代码等。

文章TAG：谷歌  谷歌浏览器  浏览  浏览器  谷歌浏览器断点调试js