谷歌浏览器调试工具

时间:2021-05-05 21:06:13

一.总录

  1. 箭头:用来选择所需要的HTML元素,通过HTML元素定位到Elements中的对应代码。
  2. 切换:用来在手机模式和电脑模式之间做切换的。
  3. Elements:主要用来查看最终渲染情况,CSS样式的修改和绑定事件的定位。
    • left:结构面板。显示的是渲染出来页面的最终代码,包括JS渲染在内。
    • style:添加修改样式和类。模拟元素的hover等属性的操作。
    • computed:模型最后的计算情况与应用到的样式,在上面可以很容易直观修改盒子模型的参数。
    • events:获取选择元素的对应绑定事件的执行为之和触发的事件情况。
    • dom:断点审查情况,这个属性不常用。
    • properties:对应选中的元素调用到JS底层的对象情况,这个属性基本没有使用。
  4. Console调试台:主要是用来打印输出内容,获取报错信息,页面调试内容(仅用于对在window对象中存在的对象或者变量,函数才可以使用)。
    • 打印输出内容
    • 获取报错信息
    • 页面调试内容
  5. Source源码界面:里面呈现的代码都是原文件的代码,主要的用途是用来对代码进行断点调试和代码测试。
    • 主要的作用就是用来选择查看文件和添加一些测试脚本功能。
    • 相当于是一个视图的功能,用来审查代码用的。
    • 用来打印和跟踪元素。
  6. netWork:主要是查看网络环境包括报头和返回数据等参数。
    • 请求的展示快照
    • 过滤请求的类型
    • 查看各个请求的发送时间,完成时间的一个总的概况,主要是用来全局分析用的
    • 各个请求的详情
  7. Performance:主要是用来查看JS计算性能相关的,一般如果是单纯的页面不包含canvas,大数据渲染等等的,一般是不需要使用到的。
    • 性能分析火焰图
  8. Memory:记录内存的情况。
    • 内存堆栈快照:查看当前的各项资源的占用情况与内存的一个比例
    • 动态监控从start启动之后内存的一个占用情况
    • 通过一个时间轴图来动态监控占用情况
  9. Application:记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息。
    • 查看存储的内容的,里面比较常用的localStorage,sessionStorage
  10. security:页面安全方面的信息。
    • 判断当前页面中是否使用了有效的HTTPS证书。
  11. audits:FQ,具体是用来做手机web app优化的。