一些关于 Chrome Console 调试工具的资源（Nodejs开发者也适用）

一些关于 Chrome Console 调试工具的资源（Nodejs开发者也适用）

昨天看了个幻灯片 [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 代码… 然后开心了


2 回复

一些关于 Chrome Console 调试工具的资源（Node.js 开发者也适用）

昨天看了一个幻灯片《Browser Developer Tools Secrets》，发现里面介绍了很多我之前未曾使用过的调试工具，觉得非常新奇。

使用 console.table 打印表格

console.table 可以用来将数组或对象以表格形式输出到控制台。这对于展示数据结构特别有用。

// 示例 1: 数组
var data = [
    ["Andi", "Smith", "M"],
    ["Amy", "Smith", "F"]
];
console.table(data);

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

使用 console.trace 打印调用栈

console.trace() 可以帮助你查看当前函数的调用栈，这对于调试复杂的应用程序非常有帮助。

function a() {
    b();
}

function b() {
    console.trace();
}

a();

运行上述代码时，控制台会显示从 a() 到 b() 的调用路径。

使用 monitorEvents 监视元素事件

monitorEvents 可以让你监视某个DOM元素的所有事件，这对调试DOM交互非常有用。

let elem = document.querySelector('button');
monitorEvents(elem);

这段代码会让控制台打印出按钮上发生的每一个事件，如点击、鼠标移入等。

使用 console.log 打印带样式的消息

console.log 不仅可以打印纯文本，还可以通过格式化字符串来添加CSS样式。

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

以上代码会在控制台中打印带有橙色背景和蓝色字体的消息。

更多资源

更多关于Chrome和Firebug控制台API的信息可以在以下链接找到：

此外，还有一些其他资源推荐：

最后，虽然现在主要讨论的是浏览器端的调试工具，但未来某个项目搞定之后，我们也可以直接使用Chrome DevTools来调试Node.js代码。


对于“一些关于 Chrome Console 调试工具的资源（Nodejs开发者也适用）”这个主题，虽然大部分调试工具主要针对浏览器环境，但Node.js开发者也可以通过一些方法来利用这些工具。例如，你可以使用chrome-remote-interface库来远程连接到Chrome DevTools，从而直接在浏览器中调试Node.js应用。

示例代码

const chrome = require('chrome-remote-interface');

(async function() {
    const client = await chrome();
    
    // 启用所需的功能
    await client.Page.enable();
    await client.Runtime.enable();
    
    // 设置断点并运行代码
    await client.Debugger.setBreakpointByUrl({lineNumber: 0, url: 'file:///path/to/your/nodejs/app.js'});
    await client.Runtime.evaluate({expression: 'console.log("Hello from Chrome DevTools!")'});

    // 断点触发时的操作
    client.Debugger.onPaused((event) => {
        console.log('Paused at line:', event.location.lineNumber);
        // 继续执行或单步执行等操作
    });

    // 完成调试后关闭客户端
    await client.close();
})();

这段代码展示了如何使用chrome-remote-interface库来启用Chrome DevTools的页面和运行时功能，并设置一个断点在指定的文件和行号。当断点被触发时，会打印出当前的行号。最后，记得关闭客户端以结束调试会话。

解释

  • chrome-remote-interface允许Node.js程序与Chrome DevTools进行通信。
  • 通过Debugger.setBreakpointByUrl方法可以在特定的URL和行号处设置断点。
  • Runtime.evaluate用于执行JavaScript表达式。
  • 通过监听Debugger.paused事件，可以捕获断点触发时的情况，便于进一步分析。

这使得Node.js开发者能够利用强大的浏览器调试工具来帮助开发和调试应用。

回到顶部