chrome开发者工具用法汇总

• 工具版本：
  chrome：

  
  
  chrome about.png
  
  

  OS：

  
  
  OS about.png
• 打开开发者工具：
  
  打开开发者工具.png
  
  快捷键本来是command+option+l，但是却打开了下载内容页面。用command+option+j打开了开发者工具，这本来是下载内容的快捷键。
• 如何快速查到页面某一部分对应的HTML标签
  
  inspect element.png
  
  先点击开发者工具页左上角的第一个图标（或者用快捷键command+shift+c），然后把要鼠标移到左边页面，Elements页就会跟随鼠标移动，自动高亮html标签。
  值得注意的是，这个before是css的伪元素，为啥出现在html的标签里面？css定义了.ic-share:before，所以在标签里面插入了before。
• 如何快速定位到响应某一事件的js代码？
  有两个方法，一是用performance页：
  
  performance.png

1. 点击performance页左上角的黑色的实心圆点，打开记录功能。这时会弹出新窗口，显示记录的时间。
2. 触发页面的事件，比如点击按钮。
3. 点击新窗口上的stop按钮，中止记录。这时performance页会显示如上图的信息。用双指上下滑动，可以放大缩小时间轴。点击右上角的三个点按钮，打开窗口，在dock side栏，点击第一个图标，开发者工具会变成一个独立窗口。
   
   dock side.png
4. 找到对应的函数调用，在Activity窗口，右侧有js代码的链接。
   
   performance2.png
5. 点击js代码链接，跳转到Sources页。js代码一般会minified，但是基本上不可读。点击窗口下侧Line旁边的{}的Pretty print图标，代码会重新分行。
   
   sources.png

二是用断点：

break.png