Anwar Hussain

Anwar Hussain

Front-End Web Developer - HTML5, CSS3, JavaScript, React, VueJS, Git

Write JavaScript Relentlessly on Chrome Console

It’s our daily job to write JavaScript on browser console whether to test something, practice or DOM manipulating. Most of the cases we must write several line of codes. But in Chrome console we do it very hard way. Every time you need to start a new line you must press Shift + Enter. In every code editor, we are used to typing and press Enter when a new line is desired. But Chrome console is not a code editor and it’s not something you can forget while writing code at the speed of flash. Pressing only Enter in the middle of an unfinished code block result in errors in the console. Luckily you don’t lose the unfinished code, it can be restored by pressing up arrow key.

I don’t know about you, but it’s very annoying to me. I often forget to press Shift + Enter. I am also used to run my JavaScript code by pressing Ctrl/Command + Enter in many online/offline code editors, so I prefer pressing Enter for a new line. How do I do it? Well, this is the topic on today’s blog.

There are so many hidden features in Chrome: snippets is one of them. Open Sources tab from your Dev Tools -> Click double arrow ( >> ) from the sidebar panel -> Select Snippets -> Click + New snippet. Give it a name and start typing in the textarea on the right. It’s like any other code editor, you can find shortcut keys for formatting codes and so on. Most fun fact is: you never lose your code from the browser; you can save it and reuse anytime from any Tab/Window.

sources-tab

chrome-snippets

Thanks for reading!

If you have enjoyed this post and have some feelings to share, please comment below or drop few lines!

Leave a Reply