Chrome开发者工具

• 点击F12或右键最下面的检查ctrl+shift+i打开谷歌开发工具
  

  

• 左边第一个点击会出现选择区域，点中它可以查看对应的元素结构和样式，

  
  

• 第二个是PC端和移动端转换调试，

  
  

• 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素 （双击修改）

  
  

• 在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则 （双击修改）

  
  

撤销修改：使用 Ctrl+Z (Windows) 或 Cmd+Z (Mac) 通过 Elements 面板快速撤消对 DOM 或样式所做的细微更改

• 在 Computed 窗格中查看和修改选定元素的框模型。

  
  

• 在Event Listeners看js监听事件

  
  

• Console 面板

  
  
  

  如果想看文档获取元素可以切换成抽屉式导航栏的形式

1. 在 DevTools 处于聚焦状态时按 Esc。

2. 按 Customize and control DevTools 按钮，然后按 Show console。

   
   

此数字表示该消息已重复的次数。

• 在 Sources 面板中设置断点来调试 JavaScript
  在行数上点击某一行需要调试的地方

  
  

• Network 面板测量您的网站网络性能

  
  

Network 面板由五个窗格组成：
Controls。使用这些选项可以控制 Network 面板的外观和功能。
Filters。 使用这些选项可以控制在 Requests Table 中显示哪些资源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时选择多个过滤器。
Overview。 此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起，则说明这些资源被同时检索。
Requests Table。 此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。 提示：右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列。
Summary。 此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间。

Name。资源的名称。
Status。HTTP 状态代码。
Type。已请求资源的 MIME 类型。
Initiator。发起请求的对象或进程。值为以下选项之一：
Parser。Chrome 的 HTML 解析器发起请求。
Redirect。HTTP 重定向发起请求。
Script。脚本发起请求。
Other。某些其他进程或操作发起请求，例如用户通过链接或者在地址栏中输入网址导航到页面。
Size。响应标头（通常为数百字节）加响应正文（由服务器提供）的组合大小。
Time。从请求开始至在响应中接收到最终字节的总持续时间。
Timeline。Timeline 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。
引用原文：https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3