Writing multi-line code on Chrome DevTools

One of the most frequently used panels of tools like Chrome DevTools is writing and running code through the console. This panel, which we often use to test a piece of code as well as when we debug, does not seem very practical when it comes to writing multi-line codes, even though it allows it.

To enter multiple lines on the console, simply press shift+enter instead of just enter at the end of the line. You can navigate through your code using the up and down arrow keys. However, sometimes you might lose your progress while navigating this history, especially if you mix up your shortcuts.

There may also be times when you want to paste a code, make changes to it, and run it numerous times. The console is very accessible for this, but there's another panel in DevTools called 'Snippets' that you might have overlooked. Snippets exist in almost every editor and can also be saved in DevTools. They support every feature related to debugging, making them more ideal for storing lengthy lines of code.

Moreover, you can find many useful snippets with a bit of research. You can experiment with these snippets and save the ones you like in DevTools.

To write multi-line code here are the steps:

1. Open Chrome DevTools (right-click anywhere on a webpage and select 'Inspect' or use the shortcut Ctrl+Shift+J for Windows/Linux or Cmd+Option+J for Mac).
2. Go to the 'Sources' tab.
3. On the left pane, click on the '>>' button and select 'Snippets'.
4. Click on 'New snippet'.
5. Give it a name and start writing your code in the editor.
6. Once you're done writing your code, you can run it by clicking the 'Run' button or using the shortcut Ctrl+Enter.

This way, you can write and run multi-line codes easily in the Chrome DevTools console.