console.log?和?console.dir?都是 JavaScript 中用于在瀏覽器控制臺打印信息的方法 ，二者主要有以下區別：
輸出內容和格式
- console.log：主要用于輸出簡單的日志信息，直接打印數據的字符串表示 。對于對象、數組等引用類型，在現代瀏覽器中通常會展開顯示對象的屬性，但本質是顯示其字符串化后的內容 。比如：
const person = { name: 'Alice', age: 30 };
console.log(person);
// 輸出類似 {name: "Alice", age: 30} ，是對象的字符串表示形式
它也支持多參數輸出，會將多個參數連接起來顯示 ，像?console.log('姓名：', person.name, '，年齡：', person.age);?。
- console.dir：專門用于展示對象的結構，以樹形結構的形式輸出對象的所有屬性和方法 ，方便深入查看對象內部細節 。例如：
const person = { name: 'Alice', age: 30 };
console.dir(person);
// 會以更像文件目錄樹的交互列表形式展示對象的屬性和方法，可展開查看詳細內容
不過它僅處理第一個參數，如果傳入多個參數，只會顯示第一個參數對象的結構 。
對 DOM 元素的顯示
- console.log：顯示 DOM 元素的 HTML 結構 。比如?
console.log(document.body);?，會展示?<body>?標簽及其內部包含的 HTML 內容 。 - console.dir：顯示 DOM 對象的屬性 。例如?
console.dir(document.body);?，會列出?document.body?這個 DOM 對象所具有的各種屬性，如?clientHeight、clientWidth?等 。
交互性
- console.log：輸出的信息交互性有限，主要是展示信息，一般不能對輸出內容進行進一步交互操作 。
- console.dir：輸出的對象屬性列表具有可展開性，能像操作文件目錄樹一樣展開或收起屬性，更便于查看和分析對象詳細信息 。
標準性和兼容性
- console.log：是標準的控制臺輸出方法，被所有現代瀏覽器支持 。
- console.dir：屬于非標準特性，雖然在大多數現代瀏覽器中可用，但從規范角度不建議在生產環境中大量使用，不過在調試場景下使用較方便 。
一般來說，如果只是快速查看變量值、簡單輸出信息，使用?console.log?；若要深入分析對象結構，特別是調試 DOM 對象屬性時，console.dir?更合適 。
)
![[ctfshow web入門] web124](http://pic.xiahunao.cn/[ctfshow web入門] web124)
