Chrome浏览器调试工具

审查元素 - element

• 查看页面源代码，查看页面动态改变的元素
• 修改元素样式
• 修改元素属性、内容
• 编辑整段的HTML代码
• 查看DOM绑定的事件

网络监听 - network

• 查看是否继续监听网络

高亮状态时刷新页面，会把内容区清空掉，重新请求一次

网络监听打开状态.png

关闭状态下刷新页面，就不会继续监听页面了，会保持上一次监听的状态。

网络监听关闭状态.png

• 清空内容

  
  image.png

• filter切换
  高亮状态下显示

  
  filter高亮.png

置灰状态下不显示

filter置灰.png

• 时间轴切换
  高亮状态下时间轴显示

  
  时间轴高亮.png

置灰状态下时间轴不显示

时间轴置灰.png

• 搜索功能
  按字段搜索

  
  字段.png

按功能类型搜索

功能类型.png

• 时间轴
  当前每一个时间段所做的事情

  
  时间轴.png

• 请求list一览
  name: 名称
  status：状态码
  type：类型
  initiator：当前的请求是哪一行触发
  size：请求文件的大小
  time：请求事件
  waterfall：时间轴线

  
  image.png

• XHR请求

  
  image.png

静态资源 Sources

静态资源.png

• 格式化代码

  
  格式化代码.png

• 查找文件
  ctrl + o

  
  查看文件.png

控制台 console

打印不同的日志信息，用于程序追踪

控制台.png

• 动态执行代码

  
  动态执行.png

本地存储 localstorage

本地存储.png

关于cookie、storage的用法和区别，可以查看这篇文章

• cookie localStorage sessionStorage小结
  

---

断点调试

有一句话是这么说的：程序是调试出来的，课件断点调试的重要性

断点调试.png