谷歌浏览器 开发者工具的使用技巧

谷歌 DevTools（F12）在前端开发中起着重要的作用，使用好它你在开发中将省力很多，那么我记录一下他的一些使用有哪些，可能不全望谅解。

1. Elements 的使用
   1.1、当你鼠标悬浮在某个HTML元素上时，相应的页面会显现元素位置以及宽高和内外边距。
   1.2.、选中（Ctrl+shift+C）某个页面的元素时会看到元素的宽高内外边距；
   1.2.1、在styles中可以看到元素的样式，并对样式进行修改。如：
   1.2.2、删除HTML元素
   方法一：右击元素，在弹框里删除该元素；
   方法二：在Console中输入 $0 选中改元素，用 $0.remove() 删除改元素，如：
   
   1.2.3、
   这个三个的用法：
   :hov 选中元素的状态
   
   勾选相应状态后即可看到相应效果；
   .cls
   
   可以增加一个新的class ，然后用
   
   增加样式规则；
   1.2.4 定位样式锁在的文件（Ctrl+Click）
   
   即可定位到；然后右击当前文件 ——》在弹框中选择 Save as… 。即可保存当前已经修改的文件。
   1.2.5、Ctrl+F 查找某个CSS

2. Console
   2.1、
   
   $_引用上一个在控制台返回的值。
   2.2、shift+enter 实现换行
   2.3、ctrl+l 清空控制台

3. 快捷定位到某个菜单
   Ctrl+Shift+p ——》弹框——》选择相应的菜单项即可显示。

4. Source
   4.1、Ctrl+O 快速查找某个文件
   4.2、js调试 在相应的js文件中打断点，然后 F10或者F8进行调试。
   4.3、ctrl-shift-o 当前文档的属性、functions、classes。
   4.4、ctrl-g 快速定位到某行。
   4.5、Watch Expression
   
   console中的操作可被watch
   
   4.6、XHR/Fetch debugging

5. Debug on DOM modifications
   右击元素——》 选择 break on
   下面是一段英文说明需要自己动手哟！

Right-click an element and enable Break on Subtree Modifications: whenever a script traverses that element children and modifies them, the debugger stops automatically to let you inspect what’s happening.

6. NetWork
   可以看到页面加载耗时时间，还可以选择看XHR、JS、css等。
   
7. Application 是保存 cookie/localStorage/sessionStorage等的数据

本文参考：https://flaviocopes.com/chrome-devtools-tips/#drag-and-drop-in-the-elements-panel