DEV Community

Cover image for Writing multi-line code on Chrome DevTools
Altay Karakuş
Altay Karakuş

Posted on

Writing multi-line code on Chrome DevTools

Chrome DevTools Snippets

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.

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay