console.dirの使い方
console.dirを使うと、ブラウザのコンソール上に配列やオブジェクトの中身を階層的に表示することができます。
console.dirとは
console.dirは、スクリプト上に記述して使います。以下は、ブラウザのコンソール上で配列の中身を表示する時の例です。
let x = [["○","△","×"], ["□","□","□"], ["×","△","○"]]; console.dir(x);
ブラウザでF12キーを押してコンソールを選択すると、以下のように表示されます。
上記はFirefoxの例ですが、Google ChromeやMicrosoft Edgeでも使い方や表示はほとんど同じです。
document.writeやalertでも、ブラウザ上に「○,△,×,□,□,□,×,△,○」のように羅列して表示させることは可能です。console.dirを使うと、ブラウザの表示に影響がないコンソールへ階層的に表示が可能になります。また、console.dirはコンソール上で直に入力しても動作します。
関数での利用
関数での利用例です。
function func1() { alert("テストです"); } console.dir(func1);
上記は、コンソールで以下のように表示されます。
プロパティが確認できます。
オブジェクトでの利用
オブジェクトでの利用例です。
const yamada = { address: "Tokyo", birthday: 2001 }; console.dir(yamada);
上記は、コンソールで以下のように表示されます。
各プロパティの値が確認できます。
次は、コンストラクタ関数を使った場合の利用例です。
function Peaple(address,birthday) { this.address = address; this.birthday = birthday; } const suzuki = new Peaple("Kyoto",1999); console.dir(Peaple); console.dir(suzuki);
上記は、コンソールで以下のように表示されます。
同様に、プロパティの値が確認できます。
DOMでの利用
DOMでの利用例です。
<p id ="dom-test">これはテストです。</p> <script> const x = document.querySelector("#dom-test"); console.dir(x); </script>
上記は、コンソールで以下のように表示されます。
dom-testで使えるプロパティやメソッドが確認できます。例えばinnerHTMLでは、「これはテストです。」と文字列が確認できます。
クロージャでの利用
クロージャでの利用例です。
function func1(x) { function func2(y) { return x + y; } return func2; } let closure1 = func1(10); console.dir(closure1);
上記は、コンソールで以下のように表示されます。
closure1が関数func1ではなく、func2であることが確認できます。これは、クロージャがx = 10の状態で関数func2を使えることを示しています。
console.logとの違い
console.log(func1)などで関数を表示すると、Microsoft Edgeでは関数自体が表示されます。console.dirを使えば、階層構造的にオブジェクトのプロパティを確認できます。
このように、console.logを使うとGoogle ChromeやMicrosoft Edgeでは関数や要素などをそのまま表示することがあります。
つまり、プロパティなどを確認したい場合はconsole.dirを使うのがお薦めです。