你所不知道的Chrome调试技巧

Ymc 2019-12-06 21:21:55 8 Page View 3.6'm Read Time 翻译Chrome工具
Chrome我们真的好好利用了么,还是只会看console.log以及查看报错,本文给大家展示别具一格的Chrome开发调试体验!

本文主要记录Chrome日常开发中使用不多,但实用性很高的隐藏buff,整理转载自掘金小册《你所不知道的Chrome调试技巧》

快捷键篇

  1. Command + shift + D 切换开发工具布局
  2. ESC 显示或影藏 Drawer 工具栏
  3. Command + shift + P 打开开发工具的快速定位工具
    1. 键入theme 切换 明、暗两种主题
    2. 键入Drawer 控制Drawer工具栏的的显示或者工具栏
    3. 键入screen 可选择截取当前浏览器页面内容
    4. 键入Live expression 注入JavaScript半持久脚本
  4. show timestamaps 显示打印信息时间戳
  5. h 在elements中键入可显示\隐藏dom节点

控制台shell篇

  1. copy() 可复制开发工具中的变量等内容到剪切板;比如打印了location层级很深的节点可以执行此命令
    image.png
  2. $[num] 如 $0输出选中的第一个dom节点,$1输出第二个
  3. $、$$第一个类似document.QuerySelectorAll如$('div')返回所有div节点,第二个类似Array.from(document.querySelectorAll('div')) === $$('div')
  4. $_、$i(返回上次的引用)、(down第三方module“需要安装对应插件但是自己试了无效”)
  5. console.table()、console.dir()"返回dom中真实对象"、console.time()、console.timeEnd()
  6. console.assert() 答应前先用第一个参数判断是否为真值,是的话再打印后续参数

  7. monitor是 DevTools 的监听方法,用monitor包裹之后能打印方法进行追踪

  8. monitorEvents是监听dom事件方法

network篇

  1. 自定义请求表显示列;如 Method显示列、cache信息等
  2. source - XHR/fetch breakpoint 传统网络断点捕获

Workspace篇

  1. 使用工作空间可以直接修改该本地代码更新到浏览器中,将工程目录放置到source即可(不实用)

奇淫怪技巧

  1. 添加持久化脚本:调试代码可存成代码块 sources -> snippets
    image.png

  2. Custom Formatter/window.devtoolsFormatters 自定义打印输出格式转换器

  3. console.table(await function) 打印promise结果

  4. console.log() 打印带有样式的log 如:console.log('%c this is a message','color:#0f0;')
    image.png

  5. Drawer可显示修改差异 如修改css之后,在Drawer栏目显示change即可对比修改差异

最后

以上小结是看完小册后,让自己眼前一亮或者支持记录的内容,详情可见小册,或者浏览如下地址
Developers.google.com
Google Chrome Developers - YouTube

Bye-bye~

comments