谷歌浏览器调试工具

1.断点调试

 当使用此工具的时候，在source有一个打断的标志，鼠标点击页面的时候，当执行到此段代码的时候，停止。

2.代码打断点

在代码页面打断点，在

中，会显示属性。也可以在上一行的代码中悬停在变量上，可以得到变量的属性。

再点击

 

 便执行下一步。直到把整个页面执行完毕。

 

在循环中，如果想看变量的值，可以点击变量，右键，选择“add selected text to watch ”，就可以在

中看到。

这个图标是恢复执行的意思。

这个是跳入当前方法

这是跳出当前方法

关闭所有断点。也可以在break points面板中关闭断点。

这个按钮可以在出现异常的地方停止。 若去掉此处对勾，则不会在异常的地方停止。

ctrl+shift+f ：可以搜索本页面所有加载项的相匹配的内容。

3.事件监听断点

例如鼠标单击：在source中的event listener breakpoints中，把mouse-click前面的勾上，然后在页面单击的时候，便会在鼠标单击事件发生的时候出现断点，并且停住。

   

 4.测试不同客户端

在工具栏中选择more tools->network condition。可以在里面选则不同网络，不同移动端或者不同浏览器。或者 这个标志，可以显示为手机端。