一.浏览器控制台使用技巧和方式

       浏览器开发人员工具，是现代浏览器内置的一组强大工具，用于帮助网页开发者、设计师和调
试人员分析、测试和优化网页。F12打开，以下是其核心功能和用途的概述。

1.元素检查(Elements/Inspector)

（1）实时查看与编辑

        动态查看和修改网页的 HTML 结构与 CSS 样式。

（2）布局调试：

        检查盒模型、字体、层叠顺序，调试响应式布局和动画效果。

2. 网络监控（Network）

（1）资源分析

        监控页面加载时请求的所有资源（HTML、CSS、JavaScript、图片等）。

（2）性能优化

        查看资源加载时间、大小、请求头与响应头，分析加载瓶颈。

3. 样式编辑器（Styles / Design Mode）

（1）即时预览

        实时修改 CSS 样式并立即看到效果，无需刷新页面。

（2）细节检查

        查看当前元素应用的样式规则、继承关系及覆盖情况。

4. JavaScript 调试（Console / Sources）

（1）控制台交互

        直接执行 JavaScript 代码，查看 console.log 输出，快速测试代码片段。

（2）断点调试

        在 Sources 面板中设置断点，监视变量、单步执行，定位逻辑错误。

5. 性能分析（Performance）

（1）性能记录

        录制页面加载和运行时的性能时间线，分析脚本执行、渲染、重绘等耗时。

（2）瓶颈定位

        生成详细报告，找出导致页面卡顿的环节。

6. 存储与安全检查（Application / Security）

（1）本地存储

        查看和管理 Cookies、LocalStorage、SessionStorage、IndexedDB 等。

（2）安全状态

        检查 HTTPS 证书、加密连接状态，确认站点安全性。

实用技巧补充：

（1）快速定位元素：在 Elements 面板中，右键点击页面元素选择“检查”，直接定位到对应 HTML。

（2）断点条件设置：在 Sources 面板中，可以设置条件断点，只有满足条件时才会暂停。

（3）网络请求过滤：在 Network 面板中，按类型（如 XHR、JS、Img）过滤请求，方便分析接口交互。

（4）代码覆盖率：在 Coverage 面板（需通过命令菜单打开）查看代码执行覆盖率，优化冗余代码。

        在进行渗透测试时，抓包到用户名和密码后，密码往往会以加密的形式呈现，如果想要登录网站或软件，必须先将被加密的密码解密成明文。

        很多网站在使用BP抓包FUZZ密码的时候，密码都会被JS进行加密，这个时候我们无法进行FUZZ。

二.JS断电技巧以及分析加密难题

1.实战靶场

站长工具 MD5（https://tool.chinaz.com/tools/md5.aspx）

2.alert:弹窗（一个简单的调试）

3.源代码

4.演示步骤

（1）在MD5加密框中输入123456

（2）打开网页控制台的源代码，全文搜索关键字（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, bit=16):
    """
    还原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(f"32位MD5：{res_32}")  # e10adc3949ba59abbe56e057f20f883e
    
    # 测试16位
    res_16 = js_md5("123456")
    print(f"16位MD5：{res_16}")  # 49ba59abbe56e057
    
    # 测试中文
    res_chinese = js_md5("测试MD5", 32)
    print(f"中文MD5：{res_chinese}")