一些关于 Chrome Console 调试工具的资源
发布于 2年前 作者 jiyinyiyong 1813 次浏览

昨天看了个幻灯片 [Secrets of the Browser Developer Tools][slide] [slide]: http://www.83rdstasis.net/devtoolsecrets/slides/london-web/

发现一些调试工具都没有用到过, 觉得有点新奇.

下面的代码能在 Chrome Console 里打印表格出来:

var data = [["Andi", "Smith", "M"],["Amy", "Smith", "F"]];
console.table(data);

var data = { "Andi": {
        "surname": "Smith",
        "gender": "M",
        "favfood": "Yorkshire Puddings"
    }, "Amy": {
        "surname": "Smith",
        "gender": "F",
        "favfood": "Curry"
    }};
console.table(data, ["surname", "favfood"]);

Trace 打印代码的调用栈:

console.trace();

可以和 Firebug 一样监视元素所有事件:

monitorEvents(elem);

于是去翻了一下 Chrome 和 Firebug 的文档, Console 的部分 https://developers.google.com/chrome-developer-tools/docs/console-api https://developers.google.com/chrome-developer-tools/docs/console http://getfirebug.com/wiki/index.php/Console_API

另一个算实用的功能是 console.log 还有很多的参数… 比如对 log 内容使用 CSS:

console.log("%cUser %s has %d points", "color:orange; background:blue; font-size: 16pt", 'name', 1);

常用的一些手法可以看这里: http://www.andismith.com/blog/2011/11/25-dev-tool-secrets/ 另外最近有个网站(似乎是幻灯片作者?), 专门搜集调试工具的技巧, 建议围观 :P http://devtoolsecrets.com/

等到哪天某项目搞定了, 用 Chrome DevTools 直接调试 Node 代码… 然后开心了

回到顶部