本文介绍了Chrome开发者工具的各种高级操作，包括多种打开方式、Elements元素面板的使用，如查看源代码、隐藏元素、添加属性及设置DOM断点；Console控制台面板的功能，如选择和操作元素、使用自定义JS代码；Sources面板的Snippets功能；Network面板的请求包过滤与标题栏自定义；Application面板的Storage查看与编辑；以及Settings面板的设置选项，如启用AJAX请求日志记录。
Chrome开发者工具骚操作
Chrome开发者工具骚操作
笔者日常作爬虫开发还是比较中意Chrome谷歌浏览器，所以在接下来的JS交互中平台都以Chrome谷歌浏览器为主。
打开开发者工具
因为要调试前端的JS文本，和控制台交互是必不可少的，而且不少网站会在这上边做文章，比如说禁止你的F12或者右键点击等等，所以笔者会将所有的Chrome控制台打开方法做个总结：
- F12；
- CTRL+SHIFT+I；
- 在页面右键点击检查；
- 浏览器——>更多工具——>开发者工具；
- 打开一个空白页面，打开开发者工具，再切换回去要调试的页面；
还是希望大家多掌握几种打开开发者工具的方式。
Elements元素面板
一般来说，我们切换到元素面板，它的所有HTML节点都是闭合的，我们可以选中任意元素，右键点击Expand recursively将所有节点打开。我们再元素面板里看到的页面源代码其实并非原始代码，而是CSS和HTML中和的一个结果。如果我们想要获取页面源代码，有两种方式：
- 切换到资源Sources面板，选择左边的index文件
- 右键点击查看网页源代码，或快捷键CTRL+U
如果我们想隐藏一个页面节点&
最低0.47元/天 解锁文章
扫一扫
1467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
