Chrome 浏览器客户端调试

Chrome 浏览器客户端调试

在开发者界面中，你可以使用打开快捷输入Ctrl + Shift +P运行常用命令。

一、Elements

1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个DOM元素时，箭头按钮会变成选择状态
2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和PC端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例。
3 你可以通过这个方式选择页面中的任意节点来进行调试，也可以直接在右方的元素面板点击切换节点，在任意节点通过鼠标右键都可以激活更多的功能。

二、Console

Console其实就是浏览器的一个可交互命令行，用来输出调试信息和脚本执行。想要在控制台输入换行可以使用shift + enter。可以点击左方区域来切换对应的显示，点击1.设置一个动态表达式来监听；2.过滤输出；3.清空，右方可以设置一些需要输出的信息。

三、Sources

1 文件Page: 在page这个栏目里面，会显示当前页面加载的文件
2 编辑器Filesystem: 更像一个代码编辑器，允许编辑代码并保存本地；完全可以使用它来进行3 代码覆盖Overrides: 覆盖这个地方要稍微复杂一点，在页面调试中，我们调试css样式，修改就能立即看到效果，但是调试JavaScript代码必须刷新才能看到效果，线上网站一刷新就恢复原样了，这时候就可以在本地新建一个项目和线上项目一模一样，然后选择代码覆盖，此时你调试JavaScript代码就能刷新也能看到效果了
4 代码片段Snippets: 你可以编辑一些常用的代码片段，保存在snippets里面，即使关闭浏览器也不会消失；每次使用只需要右键run，设置这个可以写入爬虫、抢购、点赞等JavaScript脚本代码。

1.Pause script execution 【停止断点调试】
2.Step over next function call【单步跳过】会跳到下一个断点
3.Step into next function call【单步进入】会进入函数内部调试
4.Step out of current function 【单步跳出】会跳出当前这个断点的函数
5.step【一步步执行】
6.Deactivate breakpoints: 使所有断点临时失效，不做任何调试
7.Don’t Pause on exceptions/ Pause On Caught Exceptions 程序运行时遇到异常是否中断的开关

四、Network

查看网页的http通信情况，包括Method、Type、Timeline（网络请求的时间响应情况）等

参考文档：
1 [Chrome开发工具]
( https://developers.google.cn/web/tools/chrome-devtools )
2 [Chrome调试工具-断点调试]
(https://blog.csdn.net/userkang/article/details/85252644?utm_source=app )
3 [Chrome浏览器开发工具]
( https://www.lookroot.cn/course/chromedevtools/ )
4 [Chrome浏览器调试技巧]
( https://blog.csdn.net/u014727260/article/details/53231298?utm_source=app )
5 [Chrome调试基础]
( https://blog.csdn.net/qq_39949109/article/details/80395409?utm_source=app )
( http://www.igeekbar.com/igeekbar/post/156.htm )