一、Elements

第一：我们可以在任何地方下断点。

第二：我们可以复制 JS 路径。

第三：事件列表。

第四：Ctrl+f这里面搜得到的内容，是 JS 已经渲染好的内容，这里边可以搜得到，不代表他没有加密。

第五：UA 头设置。

第六：F1进入设置界面，可以进行基本的设置。

有时候，下断点会直接下到 webpack 文件中，导致我们断不上，这时候我们需要去取消掉这个勾选。

第七： map 文件还原 webpack。

https://gitee.com/BobZ/webpack-sourcemap-unpacker

二、Network

第一：这两个选项是禁止输出和禁止缓存。

不勾选的话，直接使用内存缓存，我们会出现 Hook 不到的情况，所以我们勾选上这个选项。

第二：设置浏览器网速，设置上传下载的网速。

第三：这里是筛选包信息。

XMLHttpRequest类似于Request。

关键字搜索。

浏览器数据储存的总览，包括 cookies......

三、TCP 与 UDP

TCP协议：是底层协议，安全，但是速度慢，当前网站上的所有协议都是 TCP 协议。

UDP协议：不安全，不能保证数据完成性，速度快。

四、顶层协议

HTTP，HTTPS，FTP，SMTP，POP3，MQTT。
HTTP --> HTTPS
HTTPS://		协议
baidu.com		一级域名
hao.baidu.com	        二级域名
/xx/xxx.jsp		网站路径

http 的默认端口是 80，https 的默认端口是 443。

五、HTTP --> HTTPS

5.1、请求头

我们一般查看的话，只关注两种，一种是xhr，另一种是document。

请求头 url：

https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_10169502174917163033%22%7D&n_type=-1&p_from=-1

请求方法：

常见的有：GET，POST，HEAD，PUT。

服务器处理返回的结果。

这里显示为 200。

IP 地址：

这里显示的 IPV6 地址。

请求头：

客户端希望接收的响应体的数据类型。

请求流文件所需的。

Cookie 中红框中的可能就是身份标识。

显示网站来源，很多网站都有检测网站来源的校验。

可以自定义的 User-Agent。

除了上述描述的内容，其他都可以省略。

5.2、响应头

有百度或者其他网站自带的字段，可以删除，下面的 set-cookie 是服务器返回的，非常重要，其他字段都可以删除。

5.3、 响应体：

下面是响应体内容。

5.4、XMLHttpRequest

XMLHttpRequest会有send和ajax方法，是因为XMLHttpRequest中包含send方法，所以当加载XHR的时候，会加载 send 等等方法。

时间轴顺序。

六、WebSocket

6.1、响应体

websocket --> websockets

101 代表协议升级，我们的 websocket 是通过 http 升级上来的，不能删除。

这里的 key 大多数都是随机生成的，但是有些网站是固定的。

HTTP是send 出来的，但是 websocket 是 new 出来的。

HTTP是你发送一条数据，服务器立马返回一条，就完成一次请求，而 websocket是一直连接的，所以说 websocket 是持续的。

6.2、小计

怎么去查看数据包中的字段(加密)，在 Type 字段查看：XML->document->......

七、调试基础

我们在刷新的时候，任意选择 js，选择在来源面板打开，就会进入到调试页面。

第一件事，我们选择格式化代码。

7.1、按钮介绍

F8此功能，就是我们下好断点，运行到断点处，继续点击此处会运行到下一个断点，没有断点，会一直执行到结束。

在行号前进行下断点。

一行会有很多方法，只有当我们手动点亮的时候，才能断住，全部点亮时，会挨个断住。

当我们点击大括号的时候，它会帮我们括住一个方法体，就是括号下面会出现一个小横线。

F10 面这个标志，是跳到下一个方法。

注意：通常情况下一个小括号就是一个方法，我们有时候也要依据情况而定。

F11下面的按钮是步入到当前的方法，进入方法里面。

Shift+F11下面按钮是执行完当前的方法，步出方法。

F9当前这一行，有好几个方法，我们运行到下一个方法，也就是运行一小步。

忽略所有断点。(DOM 断点和异常捕获断点除外)

异常捕获。

try{
    var name = window.zhangsan.name;
}catch{
    console.log("您写错了");
}

代码行断点：
    1、debugger
    2、点击行号断点

7.2、抽屉栏介绍

7.2.1、断点管理器

断点管理器，这里我们可以取消断点，也可以添加断点。

7.2.2、DOM 断点

也就是页面元素断点，我们在元素区进行断点。

可以两个都选择上，就可以在 DOM 列表里面看见我们所下载的断点，也可以进行断点的取消。

7.2.3、全局的事件断点

7.2.4、xhr fetch断点

发包断点，说白了就是 send 断点，也就是说，在底层 hook 了 send 函数。

hook：控制原函数的执行流程。

7.2.5、条件断点

条件断点：有些断点会一直在循环里面执行，我们就可以设置一个值，来快速的结束当前断点，执行下面的流程。

条件断点的作用：

1、过滤断点

2、跳过断点

当前行，如果条件设置为 flase，则当前行的所有断点不生效。

7.2.6、变量监控

可以将变量写在监视里面，查看变量是否变化。

7.2.7、方法栈和作用域

栈里面清楚的表明了调用关系，和使用了那个 js 和行号。

当前本地作用域。

当前方法作用域。

全局作用域。(Window)

在作用域找值得时候，是一层一层的找，直到找到全局作用域的时候，如果没有就出现undefined。

本地->闭包->全局

8、案例

8.1、案例一：

aHR0cHM6Ly9wYXNzcG9ydC54aW1hbGF5YS5jb20vcGFnZS93ZWIvbG9naW4/ZnJvbVVyaT1odHRwczovL3N0dWRpby54aW1hbGF5YS5jb20=

输入账号密码，点击登录，找到登录包。

发现 password 字段被加密，我们进入被加密的 js 代码中，这里点击源代码/来源，即可进入 js 代码中。

第一种：Ctrl+f寻找 password 字段。

e.accoutLogin = function(t) {
  var e = t.type
    , r = void 0 === e ? "h5" : e
    , n = t.account
    , o = t.password
    , a = l(t, ["type", "account", "password"]);
  return (0,
          u.getNonce)(r).then((function(t) {
    n = (0,
         u.getEncryptPwd)(n),
      o = (0,
           u.getEncryptPwd)(o);
    var e = (0,
             u.getSignature)({
      account: n,
      password: o,
      nonce: t
    });
    return (0,
            i.request)({
      url: "/".concat(r, "/login/pwd/v2"),
      method: "post",
      data: c({
        account: n,
        password: o,
        nonce: t,
        signature: e
      }, a)
    })
  }
                              ))
};

找到加密函数段。

打上断点，断点位置分别在(函数开始前，加密函数处，函数结束后)，然后继续输入账号密码，进入断点调试。

可以很明显看出来，我们输入的内容。

找到加密方法，并去除花指令。

n = (0,u.getEncryptPwd)(n) = n = u.getEncryptPwd(n)
o = (0,u.getEncryptPwd)(o) = o = u.getEncryptPwd(o)

可以看出来，加密函数就是getEncryptPwd。

第二种：堆栈寻找法，输入账号密码，进行抓包，找到加密字段。

进入第一个 js 打上断点。

继续登录，断住断点。

调用堆栈一个一个向上寻找。

当走到e.accoutLogin这个栈时，找到加密函数。

8.2、案例二：

aHR0cDovL3d3dy5haXdlaTM2NS5jb20vbG9naW4=

输入账号密码，找到请求包中的字段。

可以看到 password 被加密了。

点击 send，进入 js 代码。

调用堆栈这里，第一个是 send，第二个是 ajax，不用看，它们是封装的方法，我们看第三个堆栈。

可以看到方法中第二个参数，传递了值。

这里第一个参数为空，第二个参数，对密码进行了 MD5 加密，且有一个固定的盐。

最终加密代码。

username: $('input[name=username]').val();
password: CryptoJS.MD5(pwd).toString();

8.3、案例三：

aHR0cHM6Ly93d3cuNTEuY29tL3MvOTY1Mi8/dGc=

输入账号密码，登录抓包。

第一种：找到加密数据包。

发现是script，直接利用栈。

直接找到加密函数传输处。

第二种：像这种 callback，jsonp 的直接去搜索红框中的接口。

Ctrl+Shift+f进行全局搜索/login/submit。

8.4、案例四：

aHR0cHM6Ly9wYXNzcG9ydC41OC5jb20vbG9naW4=

找到请求包，发现密码加密，进入响应的 js 代码中。

发现为document的，我们需要去页面搜它的接口。

<form target="iframeName" id="sdkSubmitForm" method="post" name="formName" action="//passport.58.com/58/login/pc/dologin" style="position: absolute; left: -1000px; top: -1000px;"><input name="username" type="hidden" value="13333333333"><input name="password" type="hidden" value="17d2df70fcda219079515963e885294cc3957c1a85f0e5786b492252aa132117cff07ab468e48bab3fd10934cb007f7b6326981d42fe9643a6b635dcc68401b6772510fda067c99e9c1539b87eaefdcef91159f8f0660fed32c53673b7f34982b1dda54dbdfbcc16d097093c4f2e50295235213218a66f05237a07f1c155f113"><input name="token" type="hidden" value="oSa9U0d1AwLoYvLe1sG--WIVoDuRpGt3"><input name="source" type="hidden" value="58-default-pc"><input name="path" type="hidden" value="http%3A%2F%2Fmy.58.com%2F%3Fpts%3D1714891786849"><input name="domain" type="hidden" value="58.com"><input name="finger2" type="hidden" value="zh-CN|24|1.25|12|1536_864|1536_816|-480|1|1|1|undefined|undefined|unknown|Win32|unknown|5|false|false|false|false|false|0_false_false|d41d8cd98f00b204e9800998ecf8427e|50031ef15f1a0a49d5e2817efb623905"><input name="isremember" type="hidden" value="false"><input name="autologin" type="hidden" value="false"><input name="isredirect" type="hidden" value="false"><input name="psid" type="hidden" value="c2c3e701-d93b-4a59-87c7-d8a3bacffb2a"><input name="fullScreenAbPage" type="hidden" value="2"><input name="psdk-d" type="hidden" value="jsdk"><input name="psdk-v" type="hidden" value="1.1.4"><input name="xxzlbbid" type="hidden" value="pfmbM3wxMDI5M3wxLjcuMHwxNzE0ODkyMjUxNzEwfGUvbUlRV3NVSjFxR05zd1Q2WEEyejR6NVdlTFl5cVFCZklxc2VSd3JiYTQ9fGU3NGE2MTQ3MTQ5NjI4NTkzNjEyZWY3MGY1M2I0ODg3XzE3MTQ4OTEzNTg0MDNfZDE0M2UyMjYyNGFlNGI0YjlmMDAxNDgwOGVkNTEwOGNfMTg2MzUyODIyMnxhMTkzYjFhMDBhNGU1OTQ1ZDk1YWZjNjg4ZjgzODU5Zl8xNzE0ODkxNzg2Njc0XzEzOA==_pfmx9Io0ieooL0dORzdQ9Ori51GB2DEm71AfFf0PlyaqVuJrXqouIgPqQGIc/js9Rrjg"><input name="xxzl_staticvalue" type="hidden" value="e74a6147149628593612ef70f53b4887_1714891358403_d143e22624ae4b4b9f0014808ed5108c_1863528222"><input name="xxzl_dynamicvalue" type="hidden" value="a193b1a00a4e5945d95afc688f83859f_1714891786674_138"><input name="xxzl_namespace" type="hidden" value="zhaq_pc"><input name="fingerprint" type="hidden" value="ajcgHPOorHsQdaQuTuzUIjo8W9InfGgZ"><input name="callback" type="hidden" value="SDK_CALLBACK_FUN_1714891786723.successFun"></form>

接下来，我们可以搜索它的target="iframeName"，id="sdkSubmitForm"，class等等。

到响应的 js 中，我们搜素它的username和password字段，如果他多的话，可以。

username:
username :
username=
username =
password:
password :
password=
password =

找到了加密函数。