Setting the text input value of the Firefox developer console?

0

I am currently in the process of moving my web-dev work from classic IDEs to the web browser console. This involves frequent editing of existing source code, which right now means...

  1. logging the source, e.g. console.log(myFunc.toString())
  2. copying the text to the clipboard, which can be done in at least two ways:
    • click RMB on the console message and select Copy Message (unfortunately this also copies some garbage)
    • drag LMB from the top to the bottom of the message and hit Ctrl+C (unfortunately selecting text by dragging is error-prone and overall time-consuming)
    • (blocked) document.execCommand('copy') can only be triggered by click events
  3. pasting the text into the console input

I have ranked my desired workflows:

  • A-tier: I can fill the console input directly by calling a single function, no additional mouse or keyboard interaction, e.g. edit("some text") directly copies and pastes some text
  • B-tier: I can copy some text to the clipboard by calling a single function without DOM changes, only Ctrl+V is necessary for pasting the clipboard content, e.g. copy("some text")
  • C-tier: same as B-tier, but DOM changes are allowed
  • X-tier: anything involving browser extensions to achieve either an A-, B-, or C-tier solution

Lucius

Posted 2019-09-21T10:42:31.097

Reputation: 125

1It's a little bit confusing to me what you actually want to do. What's the reason for logging a function, then copying it and pasting it into the console? Why don't you just copy it from your original source file? Note that the DevTools console is not a replacement for an IDE, because there is no project management, you can only work with JavaScript (no HTML, CSS or backend code) and you can't save the code you've written there (though the DevTools team is currently working on a multi-line editor mode, which may allow loading and saving files at some point). – Sebastian Zartner – 2019-09-21T22:46:52.733

Thanks for the response (and to my other question)! It's not an IDE out of the box, but for a narrow type of project (functional, exploratory) it seems to work really well. My save utility scrapes the window object for my stuff, serializes it, and pushes the whole document to localStorage and my server in less than 20 lines. I can develop and debug in the same window using all browser tools and I can load and edit my projects from any system that supports Firefox dev-tools. Only thing that's kind of annoying is editing existing functions, for the reasons stated in my question. – Lucius – 2019-09-22T07:19:02.393

Answers

1

The A-tier solution cannot be achieved, because this would require that the code entered into the command line is automatically replaced by something else, which is not possible. I.e. there is no built-in functionality for that and extensions currently (as of Firefox 69) don't have access to the command line.

Though copying is easily possible via the copy() command. So, if you want to edit a function in the console, just call copy(myFunc.toString()) and then paste it via Ctrl+V.

Of course, this is somewhat limited, because you will only be able to edit normal global functions, no arrow functions, object methods or similar things.

For real live editing functions, you have to wait for bug 771339 resp. it's superior bug 1559482 to be implemented.

Sebastian Zartner

Posted 2019-09-21T10:42:31.097

Reputation: 697

So the copy solution is the best I can hope for now. It's a huge improvement, thanks! Also that live editing functionality sounds really interesting. – Lucius – 2019-09-23T21:25:25.750

Wow, in retrospect I see how this question is confusing, since I just did not know about the (very transparently named) copy function. I even used it as an example in the B-tier section, just did not know it actually existed. But it does not work in sub-routines for me. Do I have to call copy from the top level? – Lucius – 2019-09-23T21:32:53.380

Yes, you have to call copy() from the top level, because it's not a normal JavaScript function but a command build into the DevTools command line. – Sebastian Zartner – 2019-09-25T21:00:14.770

Asked: 2019-09-21T10:42:31.097

Viewed: 66 times

Active: 2019-09-23T20:11:21.730