DEV Community

Cover image for How to Use the Web Console Helpers Commands in Firefox Developer Edition
Jaden Concord
Jaden Concord

Posted on

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);
Enter fullscreen mode Exit fullscreen mode




$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

Discussion (0)