身为程序猿——谷歌浏览器的这些骚操作你真的会吗

2022 年 6 月 09 日
本文字数：2338 字
阅读完需：约 8 分钟

前言——几日前，我那上初中的妹妹突然发 VX 问我说她想复制网上搜到的一些朋友圈文案拿去发朋友圈，但是问题是复制不了！

听到这个问题我嘿嘿一笑（心想：难道网上还有我爬虫爬不到的数据吗？难道妹妹没听过江湖流传的一个传说——可见即可爬吗！），我嗖的一声从床上弹坐起来，坐到电脑前，打开我的谷歌浏览器输入妹妹的网址——果然：

又是这熟悉的弹窗，又是这该死的 VIP 才能享受的特权，不过——这些对于我们爬虫人来说都是小问题，我打开我的 pycharm，啪啪一顿猛敲，一会一个针对妹妹发的网站的小爬虫就写好了，输入网址，下载 OK：

尔后，我便将下载并整理好的 txt 文本直接发给妹妹，得到妹妹一阵哥哥哥哥的好夸——身子骨都要酥了！但是，我突然又想到，对于妹妹这种编程小白，下次她再遇到类似的问题不还是得来问我，要我给她解决吗！“不行不行”，我这样告诫自己——此乃 IT 界大忌！授之以鱼不如授之以渔——这才是正道！！！但是，这个“渔”究竟是啥呢？

我也就不卖关子了！下面和大家分享一个骚操作——你只要使用一个谷歌浏览器（不管你是小朋友还是叔叔阿姨），进行我如下传授的简单几步，我都可保你解除封印，想复制啥就复制啥！

第一步：网页空白处单击鼠标右键->然后点击“检查”；

第二步：单击网页右上角齿轮图标；

第三步：鼠标往下滑，看到 Disable JavaScript，单击前面的空白小框框选中；

End，现在——你就已经解除封印，此页面内容想复制啥就复制啥了哦！

不过，如果你是名程序猿，或者说你未来想要当一名程序猿，那么只会刚刚那一个浏览器的骚操作是远远不够的！本博主熬夜整理，为大家整理了如下关于谷歌浏览器调试面板的使用以及常用快捷键大全，如果你能全都掌握——那么恭喜你：你已经是名十分强大的程序猿了！

@TOC

1.Chrome 调试面板

（1）常用面板（爬虫中定位元素必用！）

定位小箭头按钮(左边第一个)：选中 Elements 面板，并启动该按钮，可以在页面中定位相应元素的源代码位置，或者选择源代码位置可定位到页面相应的元素。
手机-PC 视图切换按钮(左边第二个)：启动该按钮，网页可以在 pc 网址网页和手机网址网页之间进行转换。由于在爬虫过程中，爬取手机网址网页相对来说更容易，所以可以通过该按钮将网页切换至移动网页实现更快速爬取操作。
Elements 面板(元素面板)该面板显示了渲染完毕后的全部 HTML 源代码，在使用 selenium 爬取网页时可通过这些源代码找到各标签的位置，属性等特征。更重要的是，双击 html 源码或者右侧的 css，可以更改网页外观，即可以对静态网页进行调试。
Console 面板(控制台面板) 快捷键：CTRL+~该面板用来显示网页加载过程中的日志信息，包括打印，警告，错误及其他可显示的信息等。同时它也是一个 js 交互控制台。
Sources 面板(源代码面板)该面板以站点为分组，存放着请求下来的所有资源(html,css,jpg,gif,js 等)。正是因为该面板存放了所有的资源，因此在调试 js 时，目标代码都是在此处寻找的。该面板也提供了调试按钮工具。
Network 面板(网络面板)Network 面板记录了网络请求的详细信息，包括请求头，响应头，表单数据，参数信息等，
快捷键小学习（要在检查页面输入哦！）：CTRL+SHIFT+P 输入 javascript（即可直接选择 Disabled JavaScript 选项）：可以屏蔽掉此网站的 JS 代码，在刷新之后此网站的所有 JS 代码都不会执行了！输入 full：可以截屏（会将整个页面截下来）

（2）Network 面板（爬虫中过滤请求及过滤数据类型必用——比如过滤掉异步加载出来的请求！）

ALL：所有的请求
XHR(XmlHttpRequest 对象 js 生成)： js 动态加载请求
JS: JS 代码
Css: 样式
image: 图片
Media: 音频,视频
Font: 字体
DOC: 首页
WS: WebSocket
Hide data URLs：可以过滤掉 data 的响应
注意：（1）左上角的 Preserve log 选项，如果勾选，即代表不清除上一个页面请求的数据。比如：在一个网页里登录，如果不勾选此选项，由于点击登录之前属于一个请求；点击登录之后属于另外一个请求。所以点击之后是没有你的登录信息的！

（2）左上角的 Disable cache 选项，表示清除缓存，一般都要勾选，防止网页操作时由于本地缓存的存在，而导致一些预期之外的错误！

（3）左上角的方框 Filter。用法：

①set-cookie-domain:baidu.com 可以过滤域名为 baidu.com 的响应，便于你找 cookie。

②set-cookie-name:cookie 中的键。也可以过滤含有此键的响应，便于你找 cookie。 ③set-cookie-value:cookie 中的值。也可以过滤含有此值的响应，便于你找 cookie。④cookie-name:cookie 中的键。可以过滤包含有此 cookie 的键的请求。

（3）设置断点（爬虫高级中 JS 渗透必用到的操作！）

第一部分：如何使用！

目的：通过调试找到目标数据生成的地方（JS 渗透必用！）使用断点来暂停 JavaScript 代码，审查变量的值和在特定时刻所调用的堆栈。设置断点的最基本的方法是在特定的代码行上手动添加一个断点。也可以将这些断点配置为仅在满足特定条件时触发。在源代码的左侧，您可以看到行号。这个区域称为 line number gutter(行号槽)。单击行号槽中的行号，就会在该行代码上添加一个断点。例如事件，DOM 更改。