Chrome DevTools是否支持类似Firefox的可展开console.log调试输出？

Hey there! Good news—Chrome DevTools absolutely supports expanding DOM elements to view childNodes, textContent, and all those detailed properties you're used to in Firefox. Let me walk you through how it works:

默认行为（直接可用） #

When you use console.log() to print a DOM element directly (e.g., console.log(document.getElementById('my-element'))), Chrome will automatically render it as a collapsible node. Just click the small arrow next to the element in the Console, and you'll see a full tree of childNodes, plus all properties like textContent, className, attributes, and more.

如果没看到可展开节点？检查这些设置 #

If you're not seeing the expandable view, double-check these quick settings:

• Open the Console panel's settings (click the gear icon in the top-right corner of the Console)
• Make sure "Show DOM nodes" is checked—this ensures DOM elements are rendered as interactive nodes instead of plain text
• Optional: Enable "Preserve log" if you want to keep your debug logs when reloading the page, so you don't lose the element you're trying to inspect

进阶技巧：console.dir() #

If you want to jump straight to the full property list without the element's visual preview, use console.dir() instead of console.log(). This method is designed specifically to display an object's detailed properties, including all DOM element internals. For example:

console.dir(document.body);

This will show you a fully expandable list of every property and value for the body element, making it super easy to access textContent, childNodes, and other attributes quickly.

额外小提示 #

Right-click any DOM element entry in the Console and select "Reveal in Elements panel"—this will instantly jump you to the Elements tab with that element selected, perfect for deeper inspection or editing.

内容的提问来源于stack exchange，提问作者kdc