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 验证一下,罪魁祸首找到了。

原文地址:https://www.cnblogs.com/kevin2chen/p/6627913.html