chrome浏览器开发者工具的使用

JS调试

在开发者模式下，Sources面板进行调试。

Sources面板中左边是文件导航，中间用来放置待调试的文件，右边是调试的工具

中间放置（想要调试）的文件可以通过ctrl+p来查找

工具栏：

Resume script execution  暂停或是恢复执行

Step next function call逐步进行执行，跨方法执行

Step into next function call跳入方法

Step out of current function 跳出当前方法

Deactivate breakpoints关闭所有断点（或是打开所有断点）

删除所有断点：在Breakpoints中右键点击remove all breakpoints

Event Listener Breakpoints 事件监听断点

在调试时，如果想随时观察某个变量的变化情况，选中该变量，右键，点击Add to Watch。即可以在右边的Watch中查看该变量。

在调试时，鼠标选中任意变量都可查看其值

如果想要查看那些文件中含有某个方法，可以使用ctrl+shift+f 输入方法名，即可搜索所有拥有该方法的文件。

如果不想调试：遇到错误最简单的方法也是最笨的方法就是复制错误代码，然后百度一波

模拟不同的浏览器和移动设备

在开发者模式下，点击右上角的三个点，然后选择More tools 然后选择Network conditions

Network throttling是模拟网络的带宽，可以测试各种网速状况

User agent可以模拟不同的设备   需要注意的是：使用完后，需要再次将select automatically选中

当然移动设备的模拟可以使用开发者模式下左上角的第二个按钮Toggle device toolbar（ctrl+shift+M）