如何访问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中实现相同的功能？

如果它有比Google Chrome更长的命令历史记录，我也不介意。

那个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();

- stackunderflow

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;
}

您可以使用以下代码将历史记录作为数组访问：

```(await getWebConsolePanel ()). Hud.ui.wrapper.getStore().getState().history.entries;```

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

---

相关链接：

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

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

getHistoryEntries函数定义

- adgitate

---

我想它也被存储在sqlite文件的某个地方，你知道在哪里吗？ - Utopiah

[个人资料文件夹]/storage/permanent/indexeddb+++fx-devtools/idb/[...].sqlite我能够通过在控制台中运行一个独特的命令(console.log("unique1234"))来找到它，然后在我的系统控制台中运行： grep -rlw "unique123" ~/.mozilla/firefox/ - adgitate

谢谢，我知道sqlite文件在哪里，因为我以前用过它，但我的意思是，对不起问题不够清楚，具体在数据库中的哪个位置，比如哪些表格，因为据我所知有相当多的表格，我不确定如何在所有表格上进行全文搜索。 - Utopiah

嗯，这不是一个普通的数据库。从技术上讲，它存储为“object_table”表的“data”字段中的二进制 blob。该数据旨在使用IndexedDB API进行访问（可从浏览器工具箱中使用）。有关Firefox如何访问它，请参见此页面。 - adgitate

你也可以直接导入 async-storage.js 并像 history-persistence 一样使用它：const { require: devtoolsRequire, loader } = ChromeUtils.importESModule( "resource://devtools/shared/loader/Loader.sys.mjs" ); loader.lazyRequireGetter( this, "asyncStorage", "resource://devtools/shared/async-storage.js" ); let webConsoleHistory = await asyncStorage.getItem("webConsoleHistory"); - adgitate

如果您正在尝试在外部程序中重新实现Firefox解码sqlite文件的方式，那么此文件可能会有所帮助。 - adgitate

Answer 2

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

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

- msucan

---

谢谢你的回答！ 对于“显示”，我只得到了“/* */”。 对于“检查”，我得到了一个面板，其中包含预期的历史记录，但我无法复制/粘贴这些元素的文本。 所以我实际上无法获取那个历史记录。 是否有一种方法可以将这些条目打印到控制台或HTML div等中？ - stackunderflow

是的。如果使用 getWebConsoleHistory().toString()，则 Display 选项将为您提供数组元素的字符串化版本。 - msucan

Pastebin链接失效。 - Mathieu CAROFF