Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
当前回答
选项1
// log-css.js v2
const log = console.log.bind()
const css = (text, options) => {
let cssOptions = ''
for (let prop in options) {
const value = options[prop]
prop = camelCaseToDashCase(prop)
cssOptions += `${prop}: ${value}; `
}
return [`%c${text}`, cssOptions.trim()]
function camelCaseToDashCase(value) {
return value.replace(/[A-Z]/g, matched => `-${matched.toLowerCase()}`)
}
}
例子:
log(...css('Example =P', {
backgroundColor: 'blue',
color: 'white',
// fontFamily: 'Consolas',
fontSize: '25px',
fontWeight: '700',
// lineHeight: '25px',
padding: '7px 7px'
}))
选项2
我现在创建log-css.js https://codepen.io/luis7lobo9b/pen/QWyobwY
// log-css.js v1
const log = console.log.bind();
const css = function(item, color = '#fff', background = 'none', fontSize = '12px', fontWeight = 700, fontFamily) {
return ['%c ' + item + ' ', 'color:' + color + ';background:' + background + ';font-size:' + fontSize + ';font-weight:' + fontWeight + (fontFamily ? ';font-family:' + fontFamily : '')];
};
例子:
log(...css('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', 'rebeccapurple', '#000', '14px'));
其他回答
旧版本的Chrome不允许你让console.log()以编程方式显示特定的颜色,但是调用console.error()会在错误行上放一个红色的X图标,并使文本变成红色,而console.warn()会让你变成黄色!图标。
然后,您可以使用控制台下面的All、Errors、Warnings和Logs按钮筛选控制台条目。
Firebug支持控制台的自定义CSS。从2010年开始,Chrome支持已经添加到Chrome 24。
console.log('%c Oh my heavens! ', 'background: #222; color: #bada55',
'more text');
当%c出现在第一个参数中的任何位置时,下一个参数将用作设置控制台行样式的CSS。进一步的参数被连接起来(一如既往)。
模板系统,有用的,如果你想创建彩色的行文本,而不为每个块创建完整的风格
var tpl = 'background-color:greenyellow; border:3px solid orange; font-size:18px; font-weight: bold;padding:3px 5px;color:';
console.log('%cMagenta %cRed %cBlue', `${tpl} magenta`, `${tpl} Red`,`${tpl} #4274fb`);
我为它创建了一个包。cslog
使用
npm i cslog
像这样使用它
import log from 'cslog'
log.h2("This is heading 2")
log.p("This is colored paragraph")
log.d(person, "Person Info")
你也可以自定义颜色。在这里
选项1
// log-css.js v2
const log = console.log.bind()
const css = (text, options) => {
let cssOptions = ''
for (let prop in options) {
const value = options[prop]
prop = camelCaseToDashCase(prop)
cssOptions += `${prop}: ${value}; `
}
return [`%c${text}`, cssOptions.trim()]
function camelCaseToDashCase(value) {
return value.replace(/[A-Z]/g, matched => `-${matched.toLowerCase()}`)
}
}
例子:
log(...css('Example =P', {
backgroundColor: 'blue',
color: 'white',
// fontFamily: 'Consolas',
fontSize: '25px',
fontWeight: '700',
// lineHeight: '25px',
padding: '7px 7px'
}))
选项2
我现在创建log-css.js https://codepen.io/luis7lobo9b/pen/QWyobwY
// log-css.js v1
const log = console.log.bind();
const css = function(item, color = '#fff', background = 'none', fontSize = '12px', fontWeight = 700, fontFamily) {
return ['%c ' + item + ' ', 'color:' + color + ';background:' + background + ';font-size:' + fontSize + ';font-weight:' + fontWeight + (fontFamily ? ';font-family:' + fontFamily : '')];
};
例子:
log(...css('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', 'rebeccapurple', '#000', '14px'));
我最近想解决一个类似的问题,构造了一个小函数,只对我关心的关键字进行着色,这些关键字很容易通过周围的花括号{keyword}识别。
这招很管用:
var text = 'some text with some {special} formatting on this {keyword} and this {keyword}'
var splitText = text.split(' ');
var cssRules = [];
var styledText = '';
_.each(splitText, (split) => {
if (/^\{/.test(split)) {
cssRules.push('color:blue');
} else {
cssRules.push('color:inherit')
}
styledText += `%c${split} `
});
console.log(styledText , ...cssRules)
从技术上讲,您可以用switch/case语句替换if语句,以允许根据不同的原因使用多种样式