Chrome/Firefox Keyboard Shortcuts (for developers)

Use The Keyboard (one of the resources I used)

Written by Eva Dee on (about a 2 minute read).

Navigation

  • ctrl a and ctrl e

For moving to the beginning/end of the line (just like in your terminal/command line!)

  • cmd + l

Bring the URL bar into focus.

  • cmd + enter

Duplicate the current tab (while in URL focus).

  • cmd + shift + t

Open a tab you just closed (a lifesaver for my trigger-happy fingers).

  • cmd + d

Add a bookmark (extra tip: when saving bookmarks to the bookmarks bar, delete all the text meaning only an icon will get displayed => you can cram many more bookmarks into your bookmarks bar 💪).

Dev tools

  • cmd + shift + c

Toggles the inspect element mode (and makes for faster DOM inspection).

  • Toggle the console from dev tools by pressing esc key.

  • cmd+ option + i

To open the dev tools (in the last panel you used).

  • shift + enter

For a multi-line entry (in the Console)

  • cmd + [ and cmd + ]

To focus next/previous panel in the dev tools.

  • cmd + shift + d

Switch back to whatever docking position you last used.

  • cmd + shift + p

Open the Command Menu.

Have you ever wondered how to access console.log values? Wonder no more

Go to the console, right-click on the logged value and click Store as Global Variable.

Now, this value will be stored in a variable temp1 (temp0 in Firefox). Nuts!

The subsequent values (in the same session) will be stored astemp2, temp3...

To get that data onto your clipboard type: copy(temp1) 🤯

Firefox extras

  • cmd + shift + p

To start private browsing.

  • cmd + k

Move focus to the Search bar.

  • cmd + up/down arrow

Go to the top/bottom of a webpage.