devtools使用技巧

  1. 通过 console 面板修改页面元素及元素内容
  • 获取元素节点
  • 右键选择 Edit as HTML 或者 Edit Text
  • 修改后的内容会实时反映在页面和 Elements 面板上
  1. inspect() / CTRL + L
  • console 面板使用 inspect(elem) 跳转到 elements 面板的指定元素节点

    inspect($('#header'))
    inspect(document.getElementById('header'))
    
  • 使用 ctrl + l 清空当前的的 console 面板

  1. 使用 ctrl + P / ctrl + O 来查找需要的文件,ctrl + g来确定当前需要查找文件的位置

  2. 使用alt + -alt + =来在上一个鼠标位置或下一个鼠标位置进行跳转

  3. 使用alt + 鼠标左键click,可以在文件中创建多个编辑点

  4. 使用alt + shift + 鼠标左键click,可以创造一个矩形选区

  5. Elements面板右侧的Event Listeners选项卡中,在绑定的事件上右键可以跳转到相应的js代码上

  6. 使用 console.trace() 可以追踪代码执行过程中的栈信息

  7. 使用 console.time('sign string')console.timeEnd('sign string') 获取中间的间隔时间

  8. 手动阻塞 URL 的加载,用于测试资源获取失败的页面效果。在network面板上点击你需要阻塞的那个文件,然后右键选择Block Request URL,然后刷新就可以看到效果了