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输出带上时间。

console.log 加上 css 样式