chrome devtools的debug相关

搜索
ctrl+p：搜索Sources面板中指定的文件；然后在主窗口文件标签右键选择reveal in navigator可以在目录中显示当前文件。
ctrl+f：搜索devtool主显示窗口所在文件的指定字符；
ctrl+shift+o：搜索所在文件的函数定义或选择器；
ctrl+shift+f：支持大小写和正则，搜索当前页面加载的所有文件中的指定字符。

DOM节点变化时触发断点
具体触发条件可分3种情况：子节点有变化、节点的属性发生变化或这个节点被删除。可以快速找到对应的事件处理函数。

 

条件断点
写一个表达式，表达式为 true 时才触发该断点。

 

在Dev tools中编辑源代码，将chrom当作IDE：
　　1.先将源代码的文件目录添加到chrome的workspace

　　2.将需要编辑的源代码文件映射（在本地资源目录中找到目标文件点右键：map to file system files；在源文件目录找到目标文件，点右键：map to network system）

这样在chrom中编辑过后的代码直接save，就会保存到源文件中，不用再复制了。而且可以修改html文件中的js代码。
如果js代码在html文件中，只能在Elements标签中通过edit as html修改，不能在Sources标签中编辑。
在console标签中也可以通过右键的选项修改元素的属性。

本地修改历史记录
在Chrome devtools中编辑了脚本或者样式，可以Sources目录的文件名上右键选择"Local modifications"来查看修改历史。

调试生产项目时，想刷新后仍继续使用在devtools中编辑过的文件？
chrome没有这项功能，只能变通处理：先在目标js文件运行开始处打断点，刷新，然后再编辑js文件，再ctrl+s，vm会重新编译并运行修改过的文件。 

拦截页面中的请求
网站加载首屏需要20多秒，看chrome的performance没有发现有js在阻塞，站内资源只有几张图片加载失败，莫非原因在这，此时可以用block request url 验证一下，罪魁祸首找到了。