Chrome浏览器开发者工具使用

打开Chrome浏览器，按F12就可以进入开发者工具 

1.使用开发者工具编辑网页样式

在Elememts中调试HTML和CSS

（1）右上角的三个点，Dock side 可以选择调试工具窗口位置

  Ctrl+Shift+F可以全局搜索

点击左上角图标，可以在网页选择元素，调试工具会找到相应的html和css代码

 可以在html代码上直接双击，或右键选择Edit AsHTML编辑html代码。

点击+添加css，也可以直接在某个样式中进行编辑。 

点击颜色小方块，可以在颜色调试器中选择颜色，包括透明度调试，也可以用选色笔选择屏幕上的颜色，调好颜色后可以复制颜色代码。

 

2.调试JS代码

（1）JS调试工具介绍

在Sources中调试JS代码

可以看到左边是文件目录预览，中间是显示代码的位置，右边是调试工具。

可以使用Ctrl+p模糊搜索，打开文件。

1处三角可以设置代码暂停，其后一个按钮为跳过方法执行下一语句，下一个按钮是进入方法，再下一个是 跳出方法，如果不想让js一步步执行可以直接再点一次1处。鼠标悬停在变量上可以得到值。

左上角第三行代码设置了一个断点，在2处可以控制所有断点的开关

3处可以遇到压缩代码时，调整代码格式

 选中一个变量，右击->add to watch,点击1处第二个按钮执行下一步，可以实时监控循环里变量的变化。

如果想要跳出循环，可以在循环外设一个断点，点击1处恢复执行，程序就会在断点处停下。

 点击蓝色八边形，勾选Pause On Caught Exceptions,可以捕获catch块中的异常，并在异常代码处停下，不勾选不能捕获catch块中的异常，只能捕获其他的异常。

 （2）与后台对接错误调试

对于回调函数，可以在回调函数里设置断点，恢复运行，看服务器响应的值是否有错：

检查页面获取的值是否有错，把鼠标放在上面看值。

点击Network,看发送的值是否正确 

检查发送状态，200说明发送成功。 

 （3）事件监听断点

如果找不到js代码，如图，给相应的事件打上对勾后，就会给这个事件打上断点

 报错，点击红色小叉叉，可以看到红色的错误信息，复制进行百度。

3.模拟不同浏览器和移动端设备

 

选好之后刷新页面，看效果

还可以模拟移动设备