console.dir în JavaScript

Afișare Toate browserele, Node.js

Afișează proprietățile unui obiect; în Node.js poți alege adâncimea, iar în browser vezi elementele DOM ca obiecte.

Sintaxă
console.dir(obiect, optiuni)

Ce face console.dir

În browser, console.log(element) arată un element DOM ca HTML, iar console.dir(element) îl arată ca obiect JavaScript, cu toate proprietățile lui.

În Node.js, console.log afișează obiectele doar până la adâncimea 2; mai jos apare [Object]. console.dir(obiect, { depth: null }) afișează tot obiectul, oricât de adânc. Opțiunea colors: true colorează rezultatul în terminal.

Parametri

Parametru Descriere
obiect Obiectul afișat.
optiuni Opțional, în Node.js: depth, colors, showHidden.

Ce returnează

undefined.

Exemple

Exemplul 1: Obiect adânc în Node.js

const config = { server: { baza: { conexiune: { gazda: "localhost", port: 3306 } } } };

console.log(config);
console.dir(config, { depth: null });

Rezultat

{ server: { baza: { conexiune: [Object] } } }
{
  server: { baza: { conexiune: { gazda: 'localhost', port: 3306 } } }
}

Exemplul 2: Un element DOM

const titlu = document.querySelector("h1");

console.log(titlu);
console.dir(titlu);

Rezultat în browser

<h1 class="titlu">Bun venit</h1>
h1.titlu {accessKey: '', align: '', title: '', lang: '', translate: true, …}

Greșeli frecvente

  • Vezi [Object] în terminal și crezi că datele lipsesc. Sunt acolo, doar că nu sunt afișate; folosește console.dir(x, { depth: null }).

Comenzi înrudite

  • console.log: Afișează texte, numere, tablouri sau obiecte în consolă.
  • console.table: Afișează un tablou sau un obiect ca tabel, cu câte un rând pentru fiecare element.
  • JSON.stringify: Transformă un obiect sau tablou JavaScript în text JSON.