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...
- logging the source, e.g.
console.log(myFunc.toString())
- 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
- 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 pastessome 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
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.