console.dirの使い方/JavaScript

console.dirを使うと、ブラウザのコンソール上に配列やオブジェクトの中身を階層的に表示する事が出来ます。

console.dirとは

 console.dirは、スクリプト上に記述して使います。以下は、ブラウザのコンソール上で配列の中身を表示する時の例です。

【配列に対するconsole.dir利用例】
<script>
var x =
 [["○","△","×"],
 ["□","□","□"],
 ["×","△","○"]];
console.dir(x);
</script>

 ブラウザでF12キーを押してコンソールを選択すると、以下のように表示されます。

ブラウザのコンソールに配列の中身を表示させた例

 上記はFireFoxの表示例ですが、Google ChromeやMicrosoft Edgeでも使い方や表示は殆ど同じです。Internet Explorerでも使えますが、先にコンソールを開いておく必要があります。

 document.writeやalertでも、ブラウザ上に「○,△,×,□,□,□,×,△,○」のように羅列して表示させる事は可能です。console.dirを使うと、ブラウザの表示に影響がないコンソールへ階層的に表示が可能になります。又、console.dirはコンソール上で直に入力しても動作します。

関数での利用

 関数での利用例です。

【関数に対するconsole.dir利用例】
<script>
function func1() {
    document.write("テストです");
}

console.dir(func1);
</script>

 上記は、展開すると以下のように表示されます。

ブラウザのコンソールに関数のプロパティを表示させた例

 プロパティが確認出来ます。

オブジェクトでの利用

 オブジェクトでの利用例です。

【オブジェクト(リテラル)に対するconsole.dir利用例】
<script>
var yamada = {
    address: "Tokyo",
    birthday: 2001
};

console.dir(yamada);
</script>

 上記は、展開すると以下のように表示されます。

ブラウザのコンソールにオブジェクトのプロパティを表示させた例

 各プロパティの値が確認出来ます。

 次は、コンストラクタ関数を使った場合の利用例です。

【オブジェクト(コンストラクタ)に対するconsole.dir利用例】
<script>
function Peaple(address,birthday) {
    this.address = address;
    this.birthday = birthday;
}

var suzuki = new Peaple("Kyoto",1999);
console.dir(Peaple);
console.dir(suzuki);
</script>

 上記は、展開すると以下のように表示されます。

ブラウザのコンソールにコンストラクタ関数やオブジェクトのプロパティを表示させた例

 同様に、プロパティの値が確認出来ます。

DOMでの利用

 DOMでの利用例です。

【DOMに対するconsole.dir利用例】
<p id ="dom-test">これはテストです。</p>

<script>
var x = document.getElementById("dom-test");
console.dir(x);
</script>

 上記は、展開すると以下のように表示されます。

ブラウザのコンソールにDOMオブジェクトのプロパティやメソッドを表示させた例

 dom-testで使えるプロパティやメソッドが確認出来ます。例えばinnerHTMLでは、「これはテストです。」と文字列が確認出来ます。

クロージャでの利用

 クロージャでの利用例です。

【クロージャに対するconsole.dir利用例】
<script>
function func1(x) {
    function func2(y) {
        return x + y;
    }
    return func2;
}

var myValue1 = func1(10);
console.dir(myValue1);
</script>

 上記は、展開すると以下のように表示されます。

ブラウザのコンソールにクロージャが利用する関数を表示させた例

 myValue1が関数func1ではなく、func2である事が確認出来ます。これは、クロージャがx = 10の状態で関数func2を使える事を示しています。

console.logとの違い

 var x = 1をconsole.dir(x)で表示すると、Microsoft Edgeではエラーになります。console.logを使えば、値の1が表示されます。

 console.log(func1)等で関数を表示すると、Google ChromeやMicrosoft Edge、Internet Explorerでは関数自体が表示されます。console.dirを使えば、階層構造的にオブジェクトのプロパティを確認出来ます。

関数をconsole.logとconsole.dirで表示させた時の違い

 このため、console.logはメッセージや変数の値を確認する時に使えます。配列やオブジェクト等階層構造として表示が必要な時は、console.dirが使えます。

  • このエントリーをはてなブックマークに追加