当前位置: 首页 > 科技观察

浏览器开发者工具使用技巧_0

时间:2023-03-20 15:39:30 科技观察

概述浏览器开发者工具在爬虫中常用,用于简单的抓包分析,JS逆向调试,打开方式:F12;快捷键Ctrl+Shift+I;鼠标右键检查或检查元素;浏览器右上角—>更多工具—>开发者工具Elements(Elements面板):使用“Elements”面板通过自由操作DOM和CSS修改您网站的布局和设计。控制台:在开发过程中,您可以使用控制台面板记录诊断信息,或将其用作shell与页面上的JavaScript进行交互。Sources:通过在Sources窗格中设置断点来调试JavaScript,或通过Workspaces连接到本地文件以使用开发人员工具的实时编辑器。Network(网络面板):在发起网页请求Request后,获取每个请求资源的信息(包括状态、资源类型、大小、耗时等),并据此优化网络性能。Performance(性能面板):使用时间线面板,可以通过记录和查看网站生命周期中发生的各种事件来提高页面运行时的性能。Memory(内存面板):分析网页应用程序或页面的执行时间和内存使用情况。Application(应用面板):记录网站加载的所有资源信息,包括存储数据(LocalStorage、SessionStorage、IndexedDB、WebSQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。安全(Security)面板):使用安全面板调试混合内容问题、证书问题等。Lighthouse(诊断面板):诊断当前网页的网络利用率和网页性能,并给出一些优化建议。元素选择:可以直接点击页面中的某个元素,它会自动跳转到对应的源代码。终端模拟:模拟各种终端设备,支持自定义终端。自定义:自定义和控制开发者工具,包括调整工具位置、全局搜索、运行命令、其他工具等。终端模拟点击模拟各种终端设备,适用于手机页面查看数据。点击【更多工具】—>【传感器】模拟终端的地理位置、方位等;工具栏可以选择要模拟的终端模型,其中Responsive为自适应。NetworkpanelControlscontrollerPreservelog:页面重新加载后是否清除请求列表。禁用缓存:是否启用缓存。是否开启抓包。明确要求。是否隐藏过滤器窗格。搜索。Networkconditions网络状况,允许在各种网络环境下测试网站,包括3G、离线等,还可以自定义最大下载和上传流量。导入/导出HAR文件,导入导出抓包数据。FilterHidedataURLs:数据URLs指的是文档中嵌入的一些小文件,比如请求表单中比较常见的svg文件,以data:开头。勾选隐藏数据URL复选框以隐藏此类文件。全部:显示所有请求。XHR:全称是XMLHttpRequest,是一种用于创建AJAX请求的JavaScriptAPI。通常,您可以选择XHR来抓取Ajax请求。WS:全称WebSocket,是HTML5提供的一种在单TCP连接上进行全双工通信的协议。Manifest:Android开发文件名,属于AndroidManifest.xml文件,在简单的Android系统应用中提出重要的信息代码。已阻止cookie:仅显示带有已阻止响应cookie的请求。被阻止的请求:仅显示被阻止的请求。断点调试常??规断点调试适用于分析关键功能代码逻辑Ctrl+Shift+F或者右上角三个点打开全局搜索,搜索关键字。找到可疑代码,点击行号埋断点。调试代码,分析逻辑,控制台模板可以直接写JS代码进行调试。每个选项功能:执行到下一个断点。执行下一步而不进入被调用的函数。进入被调用的函数。跳出函数。一步步执行代码,遇到函数调用就进入函数。禁用断点。不要暂停异常。Breakpoints:可以看到已经埋下的断点。作用域:可以看到当前局部或全局变量的值,并修改该值。CallStack:可以看到当前代码调用的堆栈信息,代码执行顺序是从下往上。XHR断点匹配url中的关键字,如果匹配则跳转到参数生成的地方。适用于全局搜索找不到的url中的加密参数。这个方法可以用来拦截。BehavioralbreakpointsEventListenerBreakpoints,事件监听器断点,可以在鼠标点击、移动、键盘按键等行为或其他事件发生时触发断点,比如Mouse—>click,可以快速定位到点击按钮后执行的JS。在sources—>snippets下插入JS创建一个新的JS脚本。打印windows对象的值在控制台输入如下代码,例如只打印以_$开头的变量值:for(varpinwindow){if(p.substr(0,2)!=="_$")继续;console.log(p+">>>"+eval(p))}UnlimiteddebuggerAnti-debugging部分页面打开调试工具会出现无限debugger现象:中间人拦截替换无限debug函数查看callstack,点击第二行跳转到原函数:可以看到_0x2ba9bc[_0x20b2('0x79')]和_0x2ba9bc[_0x20b2('0x7a')]分别对应debu和gger,加起来就是调试器。在本地重写这个JS,直接把这个Empty这两个值转换:使用插件ReRes,写规则,遇到这个JS就替换成我们本地修改的JS。替换后无限调试器将不复存在:方法留空直接在Console中使用无限调试器的功能覆盖空白也可以打断无限调试器,缺点是刷新后会失效。清除定时器适用于定时器类触发的调试:for(vari=1;i<99999;i++)window.clearInterval(i);Hook钩子英文Hook,在windows系统中,都是消息,按一下键盘,就是一条消息,Hook的意思是钩住,在消息通过之前钩住消息,阻止其执行,然后优先自己处理.也就是说这个技术提供了一个入口,可以在执行不同的消息或者API之前执行我的操作。“我的操作”是钩子函数。在开发者工具中作为chrome插件在匹配关键字处打断点。创建文件夹,在文件夹中创建钩子函数文件inject.js和插件配置文件manifest.json:打开chrome扩展,打开开发者模式,加载解压后的扩展,选择创建的文件夹:配置文件manifest.json以headerhook为例,其配置文件如下:{"name":"Injection","version":"1.0","description":"RequestHeaderhook","manifest_version":1,"content_scripts":[{"matches":[""],"js":["inject.js"],"all_frames":true,"permissions":["tabs"],"run_at":"document_start"}]}headerhookheaderhook用于定位header中的关键参数生成位置。下面的代码演示了当header中包含Authorization时,会插入一个断点key=='授权'){调试器;}returnorg.apply(this,arguments);}}varscript=document.createElement('script');script.textContent='('+code+')()';(document.head||document.documentElement).appendChild(script);script.parentNode.removeChild(script);cookiehookcookiehook用于定位cookie中的关键参数生成位置。以下代码演示了当cookie中匹配到abcdefghijk时,则插入断点:varcode=function(){varorg=document.cookie.__lookupSetter__('cookie');document.__defineSetter__("cookie",function(cookie){if(cookie.indexOf('abcdefghijk')>-1){调试器;}org=cookie;});document.__defineGetter__("cookie",function(){returnorg;});}varscript=document.createElement('script');script.textContent='('+code+')()';(document.头||document.documentElement).appendChild(脚本);script.parentNode.removeChild(脚本);requesthook请求钩子用于定位请求中的关键参数生成位置,如下代码演示当请求的url包含AbCdE时,插入断点:prototype.open;window.XMLHttpRequest.prototype.open=function(method,url,async){if(url.indexOf("AbCdE")>-1){调试器;}returnopen.apply(this,arguments);};}varscript=document.createElement('script');script.textContent='('+code+')()';(document.head||document.documentElement).appendChild(script);script.parentNode.removeChild(脚本);看这里,给我看太多了