JavaScript反爬笔记（4）_浏览器开发者⼯具（摘要版）_Console + Sources + NetWork
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript反爬笔记（4）_浏览器开发者⼯具（摘要版）_Console + Sources + NetWork，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3519字，纯文字阅读大概需要6分钟。
内容图文
跟JS反扒相关的重点是如下三个面板
一、Console 控制台面板：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。
1 console.log：用于输出普通信息
2 console.info：用于输出提示性信息
3 console.error：用于输出错误信息
4 console.warn：用于输出警示信息
5 console.debug：用于输出调试信息
6 console.assert(expression, object)：Writes an error to the console when expression evaluates to false
7 console.clear()：Clears the console
8 console.count([label])：Writes the number of times that count() has been invoked at the same line and with the same label
9 console.table(array)：Logs an array of objects as a table.
10 $_ ：returns the value of the most recently evaluated expression
11 The $0, $1, $2, $3 and $4 commands work as a historical reference to the last five DOM elements inspected within the Elements panel or the last five JavaScript heap objects selected in the Profiles panel. $0 returns the most recently selected element or JavaScript object, $1 returns the second most recently selected one, and so on.
12 $x(path) returns an array of DOM elements that match the given XPath expression.
13 $(selector)等同于document.querySelector
14 $$(selector)等同于document.querySelectorAll
参考链接1：https://developers.google.cn/web/tools/chrome-devtools/console
参考链接2：https://developer.mozilla.org/zh-CN/docs/Web/API/Console
二、Sources 源代码面板
Sources => Overrides, 随便添加一个本地文件夹（Local），然后刷新下，在 Network 下(这个时候，Network会出现个黄色的三角形)，选中需要改动的请求， 右键 Save as override，然后在Local文件夹直接改，改完刷新下，改动就生效了
参考链接1：https://developers.google.cn/web/tools/chrome-devtools/javascript
参考链接2：https://blog.csdn.net/bianliuzhu/article/details/82385851
三、NetWork 网络面板
1 Preserve log：是否保留日志。如果选择保留日志，重新加载url当前界面时，会保留控制台的历史记录
2 Disable cache：是否进行缓存。如打开这个开关，则页面资源不会存入缓存，每次发送请求都会重新获取数据
3 Offline：设置模拟限速
4 如何查看资源请求的上游和下游？
按时shift键，鼠标hover在请求上，可以查看请求的上游和下游，如下图所示，hover在common.js上，可以看到有一个绿色请求、一个红色请求。其中绿色请求表示common.js的上游请求，即谁触发了common.js请求，红色请求表示common.js的下游请求，即common.js又触发了什么请求。
5 筛选
按住Ctrl键可以同时选择多个筛选条件，同时支持如下关键字筛选
domain：筛选出指定域名的请求，不仅支持自动补全，还支持*匹配。
has-response-header：筛选出包含指定响应头的请求。
is：通过is:running找出WebSocket请求。
larger-than：筛选出请求大于指定字节大小的请求，其中1000表示1k。
method：筛选出指定HTTP方法的请求，比如GET请求、POST请求等。
mime-type：筛选出指定文件类型的请求。
mixed-content：筛选出混合内容的请求（不懂啥意思）。
scheme：筛选出指定协议的请求，比如scheme:http、scheme:https。
set-cookie-domain：筛选出指定cookie域名属性的包含Set-Cookie的请求。
set-cookie-name：筛选出指定cookie名称属性的包含Set-Cookie的请求。
set-cookie-value：筛选出指定cookie值属性的包含Set-Cookie的请求。
status-code：筛选出指定HTTP状态码的请求。
6 爬虫基本都是通过 curl 这个命令来模拟正常的http请求
Copy as cURL：Copy the request as a cURL command.
Copy All as cURL：Copy all requests as a chain of cURL commands.
参考链接1：https://developer.mozilla.org/zh-CN/docs/Tools/Network_Monitor
参考链接2：https://blog.csdn.net/qq_39208536/article/details/79304148
参考链接3：https://developers.google.cn/web/tools/chrome-devtools/network
参考链接4：https://www.jianshu.com/p/471950517b07
内容总结
以上是互联网集市为您收集整理的JavaScript反爬笔记（4）_浏览器开发者⼯具（摘要版）_Console + Sources + NetWork全部内容，希望文章能够帮你解决JavaScript反爬笔记（4）_浏览器开发者⼯具（摘要版）_Console + Sources + NetWork所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。