一.浏览器控制台使用技巧和方式浏览器开发人员工具是现代浏览器内置的一组强大工具用于帮助网页开发者、设计师和调试人员分析、测试和优化网页。F12打开以下是其核心功能和用途的概述。1.元素检查(Elements/Inspector)1实时查看与编辑动态查看和修改网页的 HTML 结构与 CSS 样式。2布局调试检查盒模型、字体、层叠顺序调试响应式布局和动画效果。2. 网络监控Network1资源分析监控页面加载时请求的所有资源HTML、CSS、JavaScript、图片等。2性能优化查看资源加载时间、大小、请求头与响应头分析加载瓶颈。3. 样式编辑器Styles / Design Mode1即时预览实时修改 CSS 样式并立即看到效果无需刷新页面。2细节检查查看当前元素应用的样式规则、继承关系及覆盖情况。4. JavaScript 调试Console / Sources1控制台交互直接执行 JavaScript 代码查看 console.log 输出快速测试代码片段。2断点调试在 Sources 面板中设置断点监视变量、单步执行定位逻辑错误。5. 性能分析Performance1性能记录录制页面加载和运行时的性能时间线分析脚本执行、渲染、重绘等耗时。2瓶颈定位生成详细报告找出导致页面卡顿的环节。6. 存储与安全检查Application / Security1本地存储查看和管理 Cookies、LocalStorage、SessionStorage、IndexedDB 等。2安全状态检查 HTTPS 证书、加密连接状态确认站点安全性。实用技巧补充1快速定位元素在 Elements 面板中右键点击页面元素选择“检查”直接定位到对应 HTML。2断点条件设置在 Sources 面板中可以设置条件断点只有满足条件时才会暂停。3网络请求过滤在 Network 面板中按类型如 XHR、JS、Img过滤请求方便分析接口交互。4代码覆盖率在 Coverage 面板需通过命令菜单打开查看代码执行覆盖率优化冗余代码。在进行渗透测试时抓包到用户名和密码后密码往往会以加密的形式呈现如果想要登录网站或软件必须先将被加密的密码解密成明文。很多网站在使用BP抓包FUZZ密码的时候密码都会被JS进行加密这个时候我们无法进行FUZZ。二.JS断电技巧以及分析加密难题1.实战靶场站长工具 MD5https://tool.chinaz.com/tools/md5.aspx2.alert:弹窗一个简单的调试3.源代码4.演示步骤1在MD5加密框中输入1234562打开网页控制台的源代码全文搜索关键字hex_md5、md5、rstr_md5等分析JS代码使用控制台和断点调试的方式分析代码md5(string, bit)返回位数不传 / 非 32 则返回 16 位传 32 返回 32 位md5_Utf8Encode()对输入字符串做 UTF-8 编码保证中文加密一致性md5_ConvertToWordArray()将字符串转为 MD5 算法所需的 32 位字数组md5_WordToHex()将最终计算结果转为 16 进制字符串a.在这个 MD5 逆向实验中添加断点的核心目的是精准追踪加密函数的执行过程、确认参数传递、验证加密逻辑并不是所有场景都需要加断点。场景你找到了md5(string, bit)函数但不确定点击页面 “加密” 按钮时是否真的调用了这个函数比如页面可能有多个 MD5 相关函数怕找错。操作在 Sources 面板找到jquery.md5.js里的md5()函数第一行function md5(string,bit) {这一行点击行号添加断点行号会变红回到页面输入123456点击 “加密” 按钮浏览器会自动停在断点处代码行变蓝说明这个函数被触发了 → 确认找对了核心函数。场景想知道输入的字符串是如何一步步被编码、转换、计算出 MD5 的比如想验证md5_Utf8Encode()是否真的处理了中文。操作在md5()函数内的关键步骤加断点比如string md5_Utf8Encode(string);这一行触发加密后用控制台的「单步执行」按钮▶️右边的↓一步步运行代码实时查看变量值比如string在编码前后的变化彻底理解加密逻辑。b.直接复制到浏览器 Console 面板运行验证加密逻辑是否和站长工具一致// 1. 测试32位MD5核心验证 const testStr 123456; const md5_32bit md5(testStr, 32); // 传32表示返回32位 console.log(✅ 32位MD5结果, md5_32bit); console.log(✅ 预期结果e10adc3949ba59abbe56e057f20f883e); console.log(✅ 是否一致, md5_32bit e10adc3949ba59abbe56e057f20f883e ? 是 : 否); // 2. 测试16位MD5站长工具支持 const md5_16bit md5(testStr); // 不传bit默认返回16位 console.log(✅ 16位MD5结果, md5_16bit); console.log(✅ 预期结果49ba59abbe56e057); // 3. 测试中文加密验证编码一致性 const chineseStr 测试MD5; const md5_chinese md5(chineseStr, 32); console.log(✅ 中文「测试MD5」32位MD5, md5_chinese); // 可在站长工具输入「测试MD5」对比结果是否一致三.Python和JS结合解决加密难题import hashlib def js_md5(string, bit16): 还原jquery.md5.js的md5函数逻辑 :param string: 待加密字符串 :param bit: 返回位数16/32 :return: 小写MD5结果 # 第一步UTF-8编码和js的md5_Utf8Encode对齐 if isinstance(string, str): string string.encode(utf-8) # 第二步计算标准MD5 md5_obj hashlib.md5() md5_obj.update(string) full_md5 md5_obj.hexdigest() # 32位小写 # 第三步按bit返回和js逻辑对齐 if bit 32: return full_md5 else: # 16位是截取32位的第8-24位js里是md5_WordToHex(b)md5_WordToHex(c) return full_md5[8:24] # 测试验证 if __name__ __main__: # 测试32位 res_32 js_md5(123456, 32) print(f32位MD5{res_32}) # e10adc3949ba59abbe56e057f20f883e # 测试16位 res_16 js_md5(123456) print(f16位MD5{res_16}) # 49ba59abbe56e057 # 测试中文 res_chinese js_md5(测试MD5, 32) print(f中文MD5{res_chinese})