在 chrome 中实现 firebug 的 console.table
Implement firebug's console.table in chrome
我正在将各种性能指标记录到控制台(如果存在)。最好将此内容视为表格,FireBug的console.table()
方法效果很好 - 但我的大多数用户都在Chrome中。
console.table()
是一个很好的解决方案,因为我可以获得格式良好的 UI 样式网格,而无需构建和维护专用的 UI 控件。目前,在Chrome中,我只能记录无格式的文本。
或者,如果有一种方法可以在控制台中呈现 HTML 内容,那也可以。我可以将 html 发送到控制台,但它在元素选项卡中呈现为 DOM 内容一样。我知道检查器只是HTML/JS/CSS,所以在技术上是可行的。事实上,当我检查检查员时,我可以做到这一点 - 但这并不能解决现实世界的问题。
现在您可以在Chrome Canary https://plus.google.com/+GoogleChromeDevelopers/posts/j8dMDxqbVv7 中执行此操作
我遇到了同样的问题,并编写了下面的代码。它不像console.table那样功能齐全,它只接受一个记录数组,并且不接受列列表。输出也没有那么好,但对我来说已经足够了。举个例子:
$ console_table([{who:"World",message:"Hello"}
,{who:"My wife",message:"Good Morning!"}])
|who |message |
|World |Hello |
|My wife|Good Morning!|
以及它背后的代码:
// Will be available in the latest Chrome, then I can delete this
function console_table(xs)
{
if (xs.length === 0)
console.log("No data");
else
{
var widths = [];
var cells = [];
for (var i = 0; i <= xs.length; i++)
cells.push([]);
for (var s in xs[0])
{
var len = s.length;
cells[0].push(s);
for (var i = 0; i < xs.length; i++)
{
var ss = "" + xs[i][s];
len = Math.max(len, ss.length);
cells[i+1].push(ss);
}
widths.push(len);
}
var s = "";
for (var x = 0; x < cells.length; x++)
{
for (var y = 0; y < widths.length; y++)
s += "|" + pad(widths[y], cells[x][y]);
s += "|'n";
}
console.log(s);
}
}
function pad(n,s)
{
var res = s;
for (var i = s.length; i < n; i++)
res += " ";
return res;
}
截至今天,它也适用于Chrome 31和Firefox 25。
将
垫移到内部
// Will be available in the latest Chrome, then I can delete this
function console_table(xs)
{
function pad(n,s)
{
var res = s;
for (var i = s.length; i < n; i++)
res += " ";
return res;
}
if (xs.length === 0)
console.log("No data");
else
{
var widths = [];
var cells = [];
for (var i = 0; i <= xs.length; i++)
cells.push([]);
for (var s in xs[0])
{
var len = s.length;
cells[0].push(s);
for (var i = 0; i < xs.length; i++)
{
var ss = "" + xs[i][s];
len = Math.max(len, ss.length);
cells[i+1].push(ss);
}
widths.push(len);
}
var s = "";
for (var x = 0; x < cells.length; x++)
{
for (var y = 0; y < widths.length; y++)
s += "|" + pad(widths[y], cells[x][y]);
s += "|'n";
}
console.log(s);
}
}
相关文章:
- Array.length似乎不起作用;console.log则显示其他情况
- 有没有一种方法可以在控制台关闭的情况下让console.log()在IE中记录消息
- Jquery - table.row(tr) is undefined
- console.log以外的Javascript输出函数
- Console.debug在ie10中不工作
- 如果在代码末尾进行求值,jQuery-console.log将提供空数组
- 为什么生成器中的console.log会按这样的顺序出现
- javascript, ajax, table, colour
- jQuery parent() in table
- async问题,JS Promise无法返回结果,但可以使用console.log
- 谷歌地图:函数返回未定义的值在console.log中运行良好
- 我应该返回一个类似console.log()的方法调用吗
- console.log无法运行Mac OS X
- 如何使console.log可配置
- click-cell.bs.table是如何工作的
- 如何使用console.log语句在Mocha中测试函数
- 在 chrome 中实现 firebug 的 console.table
- 为什么 console.table 在 Firefox 中不起作用
- 如何在 console.table() 中访问嵌套对象属性
- 如何使用console.table()查看store.负载响应