福州网站维护,wordpress登录去不了后台,沈阳网站建设选网龙,网站建设百度索引一、浏览器开发者工具
1.元素面板
展示浏览器渲染之后的页面 2.网络面板
浏览器请求的数据都会加载在网络面板 3.控制台面板
可以在控制台调试你对应的代码 4.源代码面板
网页#xff1a;当前网站加载的源代码位置
工作区#xff1a;用不到#xff0c;前端工程师会用 …一、浏览器开发者工具
1.元素面板
展示浏览器渲染之后的页面 2.网络面板
浏览器请求的数据都会加载在网络面板 3.控制台面板
可以在控制台调试你对应的代码 4.源代码面板
网页当前网站加载的源代码位置
工作区用不到前端工程师会用
替换替换网站代码信息访问网站的时候就是走的自己替换的文件
代码段可以编写测试代码 5.应用面板
用来查看和删除cookie信息 二、断点讲解
1.什么是断点
开发人员可以通过在源代码中设置断点来控制程序执行流程。一旦程序执行到设置的断点位置它就会在那里暂停使得开发人员可以逐步执行代码、观察变量的值并进行其他调试操作。
它的作用是可以帮助我们去定位数据加密的位置。
2.断点方法
1.DOM事件断点定位加密
DOM事件断点是在浏览器的开发者工具中提供的一种调试工具用于暂停JavaScript执行当特定类型的DOM事件被触发时。使用DOM事件断点你可以指定在哪些DOM事件上设置断点比如点击click、改变change、加载load等。一旦设置了DOM事件断点当相应的事件被触发时浏览器会自动在触发事件的JavaScript代码行上暂停执行从而允许你检查当前的程序状态、变量值以及执行堆栈信息等。执行的比较靠前 距离加密函数比较远
2.XHR断点定位加密
XHR断点时在浏览器的开发者工具中设置的一种调试工具用于在进行XMLHttpRequestXHR也就是我们说的ajax请求请求时暂停JavaScript执行。执行比较靠后 距离加密函数相对较近 可以根据栈快速定位注意非 XHR 发送的断不住
找数据加密的位置 第一步确定自己要找的加密的参数是什么 第二步找到起始的位置 第三步往前跟 看数据最终的位置跟栈堆 第四步确定加密的位置在那里
3.网站加载的实际顺序
✅ 一、页面加载阶段Browser 端 浏览器发起请求 输入 URL 或点击链接 DNS 解析建立 TCP 连接发送 HTTP 请求 服务器返回 HTML 返回初始 HTML 文件 浏览器解析 HTML 发现 script、link、img 等资源标签 并发请求其他资源如 JS、CSS、图片 加载和执行 JS 文件 执行 JavaScript开始页面动态构建 常见初始化Vue/React 挂载、jQuery 绑定事件 ✅ 二、页面初始化阶段JS 驱动 JS 初始化 各类变量赋值、DOM 渲染准备等 初始化监听事件如按钮点击、滚动加载等 ✅ 三、用户交互阶段触发异步请求 用户触发事件 点击、滑动、输入等 触发绑定的事件处理函数 事件回调中调用 JS 函数 准备参数、进行数据加密如AES、Base64、md5签名 通过 XHR / fetch 发送请求 异步向后端发送数据包 ✅ 四、后端交互阶段 服务器接收请求 解析参数、处理业务逻辑 查询数据库、生成响应结果 服务器返回响应 响应数据可能是加密的 JSON ✅ 五、响应处理阶段 前端接收响应数据 解析响应可能需要解密 判断是否成功 JS 更新页面渲染 修改 DOM 内容、触发组件更新、分页加载等
页面加载html加载js代码--》js初始化--》用户触发事件--》调用相应js--加密--》发包Send(xhr)--发送请求--》服务器
服务器--》接收响应--》解密--》刷新网页进行渲染4.断点示例
网站https://oauth.d.cn/auth/goLogin.html
关键字定位跳过子函数次态函数执行只在主函数内一步一步执行不进入子函数内部)进入子函数次态函数执行在主函数内部一步一步执行如果遇到子函数会跳转到子函数内部一步一步执行跳出当前函数回到调用位置单步执行会进入到函数内部 更加的细致屏蔽断点
三、方法栈
栈是一种先进后出的特殊线性表结构
调用栈是解析器的一种机制可以在脚本调用多个函数时通过这种机制我们能够追踪到哪个函数正在执行执行的函数体又调用了哪个函数。
当脚本要调用一个函数时解析器把该函数添加到栈中并且执行这个函数任何被这个函数调用的函数会进一步添加到调用栈中并且运行到它们被上个程序调用的位置。当函数运行结束后解析器将它从堆栈中取出并在主代码列表中继续执行代码。
代码说明
function cc(a,b) {console.log(a b)console.log(调用的cc函数)}function bb(a, b){console.log(a b)cc(a,b)console.log(调用的bb函数)}function aa(a, b) {bb(a, b)console.log(调用的aa函数)}aa(1, 2) 案例
网址:用户登录_当乐网(d.cn)xhr断点调试看栈
四、debugger原理
1.示范案例
定时器
!DOCTYPE html
html langen
headmeta charsetUTF-8title定时器/title
/headh1 idbox/h1body
scriptvar ssdocument.getElementById(box)function ff(){debugger;}setInterval(ff,100);ss.innerHTML你好啊
/script/body
/html
控制台检测
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制台检测/title
/head
body
scriptfunction resize(){var threshold200;var widthThreshold window.outerWidth-window.innerWidth threshold;var heightThreshold window.outerHeight - window.innerHeight threshold;if (widthThreshold || heightThreshold){debuggerconsole.log(控制台打开了)}}setInterval(resize,100)
/script/body
/html
构造断点
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8title构造器断点/title/headbodyscriptfunction check() {function doCheck(a) {(function() {}[constructor](debugger)()); //debuggerdoCheck(a);}try {doCheck(0)} catch(err) {console.log(err)}};check()variable Function(debugger;);variable();/scripthello/body/html 2.浏览器过debugger
方法一不再此处暂停 鼠标右击点“一律不再此处暂停“ 方法二编辑断点 当定义器运行到这个 dubugger 这个代码的时候那么这个时候它为 true它肯定执行我们的debugger代码那我们可以用浏览器的功能给它改成 false。 鼠标右击行号添加条件断点添加一个不成立的条件。 写个10的先验条件永远为假就永远不会进入这个断点了。 3.方法置空过debugger 无限 debugger 产生的原因是第七行代码 ff 这个函数造成的所以我们可以重写这个函数使无限 debugger 失效。在控制台中输入 function ff() {} 即可注意一定要在debugger进入之前,刷新一下网页就可以在debugger进入之前了。 setInterval function(){} 4.替换文件过debugger 5.注入代码过debugger
var _constructor constructor;Function.prototype.constructor function(s){if(sdebugger){console.log(s);return null;}return _constructor(s);}
有调用constructor方法我们判断他传递的参数是不是debugger要是debugger的话就把这个方法改写要不是的话就是用源方法返回
