这是我们如何使用颜色登录 chrome 开发工具的示例:
console.log('%c test1 ', 'background: black; color: green')
我想知道我们是否可以同时记录表格和颜色?
根据
Console API,
console.table
函数没有样式功能。
但是,我能够想出一个非常老套的解决方案,将
console.log
语句设计成表格一样。这可能不够好,但制作起来很有趣。
有很多限制,例如无法设置
width
和 height
属性。我的解决方法是用空格填充文本以匹配最长的属性名称/值。
(function() {
function getProperties(obj) {
var props = [];
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
props.push(prop);
}
}
return props;
}
function getLongestTextLength(objArray) {
var longest = 0;
for (var obj of objArray) {
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
var length = Math.max(prop.length, obj[prop].length);
if (length > longest) longest = length;
}
}
}
return longest;
}
console.fancyTable = function(objArray) {
var objProto = objArray[0];
var args = [];
var header = '';
var baseStyles = 'padding: 2px; line-height: 18px;';
var baseBorders = 'border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; '
var headerStyles = baseStyles + baseBorders + 'font-weight: bold; background: lightcoral;';
var lastHeaderStyles = baseStyles + 'font-weight: bold; border: 1px solid black; background: lightcoral;';
var rowStyles = baseStyles + baseBorders + 'background: lightblue;'
var lastRowStyles = baseStyles + 'border: 1px solid black; background: lightblue;'
var props = getProperties(objProto);
var longestTextLength = getLongestTextLength(objArray);
for (var i = 0; i < props.length; i++) {
var prop = props[i];
while (prop.length < longestTextLength) {
prop += ' ';
}
header += '%c' + prop + ' ';
if (i === props.length - 1) {
args.push(lastHeaderStyles);
} else {
args.push(headerStyles);
}
}
for (var i = 0; i < objArray.length; i++) {
var obj = objArray[i];
header += '%c\n';
args.push('');
for (var j = 0; j < props.length; j++) {
var val = obj[props[j]];
while (val.length < longestTextLength) {
val += ' ';
}
header += '%c' + val + ' ';
if (j === props.length - 1) {
args.push(lastRowStyles);
} else {
args.push(rowStyles);
}
}
}
args.unshift(header);
console.log.apply(this, args);
}
})();
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
// create some test objects
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");
var peopleToLog = [john, jane, emily];
console.fancyTable(peopleToLog);
如果可以的话,我会做出一些改进,也许还会发布它以供大家咯咯笑。