zoukankan      html  css  js  c++  java
  • 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 验证一下,罪魁祸首找到了。

  • 相关阅读:
    fullCalendar改造计划之带农历节气节假日的万年历(转)
    Linked List Cycle
    Remove Nth Node From End of List
    Binary Tree Inorder Traversal
    Unique Binary Search Trees
    Binary Tree Level Order Traversal
    Binary Tree Level Order Traversal II
    Plus One
    Remove Duplicates from Sorted List
    Merge Two Sorted Lists
  • 原文地址:https://www.cnblogs.com/kevin2chen/p/6627913.html
Copyright © 2011-2022 走看看