资源面板

这个简单.. 主要就是看 网页所有 加载的资源列表.

还有cookie和local storage 、SESSION 等本地存储信息,在这里,我们可以自由地修改、增加、删除本地存储。

主要就是进行js代码调试的

JS 调试

断点简介

js文件里 行号之前. 单击就能设置/取消断点. 设置断点后是不用刷新网页. 实时生效的. 只要触发了某个事件.执行了包含断点的那个函数就会进入断点调试.

断点状态:

  • 启用 高亮
  • 禁用 灰色

打开一个js文件.

断点不是随便设置的.

错误断点设置

比如有个 拖动条的函数. 你在这函数里面 设置断点. 因为你没有拖动 拖动条 根本执行这个函数啊 也就没有所谓的停止了..

正确断点设置

一个 点击大类过滤处 对应标签文章的函数. 里面设置一个断点. 点击某大类 . 这时候

js执行到断点处那行 会停止执行. 并且等待你的命令.

断点调试面板

左下角的 {} 可以帮你格式化代码. 也就是那种压缩成一行的文件.可以直接帮你解压.变得非常易读.

右边会显示调试面板.

  • 停止调试.
  • 不跳入函数 继续执行下一行代码
  • 跳入到函数中
  • 从函数中跳出
  • 禁用所有断点.不进行任何调试
  • 程序运行异常是否中断开关.

⌃+G → 输入行号 → 会快速跳转到该行.

按 F10 可以一步一步的走下去.

直接在js文件 元素处停留可以显示 这个元素的所有信息

Breakpoints

运行某断点会自动高亮

Scope:

列出了 断点处的 私有(Local)和公有(Global)变量信息 这样就可以知道 js执行状态.

Watch Expression

给目前的断点 添加表达式. 使得每次断点玩下走一步 都会执行你写的js代码. 这个 很可能导致你的代码被 重复执行 所以建议 一次性的输出 当前断点处的信息

Event Listener

这里几乎可以监听所有类型的事件. 功能大.类型丰富.