How to Use the Web Console Helpers Commands in Firefox Developer Edition

I recently discovered special web console commands in Firefox Developer Edition. If you are not using Firefox Developer edition I highly recommend using it because of all the useful tools.

These are the top ones from the Mozilla docs.

Dollar sign selectors

I previously wrote an article about using dollar sign variable to make a shortcut to the document.querySelector. Now, this command is built into the JS console. Obviously, you need to declare the $ if you want to use it in your app.
If you do that, you need to put .bind(document); after the document.querySelector like,

let $ = document.querySelector.bind(document);

$0

$0 selects the element currently selected by the inspector tool.

copy()

It copies the input text to clipboard. Extremely useful when generating text in the console.

inspect($(query))

Select an element to view in the Inspector tab. Allows keyboard only navigation of the nodes.

More tools here