打开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.模拟不同浏览器和移动端设备
选好之后刷新页面，看效果
还可以模拟移动设备
