Quick Tip: Cool features of Chromium DevTools

Chromium Developer Tools is a powerful suite with many features you probably didn’t know about. Here are three of them I find very helpful, but not so popular.

DevTools console output with style

When you output to the console, you can also style text. This is done by putting %c sequence before the styled block. There can be more than one such block. Then you pass CSS styles in the following arguments:

console.log("%cHello developers!\n%cThis is a sample message.", "font: bold 14px/1.35 Arial;", "font: normal 12px/1.35 Arial;");

Styling text in Dev Tools

Copy JavaScript content to clipboard

Dev Tools allow you to copy to clipboard the value of a variable. You just have to invoke the copy function:

var test = "Lorem ipsum dolor sit amet enim";

And now you can paste string Lorem ipsum dolor sit amet enim anywhere.

Make the whole website editable

This is not so much a tip regarding console, you can paste the code there. You can allow editing any text on the web page simply setting

document.body.contentEditable = true

Now you will be able to put the cursor inside every text block and modify it as you want.