杂七杂八的chome分享

1. $_

$_ 是对上次执行的结果的引用。

2. $i、fehelper

在 Chrome插件: Console Importer 的帮助之下，你可以快速的在 console 中引入一些 npm 库。
直接运行例如 $i('lodash') 或者 $i('moment') 几秒钟之后，就可以获取到 lodash / momentjs 了。

3. copy(…)

你可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源，包括我们在上一篇中提及的那些变量。例如 copy($_) 或者 copy($0)

4. Store as global

如果你在 console 中打印了一堆数据(例如 App 中计算出来的一个数组),然后你想对这些数据进行额外操作， 例如，使用我们刚刚说的 copy ，那就可以轻松将它转换成一个全局变量：
只需右击，并且选择 Store as global variable (保存为全局变量) 这个选项。

5. 保存(Stack trace)堆栈跟踪

对于排除错误有很大作用

鼠标右键，选择save as ...

6. Snippets

可以执行一段自定义脚本

鼠标右键点击脚本，run运行脚本

7. Run snippets from wherever

[ctrl] + [p] 输入 ! 运行自定义脚本

8. 使用console的实时表达式

眼睛符号，定义实时更新的js表达式

9. 开始使用 Command (命令) 菜单 (如果你还没有用过的话)

有一些 Dev Tools 的功能被深深的隐藏在特别的面板/菜单 中。甚至有一些还隐藏在他们（面板/菜单）下面。这也是为什么 Command 菜单，是在 Dev Tools 中必不可少的一个工具。
如果你使用过 WebStorm 中的 Find Action (查找动作) 或者 Visual Studio Code 中的 Command Palette 那么 (Command 菜单) 也是类似的功能。可以这样调出它：
在 Chrome 的调试打开的情况下:

• 按下 [ Ctrl]+[Shift]+[P] (or [?]+[Shift]+[P] on Mac)
• 或者使用 DevTools 的 dropdown 的 run command

10.截屏，大小通吃

如果你想对某个特别的 DOM 节点进行截图，选中那个节点，打开 Command 菜单并且寻找节点截图的命令。
四种命令截图，输入：

• capture

11.快速切换主题

你是否讨厌突然的强光，并且无法忍受一直看着白光闪闪的屏幕？或者你一直都在黑暗的模式下工作，但突然太阳出来了，照在你的 DevTools 上导致你什么都看不到？
在 Commands菜单中寻找与 theme 相关的选项，以实现在明亮&暗黑两种主题之间的切换。

12.在控制台可以直接使用await，不用非要包裹在async函数中

res = await fetch('http://localhost:5678/getjson');
json = await res.json();

13. queryObjects function 对象查询方法

假如我们有这样一段代码，我们在里面定义了一些对象。
那么特定的时刻，特定的执行上下文中，存在哪些对象呢？

• 例：queryObjects(Person)

14. monitor functions 镜像函数

monitor 是 DevTools 的一个方法, 它能够让你 spy(潜入) 到任何 “function calls(方法的调用)” 中：每当一个 spied 被潜入 的方法运行的时候，console 控制台 会把它的实例打印出来，包含函数名以及调用它的参数。

• 例：monitor(person1.getMessage);person1.greet();

15. monitorEvents function monitorEvents函数

我们讨论了用 monitor 方法来监听函数？你可以使用名为 monitorEvents 的函数，对 events 做一样的事情。

• monitorEvents($0, ‘click’);

bug：使用moment转换字符串时间的时候一定要加上时间格式，在火狐浏览器可能会出现时间时区出险错误

例：moment(‘2019-01-01’, ‘YYYY-MM-DD’).valueOf()

示例代码：归档.zip