Javascript, css in browser console
Did you know that with JavaScript, you can use CSS in the console for the browsers such as Chrome and Firefox.
We use the %c prefix to do this.
For example;
console.log('%chello', 'background: red;')Output;
For multiple CSS;
console.log('%chello %cworld', 'background: red;', 'color: red;')Output;
Also, you can do this quickly with the object to css string function developed by me.
(Source: My Github)
const style = ( styles = {} ) => {
let text = '';
for(let key in styles) {
text += key.replace(/([a-z])([A-Z])/g, '$1-$2')
.replace(/([A-Z])([A-Z])/g, '$1-$2')
.toLowerCase() + ':' + styles[key] + ';';
}
return text;
}Usage;
style({ backgroundColor: 'red', color: 'white' })Output;
background-color:red;color:white;Using with console;
console.log('%cHello World', style({ backgroundColor: 'red', color: 'white' }));