陌上寒

陌上寒个人博客

chome浏览器-杂项

杂七杂八的chome分享

《chome浏览器-杂项》

1. $_

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

2. $i、fehelper

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

3. copy(…)

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

4. Store as global

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

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

对于排除错误有很大作用

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

6. Snippets

可以执行一段自定义脚本

鼠标右键点击脚本,run运行脚本
《chome浏览器-杂项》

7. Run snippets from wherever

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

8. 使用console的实时表达式

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

《chome浏览器-杂项》

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)
  • 或者使用 DevToolsdropdownrun 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 镜像函数

monitorDevTools 的一个方法, 它能够让你 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

发表评论

电子邮件地址不会被公开。 必填项已用*标注