js调试技巧
一、浏览器开发者工具
1.元素面板
展示浏览器渲染之后的页面
2.网络面板
浏览器请求的数据都会加载在网络面板
3.控制台面板
可以在控制台调试你对应的代码
4.源代码面板
网页：当前网站加载的源代码位置
工作区：用不到，前端工程师会用
替换：替换网站代码信息，访问网站的时候，就是走的自己替换的文件
代码段：可以编写测试代码
5.应用面板
用来查看和删除cookie信息
二、断点讲解
1.什么是断点
开发人员可以通过在源代码中设置断点来控制程序执行流程。一旦程序执行到设置的断点位置，它就会在那里暂停，使得开发人员可以逐步执行代码、观察变量的值，并进行其他调试操作。
它的作用是可以帮助我们去定位数据加密的位置。
2.断点方法
1.DOM事件断点定位加密
- DOM事件断点是在浏览器的开发者工具中提供的一种调试工具，用于暂停JavaScript执行当特定类型的DOM事件被触发时。
- 使用DOM事件断点，你可以指定在哪些DOM事件上设置断点，比如点击（click）、改变（change）、加载（load）等。一旦设置了DOM事件断点，当相应的事件被触发时，浏览器会自动在触发事件的JavaScript代码行上暂停执行，从而允许你检查当前的程序状态、变量值，以及执行堆栈信息等。
- 执行的比较靠前 距离加密函数比较远
2.XHR断点定位加密
- XHR断点时在浏览器的开发者工具中设置的一种调试工具，用于在进行XMLHttpRequest（XHR也就是我们说的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 lang="en">
<head><meta charset="UTF-8"><title>定时器</title>
</head><h1 id="box"></h1><body>
<script>var ss=document.getElementById('box')function ff(){debugger;}setInterval(ff,100);ss.innerHTML='你好啊'
</script></body>
</html>控制台检测
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制台检测</title>
</head>
<body>
<script>function resize(){var threshold=200;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 html><html lang="en"><head><meta charset="UTF-8"><title>构造器断点</title></head><body><script>function check() {function doCheck(a) {(function() {}["constructor"]("debugger")()); //debuggerdoCheck(++a);}try {doCheck(0)} catch(err) {console.log(err)}};check()variable = Function("debugger;");variable();</script>hello</body></html>2.浏览器过debugger
- 方法一：不再此处暂停
- 鼠标右击，点“一律不再此处暂停“
-
方法二：编辑断点
-
当定义器运行到这个 dubugger 这个代码的时候，那么这个时候它为 true，它肯定执行我们的debugger代码，那我们可以用浏览器的功能给它改成 false。
-
鼠标右击行号，添加条件断点，添加一个不成立的条件。
-
写个1===0的先验条件，永远为假，就永远不会进入这个断点了。
-
3.方法置空过debugger
- 无限 debugger 产生的原因是第七行代码 ff 这个函数造成的，所以我们可以重写这个函数，使无限 debugger 失效。在控制台中输入 function ff() {} 即可
- 注意：一定要在debugger进入之前,刷新一下网页就可以在debugger进入之前了。
setInterval = function(){}
4.替换文件过debugger
5.注入代码过debugger
var _constructor = constructor;Function.prototype.constructor = function(s){if(s=="debugger"){console.log(s);return null;}return _constructor(s);}有调用constructor方法我们判断他传递的参数是不是debugger，要是debugger的话就把这个方法改写，要不是的话就是用源方法返回