4

It is fairly easy to access the last 30 (!) javascript console commands in Google Chrome devtools:

Undock devtools and press Ctrl+Shift+I in it to inspect devtools itself.

In that new devtools window, type following commands in the console:

> 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

How can I do the equivalent in Firefox?

I wouldn't mind if it had a longer command history than google chrome.

That pastebin answer was only good for a day. So here it is again, thanks @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
  • 953
  • 7
  • 17

2 Answers2

1

Updated instructions based on @msucan's answer

  1. Press F12 to open the web console
  2. Open the Developer Tools Settings (F1)
  3. Check "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging"
  4. Open the Browser Toolbox (Ctrl-Alt-Shift-I) and click Ok.
  5. Copy/paste this code:
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;
}
  1. You can then access the history as an array using
    • (await getWebConsolePanel()).hud.ui.wrapper.getStore().getState().history.entries;

(note: a web console needs to be open on the open tab)

Relevant links:

gDevTools is now a commonjs module. bugzilla discussion

How to get history from console panel

getHistoryEntries function definition

adgitate
  • 11
  • 2
  • I imagine it's also stored somewhere in the sqlite file, any idea where? – Utopiah Dec 16 '22 at 09:42
  • 1
    [profile folder]/storage/permanent/indexeddb+++fx-devtools/idb/[...].sqlite I was able find it by running in a unique command in the console (`console.log("unique1234")`), then in the my system console running: `grep -rlw "unique123" ~/.mozilla/firefox/` – adgitate Dec 18 '22 at 07:34
  • thanks I know where the sqlite file is as I used it in the past but I meant, and apologies for the unclear question, where specifically in the DB, like what tables because AFAIK there are quite a few and I'm not sure how to do FTS across all tables. – Utopiah Dec 19 '22 at 08:03
  • Well, it's not a normal database. Technically it is stored as a binary blob in one of the records of the "data" field of the "object_table" table. The data is designed to be accessed using the [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB). (usable from the Browser Toolbox). See [this page](https://searchfox.org/mozilla-central/source/devtools/shared/async-storage.js) for reference for how Firefox accesses it. – adgitate Dec 20 '22 at 06:23
  • You can also just import async-storage.js and use it like [history-persistence does](https://searchfox.org/mozilla-central/source/devtools/client/webconsole/middleware/history-persistence.js): `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 Dec 20 '22 at 06:26
  • [This file](https://searchfox.org/mozilla-central/source/devtools/server/actors/storage.js) could be helpful if you are trying to reimplement the way Firefox decodes the sqlite file in an external program. – adgitate Dec 20 '22 at 06:44
0
  1. Press F12 to open the developer toolbox (eg. the web console), then
  2. Switch to the Options panel.
  3. Enable chrome debugging.
  4. Open Scratchpad (Shift-F4).
  5. Copy/paste this code: https://pastebin.mozilla.org/3757211
  6. Go to Environment > Browser.
  7. Pick Execute > Display or Inspect.

And now you will see the web console history for the currently selected tab.

msucan
  • 24
  • 2
  • Thanks for your answer! For `Display` I only get `/* */` . For `Inspect` I get a panel with the expected history put I cannot copy/paste those element's text. So I can't really get at that history. Is there a way to print those entries to the console or a HTML div or such? – stackunderflow Dec 11 '13 at 22:30
  • Yes. `getWebConsoleHistory().toString()` then the *Display* option will give you the array elements stringified. – msucan Dec 12 '13 at 12:37
  • 8
    The pastebin link is dead – Mathieu CAROFF Jul 15 '20 at 12:10