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

  • 相关阅读:
    万恶之源-03-基本数据类型(int, bool, str)
    万恶之源- 02 运算符和编码
    MSDN地址,记录下来,以防以后使用
    ER图与UML图
    js清空页面控件值
    JQuery一句话实现全选/反选
    jQuery判断checkbox是否选中的3种方法
    未能加载文件或程序集“”或它的某一个依赖项。系统找不到指定的文件
    关于Resharper的使用经验
    24种设计模式的体验
  • 原文地址:https://www.cnblogs.com/kevin2chen/p/6627913.html
Copyright © 2020-2023  润新知