Chrome console tips 系列学习
前言
先发一篇学习摘记。
描述
来自DevTools tips系列文章中摘取的Chrome tips。
只摘取了认为对前端开发效率提升有帮助的部分。
更多更新内容可以去google developers。
console中的’$’
在你还没有在app中定义 $变量的情况下(例如 jQuery)
, $在console中是冗长的函数document.querySelector的一个别名。
但是 $$
能节省更多的时间,因为它不仅仅执行 document.QuerySelectorAll
并且返回的是一个节点的数组,而不是一个Node list
从本质上说:
Array.from(document.querySelectorAll(‘div’)) === $$(‘div’)
$i
引入 chrome 插件
Console Importer
,可以快速的在console中引入和使用npm库。
典型的比如 $i('lodash')
或者 $i('moment')
.
copy 与 Store as global
通过全局的方法copy()在console里copy任何你能拿到的资源
console中打印了一堆数据(例如 你在app中计算出来的一个数组),然后你想对这些数据做一些额外的操作,只需要右击它,并且选择“Store as global variable” (保存为全局变量)这个选项。
结合这两个,就可以不需要去network
复制返回的数据还要自己处理格式。如果有写前端日志打印,就不需要自己去代码里输出手动断点了。
console.table
使用console.table方法将它以一个漂亮的表格的形式打印出来。它不仅仅会根据数组中包含的对象的所有属性,去计算出表中的列名,而且这些列都是可以缩放甚至…可以排序
当列太多的时候,使用第二个参数,传入你想要展示的列对应的名字
监测执行时间
console.time() — 开启一个计时器 console.timeEnd() — 结束计时并且将结果在 console 中打印出来
Snippets
在导航栏里面选中 Snippets 这栏,点击 “New snippet(新建一个代码块)” ,输入你的代码,保存 通过右击菜单或者 [ctrl] + [enter] 快捷键来运行它
一旦设置了一组很棒的代码块,使用
Command Menu
。如果你输入 ! 在它的输入框中,你可以根据名字来选择你的代码块
其它
H健
按一下’h’来轻松隐藏你在元素面板中选择的元素。再次按下’h’可以使它出现。这在某些的时候是很有用的,例如你想截图,但是你又不想里面包含一些敏感信息的情况。
Command (命令) 菜单
在 Chrome 的调试打开的情况下 按下 [ Ctrl]+[Shift]+[P] (or [⌘]+[Shift]+[P] on Mac)
或者
具体内容可以一个个尝试。它可以改变开发者模式外观,切换面板等。
开启command,键入time。可以让Log输出带上时间。