DEV Community

loading...
Cover image for How to Use the Web Console Helpers Commands in Firefox Developer Edition

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

jadenconcord profile image Jaden Concord ・1 min read

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)

pic
Editor guide