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;");
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.
Wow, ostatni trick mnie zaskoczył (i działa to świetnie). Dodałem sobie jako bookmarkleta i zobaczę czy się w praktyce przyda 😉
Hej, dzięki za feedback! 🙂 Ostatnio wpadłem na kilka ciekawych rozwiązań dotyczących integracji swojego debuga z przeglądarką, pewnie napiszę o tym we wrześniu/październiku. Będzie więcej!