JS逆向加密——Chrome开发者工具详解

Chrome开发者工具面板

 

面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。

这些按钮的功能点如下：

                

• Elements (元素) : 查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
• Console (控制台) : 记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
• Sources (源代码) : 断点调试JS。
• Network (网络) : 从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
• Timeline (时间线) : 记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
• Profiles (文件) :如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
• Application  (应用) : 记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies) .缓存数据、字体、图片、脚本、样式表等。
• Security ( 权限 ): 判断当前网页是否安全。
• Audits : 对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

 

控制台（Console）

查看JS对象的及其属性： 

        

执行JS语句： 

       

 

源代码（Source）

查看文件：在源代码（Source）页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。 

       

添加断点：在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。

右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。

        

中断调试：添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的

也可以在右边的侧栏上查看： 

        

在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

      

 

Network详细介绍

     

那我就按照从左到右的顺序来写啦~

           记录按钮 处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。

          清除按钮 清除当前的网络连接记录信息。（点击一下就能清空）

          捕获截屏 记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取

          过滤器 能够自定义筛选条件，找到自己想要资源信息

  是否保留日志 

   是否进行缓存

       设置模拟限速，如下图所示。

                         

 

请求文件具体说明

点击某个具体请求后的界面，如下图所示：

      

一共分为四个模块：

• Headers ​​​​

       Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

       

• Preview

        预览面板，用于资源的预览。

        

• Response

        响应信息面板包含资源还未进行格式处理的内容

        

• Timing

      资源请求的详细信息花费时间

         

后面碰到什么常用的在更新 。