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"; copy(test);
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.
