Chrome调试中的奇技淫巧

网上有关Chrome调试的文章一搜一大堆，本文主要记录一下自己平时经常用并且又比较冷门的一些技巧。

打开Chrome调试工具

　　1、打开控制台的情况下，长按页面的“刷新”按钮可以选择按何种方式刷新（有正常重新加载、硬性重新加载、清空缓存硬性重新加载三种）;

Element

1、选中一个Dom元素之后，可以添加属性（enter）、修改Dom节点（F2）、删除Dom节点（delete）、toggle 元素的 visibility 属性（h）;

2、可以拖拽节点, 调整Dom顺序，也可以直接拖拽节点到编辑器（相当于复制粘贴）;

3、在右侧event listeners中可以看到各事件的handler是处理函数, 右键可以看到这个函数定义的位置, 不过一般 js 库绑定事件会包一层, 所以这里很难找到对应handler;

4、shift+click可以切换颜色显示格式;

Console

1、控制台输入代码，如果想取dom元素，可以使用类似$('body')的方法，$(selector)即使当前页面没有加载jQuery，你也依然可以使用$和$$函数来选取元素，实际上，这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装，$用于选取单个元素，$$则用于选取多个，除了$_，你还可以使用$0,$1,$2,$3,$4这5个变量来引用最近选取过的5个DOM元素;

Source

1、在source面板ctrl+p输入文件名可跳转到指定的文件;

2、ctrl+G ：引号后面输入行号回车即可跳转到指定行;

3、在文件中ctrl+鼠标点击可以实现多个位置一起输入;

4、按下Ctrl + D，当前选中的单词的下一个匹配也会被选中，有利于你同时对它们进行编辑;

5、Source面板下的文件是可以修改并且支持版本回退的，打开一个文件，进行编辑，保存，右键打开Local Modifications，你可以看到保存记录，你可以选择回退，到某个时间点，你也可以另存为;

6、Source下的Snippets，可以让你保存小段的脚本或是你在浏览器中调试时经常用到的代码，可以在Source面板里创建、存储和运行这些Snippets;

7、在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信息时比较有用;

Network

1、network面板上按住shift然后鼠标移动到指定资源上可以查看该资源的请求发起者（绿）和依赖资源（红）;

Timeline

Profiles

Application

Security

注 ： 控制台调试js每次都跳到别的文件，原因是控制台设置中设置了enable js source map

待更新ing...