如何访问 Firefox Web 控制台命令历史记录？

Question

在 Google Chrome 开发工具中访问最后 30 个（！）javascript 控制台命令相当容易：

取消对接开发工具并按其中的

Ctrl

+

Shift

+

I

来检查开发工具本身。

在新的开发工具窗口中，在控制台中键入以下命令：

> location.origin
"chrome-devtools://devtools"
> JSON.parse(localStorage.consoleHistory).join('\n')
"inp.style.backgroundColor = "rgb(250, 0, 250)"
inp.style.backgroundColor = "rgb(250, 255, 250)"
...
inp.style.backgroundSize
inp.style.backgroundColor"
> JSON.parse(localStorage.consoleHistory).length
30

我怎样才能在 Firefox 中做同样的事情？

我不介意它的命令历史记录比谷歌浏览器更长。

pastebin 的答案只适用于一天。所以又来了，谢谢@msucan！

function getWebConsolePanel(tab) {
    var gDevTools = Cu.import("resource:///modules/devtools/gDevTools.jsm", {})\
.gDevTools;
    var tools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).dev\
tools;
    var target = tools.TargetFactory.forTab(tab || gBrowser.selectedTab);
    var toolbox = gDevTools.getToolbox(target);
    var panel = toolbox.getPanel("webconsole");
    return panel;
}

getWebConsolePanel();

Answer 1

根据@msucan的回答更新了说明

1. 按 F12 打开 Web 控制台
2. 打开开发者工具设置（F1）
3. 勾选“启用浏览器chrome和附加调试工具箱”和“启用远程调试”
4. 打开 浏览器工具箱 (

   Ctrl-Alt-Shift-I

   ) 并单击确定。
5. 复制/粘贴此代码：

async function getWebConsolePanel(tab) {
  const { require } = ChromeUtils.import("resource://devtools/shared/loader/Loader.jsm");
  const devtools = require("devtools/client/framework/devtools").gDevTools;
  var toolbox = await devtools.getToolboxForTab(tab || gBrowser.selectedTab);
  var panel = toolbox.getPanel("webconsole");
  return panel;
}

6. 然后您可以使用以下方式将历史记录作为数组访问

   • (await getWebConsolePanel()).hud.ui.wrapper.getStore().getState().history.entries;

（注意：需要在打开的选项卡上打开 Web 控制台）

---

相关链接：

gDevTools 现在是一个 commonjs 模块。 bugzilla 讨论

如何从控制台面板获取历史记录

getHistoryEntries函数定义

Answer 2

1. 按F12打开开发者工具箱（例如Web控制台），然后
2. 切换到选项面板。
3. 启用 Chrome 调试。
4. 打开便签本 (Shift-F4)。
5. 复制/粘贴此代码：https://pastebin.mozilla.org/3757211
6. 转到环境>浏览器。
7. 选择“执行”>“显示”或“检查”。

现在您将看到当前所选选项卡的 Web 控制台历史记录。