DevToolのConsoleを使い倒すテクニック集

Consoleとは

Windowインタフェースのプロパティですが、このインタフェースは特別に省略することが許されているので

window.console.log("hoge");

or

console.log("hoge")

と、どっちの書き方でもブラウザでは出力することができます。

また、これらのテクニックはブラウザのConsoleに限らず使えるテクニックなので、ぜひご覧ください。

Consoleに出力させるためのテクニック

コマンドラインAPIを使う

コマンドラインAPIを使うことによって、面倒な作業を大幅に改善することができます。

さっそく、見ていきましょう。

1. $_: 直前に評価された式の値を返す

直前の結果を使いたいときに使用します。

2. $0~$4: Elementsパネル内で調査した最後5つのDOM要素 or Profilesパネルで選択した最後の5つのJavascriptヒープオブジェクト

3. $(selector): 指定されたCSSセレクタを含む最初のDOM要素

よく使うdocument.querySelector()のエイリアスです。最初のマッチした要素が返されます。

以下のように取得をすることができます。

var image = $('img');

もちろん、要素の属性は、取得したオブジェクトのプロパティも参照することができます。

var image = $('img');
image.src

4. $$(selector): 指定されたCSSセレクタを含むDOM要素

マッチするすべての要素を取得でき、配列で返ってきます。

const images = $$('img');

5. clear(): コンソールの履歴をクリア

コンソールをクリアします。

clear()

6. copy(object): オブジェクトをクリップボードにコピー

クリップボードにコピーできます。

copy(window)

7. debug(function): 指定された関数が呼び出されるとSourcesパネル上でデバッガーでデバッグする

関数が呼び出されるとSourceパネルで、該当関数が表示されてデバックをすることができます。

以下のような関数を定義したとしましょう。

function divide( a, b ) {
   return a / b 
}

そして、この関数divideを監視します。

debug(divide);

そして実際に呼び出して見ると、出力を確認することがでkみあす。

divide(2.,3);

すると以下のようになります。

Sourceパネルの使い方までは本記事では解説しないので他をご覧ください。

8. dir(object): 指定されたオブジェクトのプロパティをオブジェクトスタイルのリストで表示する

dir(document.body);

差異を確認するために以下のように実行してみます。

document.body

9. dirxml(object): 指定されたオブジェクトのXML表現をElementsタブのように出力する

dirの結果よりXMLのように出力したものです。ツリー構造が非常に分かりやすいです。

10. inspect(object/function): 指定されたオブジェクトをElementsパネルで選択された状態で開く

例えば以下のようなスクリプトを実行すると以下のようになります。

inspect(document.body);

以下のような画面が開きます。

11. getEventListeners(object): オブジェクトのイベントリスターを取得する

試しに何かimg要素を取得してみます。

const image = $('img');

そして試しにEvent Listnerを追加します。

getEventListener(image);

{}

何もありませんでした。

ここでEvent Listnerを追加します。

const image = $('img');

image.addEventListener("hover"', function(){window.alert("Hi, you`ve passed over me:)"});o

そして再度、実行してみましょう。

getEventListener(image);

するて出力は以下のようになります。

{
  "hover": [
    {
      "useCapture": false,
      "passive": false,
      "once": false,
      "type": "hover"
    }
  ]
}

本記事ではEvent Listenerのadd, removeなどは解説しませんが、Event Listenerが参照できていることが分かります。

12. values(object),keys(object)`: 指定されたオブジェクトに属しているプロパティの値とKeyを取得

これはObjectの値を、またはKeyをみたい時に有効です。

const data = {"name": "Kekesan", "sex": "male"};
keys(data);
values(data);

13. monitor(function)とunmonitor(function): 関数を監視する

関数が呼び出されたら、呼ばれた関数と引数を出力します。

以下のように関数を定義します。

function sum(a,b ) {
   return a + b
}

そして、この関数sumを監視します。

monitor(sum);

実際に呼び出して見ると以下のように出力されます。

14. monitorEvents(object[, events])とunmonitorEvents(object[, events])

特定のオブジェクトのイベントを監視することができます。

また特定のイベントも監視することができて、デバッグなどには便利だと思います。

全イベントを監視するには以下のようにします。

monitorEvents(window);

例えばwindowのリサイズを監視してみようと思います。

monitorEvents(window, "resize");

もちろん、複数のイベントも監視できます。

monitorEvents(window, ["resize", "scroll"]);

15. profile([name))とprofileEnd([name])

Javascript CPU プロファイリングセッションを開始し、終わります。

また、結果はProfileパネルに出力をします。

これは、Consoleに直接関係ないので省略します。

16. table (data[, colums])

オブジェクトのプロパティをテーブル形式で出力することができます。

const data = {"name": "Kekesan", "sex": "male"};
table(data);

console.logに以外にも有用なテクニック

実際、先ほどのtableなどにconsole.をつければ使うことができますが、一応解説します。

1. console.log: コンソールに出力

もっともよく使われて、初心者の方は例えば以下のようにして結果を確認しているのではないでしょうか。

const hoge = 1;
console.log(hoge);

便利です。

文字列などももちろん出力することができます。

console.log("hoge")

1.1 複数のオブジェクトをまとめて出力する

以下のように出力をします。

const hoge = {"hoge": "piyo"};
const fuga = {"fugn": hogu");

console.log({hoge, fuga})

1.2 CSSスタイルを適用して出力をする

以下のように%cを使って出力をすることができます。

console.log('%c My Friends`, `color: red`)

2. console.error: コンソールにエラーを出力

エラーを出力することができます。赤いので目立つでしょう。

console.error("hoge")

3. console.info: コンソールに情報を出力

「情報」と「データ」は大きく違います。

情報は0と1の羅列それ自体でありますが、データとは意味を含めた概念です。

ここでinfoとしているのは、フローである値がエラーかも、正常なのかも、もしくは別の特徴量を持つなど、何もわからない状態で、ただ出力したいときに、このconsole.infoを使うことができます。

console.info("hoge");

4. console.warn: コンソールに警告を出力

何かしら注意に値する出力を出します。

console.warn("hoge");

5. console.count: 呼び出された回数を出力する

カウントアップで呼び出された回数を出力してくれます。

console.count("hoge");

またカウントをリセットしたいときはcountResetメソッドをつかうと初期化をすることができます。

console.countReset("hoge");

6. console.timeとconsole.timeEnd: 実行時間を計測できる

console.time("hoge");
console.timeEnd("hoge");

7. console.trace: メソッドのスタックトレースがわかる

メソッドの呼び出し元などを知りたいときはあるでしょう。

-f Hoge() {
     this.piyo = "piyo";
}

console.trace(new Hoge());

9. console.dir(object): オブジェクトのプロパティをリストで出力する

例えば以下のように出力します。

console.dir(document.getElementsByTagName('div');

10. console.dirxml(object): DOM要素を出力する

先ほどのconsole.dirをXMLのように出力した場合です。

console.dirxml(document.getElementsByTagName('div');

8. console.table(object): オブジェクトをテーブルとして出力する

今回はテーブルの出力します。

参考文献

developers.google.com