「爬虫技巧」浏览器开发者工具使用技巧总结
myzbx 2025-01-02 17:53 41 浏览
总览
浏览器开发者工具在爬虫中常用来进行简单的抓包分析、JS逆向调试,打开方式:
- F12;
- 快捷键 Ctrl+Shift+I;
- 鼠标右键检查或者审查元素;
- 浏览器右上角 —> 更多工具 —> 开发者工具
常见禁用开发者工具手段:https://blog.csdn.net/cplvfx/article/details/108518077
官方文档:https://developer.chrome.com/docs/devtools/
- Elements(元素面板):使用“元素”面板可以通过自由操纵 DOM 和 CSS 来重您网站的布局和设计。
- Console(控制台面板):在开发期间,可以使用控制台面板记录诊断信息,或者使用它作为 shell,在页面上与 JavaScript 交互。
- Sources(源代码面板):在源代码面板中设置断点来调试 JavaScript ,或者通过 Workspaces(工作区)连接本地文件来使用开发者工具的实时编辑器。
- Network(网络面板):从发起网页页面请求 Request 后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),并可以根据这个进行网络性能优化。
- Performance(性能面板):使用时间轴面板,可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能。
- Memory(内存面板):分析 web 应用或者页面的执行时间以及内存使用情况。
- Application(应用面板):记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
- Security(安全面板):使用安全面板调试混合内容问题,证书问题等等。
- Lighthouse(诊断面板):对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。
可以直接点击页面的元素,会自动跳转到对应的源代码。
模拟各种终端设备,支持自定义终端。
开发者工具设置,包括一些外观、快捷置、终端设备、地理位置设置等。
自定义和控制开发者工具,包括调整工具的位置、全局搜索、运行命令、其他工具等。
终端模拟
可以模拟各种终端设备,适合查看手机页面的数据,点击【More tools】—> 【Sensors】可以模拟终端的地理位置、终端朝向等;工具栏可以选择要模拟的终端型号,其中 Responsive 是自适应。
Network 面板
Controls 控制器
- Preserve log:是否在页面重加载后,清除请求列表。
- Disable cache:是否启用缓存。
是否开启抓包
清除请求
是否隐藏 Filter(过滤器)窗格
搜索
Network conditions,网络条件,允许在各种网络环境中测试网站,包括 3G,离线等,还可以自定义限制最大下载和上传流量。
Import/Export HAR file,导入导出抓包数据。
Filter 过滤器
- Hide data URLs:data URLs 指一些嵌入到文档中的小型文件,在请求表里面以 data: 开头的文件就是,如较为常见的 svg 文件。勾选 Hide data URLs复选框即可隐藏此类文件。
- All:显示所有请求。
- XHR:全称 XMLHttpRequest,是一种创建 AJAX 请求的 JavaScript API,通常抓取 Ajax 请求可以选择 XHR。
- WS:全称 WebSocket,是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
- Manifest 安卓开发文件名,属于 AndroidManifest.xml 文件,在简单的 Android 系统的应用中提出了重要的信息码。
- Has blocked cookies:仅显示具有阻止响应 cookie 的请求。
- Blocked Requests:只显示被阻止的请求。
断点调试
常规断点调试
适用于分析关键函数代码逻辑
- Ctrl+Shift+F 或者右上角三个点打开全局搜索,搜索关键字。
- 定位到可疑代码,点击行号埋下断点。
- 调试代码,分析逻辑,其中 console 模板可以直接编写 JS 代码进行调试。
各个选项功能:
执行到下一个断点
执行下一步,不会进入所调用的函数内部
进入所调用的函数内部
跳出函数内部
一步步执行代码,遇到有函数调用,则进入函数
停用断点
不要在出现异常时暂停。
- Breakpoints:可以看到已经埋下的断点。
- Scope:可以看到当前局部或者全局变量的值,可对值进行修改。
- Call Stack:可以看到当前代码调用的堆栈信息,代码执行顺序为由下至上。
XHR 断点
匹配 url 中关键词,匹配到则跳转到参数生成处,适用 于url 中的加密参数全局搜索搜不到,可采用这种方式拦截。
行为断点
Event Listener Breakpoints,事件侦听器断点,当鼠标点击、移动、键盘按键等行为或者其他事件发生时可以触发断点,比如 Mouse —> click,可快速定位点击按钮后,所执行的 JS。
插入 JS
在 sources —> snippets 下可以新建 JS 脚本。
打印 windows 对象的值
在 console 中输入如下代码,如只打印 `_
for (var p in window) {
    if (p.substr(0, 2) !== "_#34;) 
        continue;
    console.log(p + " >>> " + eval(p))
}无限 debugger 防调试
某些页面打开调试工具会出现无限 debugger 的现象:
中间人拦截替换无限 debug 函数
查看调用栈,点击第二行跳转到原函数:
可以看到 _0x2ba9bc[_0x20b2('0x79')] 和 _0x2ba9bc[_0x20b2('0x7a')] 分别对应 debu 和 gger,连起来就是 debugger,在本地重写这个 JS,直接将这两个值置空:
使用插件 ReRes,编写规则,遇到此 JS,就替换成我们本地经过修改过的 JS,替换后无限 debugger 就不存在了:
方法置空
直接在 Console 中将无限 debugger 的函数重写置空也可以破解无限 debugger,缺点是刷新后失效。
解除定时器
适用于定时器类触发的 debug:
for (var i = 1; i < 99999; i++)window.clearInterval(i);Hook 钩子
钩子英文 Hook,在 windows 系统中,所有的都是消息,按了一下键盘,就是一个消息,Hook 的意思就是勾住,在消息过去之前先把消息勾住,不让其执行,然后自己优先处理。也就是这个技术提供了一个入口,能够针对不同的消息或者 api 在执行前,先执行我的操作。“我的操作”就是钩子函数。在开发者工具中以 chrome 插件的方式,在匹配到关键词处插入断点。
创建一个文件夹,文件夹中创建一个钩子函数文件 inject.js 以及插件的配置文件 manifest.json :
打开 chrome 的扩展程序, 打开开发者模式,加载已解压的扩展程序,选择创建的文件夹即可:
配置文件 manifest.json
以一个 header 钩子为例,其配置文件如下:
{
   "name": "Injection",
    "version": "1.0",
    "description": "RequestHeader钩子",
    "manifest_version": 1,
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "inject.js"
            ],
            "all_frames": true,
            "permissions": [
                "tabs"
            ],
            "run_at": "document_start"
        }
    ]
}header 钩子
header 钩子用于定位 header 中关键参数生成位置,以下代码演示了当 header 中包含 `Authorization` 时,则插入断点
var code = function(){
var org = window.XMLHttpRequest.prototype.setRequestHeader;
window.XMLHttpRequest.prototype.setRequestHeader = function(key,value){
    if(key=='Authorization'){
        debugger;
    }
    return org.apply(this,arguments);
}
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);cookie 钩子
cookie 钩子用于定位 cookie 中关键参数生成位置,以下代码演示了当 cookie 中匹配到了 `abcdefghijk`, 则插入断点:
var code = function(){
    var org = document.cookie.__lookupSetter__('cookie');
    document.__defineSetter__("cookie",function(cookie){
        if(cookie.indexOf('abcdefghijk')>-1){
            debugger;
        }
        org = cookie;
    });
    document.__defineGetter__("cookie",function(){return org;});
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);请求钩子
请求钩子用于定位请求中关键参数生成位置,以下代码演示了当请求的 url 里包含 `AbCdE` 时,则插入断点:
var code = function(){
var open = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function (method, url, async){
    if (url.indexOf("AbCdE")>-1){
        debugger;
    }
    return open.apply(this, arguments);
};
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);相关推荐
- 如何设计一个优秀的电子商务产品详情页
- 
        加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面... 
- 怎么在JS中使用Ajax进行异步请求?
- 
        大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加... 
- 中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革
- 
        前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很... 
- 前端监控 SDK 开发分享_前端监控系统 开源
- 
        一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的... 
- Ajax 会被 fetch 取代吗?Axios 怎么办?
- 
        大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch... 
- 前端面试题《AJAX》_前端面试ajax考点汇总
- 
        1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实... 
- Ajax 详细介绍_ajax
- 
        1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的... 
- 6款可替代dreamweaver的工具_替代powerdesigner的工具
- 
        dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver... 
- 我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊
- 
        接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝... 
- 福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光
- 
        时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预... 
- 2021年超详细的java学习路线总结—纯干货分享
- 
        本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象... 
- 不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!
- 
        Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人... 
- 2025 年 Python 爬虫四大前沿技术:从异步到 AI
- 
        作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易... 
- 最贱超级英雄《死侍》来了!_死侍超燃
- 
        死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/... 
- 停止javascript的ajax请求,取消axios请求,取消reactfetch请求
- 
        一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求... 
- 一周热门
- 最近发表
- 标签列表
- 
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)
 
