谷歌浏览器开发者工具系列4:自定义代码片段

介绍

Chrome开发者工具中有一个叫做代码段(Snippets)的小功能,它允许开发者在当前的web界面插入自定义的脚本代码。比起直接在控制台打印执行代码来说,这种方式会比较方便。

使用方式

  1. 点击Source面板然后找到Snippets选项(在左侧栏中)。
  2. 选择新建代码片段(New Snippet),或者直接输入名称或者选择之前创建的代码片段。
  3. 右键选择执行(Run)该片段。快捷键(Ctrl/Cmd + Enter)。

snippets - 谷歌浏览器开发者工具系列4:自定义代码片段

示例

下面的代码片段展示了Javascript中的date对象中不同方法的返回值。

Object.getOwnPropertyNames(Date.prototype)
    .filter(name => name.startsWith('to'))
    .map(method => `{method}:{(new Date())[method]()}`);

你可以新建一个名为Javascript Date Methods 的片段,然后把上面的代码复制到片段中去。这段代码之后就可以用到浏览器中了。

其他

这里有很多代码片段的资源。有些代码片段非常实用,例如:
– 打印当前web界面的所有颜色。
– 如果当前界面未引入Jquery,则为其引入。
– 在控制台里面打印所有的全局变量。

发表回复 0