Chrome Developer Tools の使い方 03 – Console パネルを使ってみよう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

今回は Console パネルについてです.

VIDEO

チュートリアルムービー

EXPLANATION

動画解説中にタイプしてたテキストです.

Chrome Developer Tools の使い方

Console パネルを使ってみよう!!

このパネルは非常に便利!
大抵のブラウザでは JavaScript の環境で console というオブジェクトをサポートしており
このオブジェクトを使うことで色々な情報を Console パネルに表示することができます.

変数の中身を見たり, オブジェクトのプロパティ一覧を表示したり, 
実行時間を測定することができます.
ちなみにエラーもこのパネルに表示されます.

また, コンソールというだけあって出力だけではなく入力にも対応しています.
サポートされている言語はもちろん JavaScript ♪♪

コードを入力して Enter で実行. 複数行にわたってコードを入力したい場合は
Shift を押しながら Enter で改行できます.

変数を宣言したり, 計算したり, ドキュメントに書き込んだりってことができます.

更に, コンソールでは Chrome Developer Tools でコンソール入力時用に
便利な API が用意されていてこれを活用することで簡単に要素にアクセスすることができます.

ざっくりと紹介
・$(id)
    id が一致する要素を取得
・$$(CSS セレクタ)
    CSS セレクタが一致する要素を配列として取得します.
・$0
    Elements パネルで選択している要素を取得します. また, 選択した要素は
    内部でスタック式に記憶されており $1, $2, ... と指定することで
    過去に選択した要素にアクセスすることも可能です.

使いこなせば開発効率が飛躍的に上がる機能ばかりです!!
ぜひ楽で楽しい開発をあなたへ.

以上, ありがとうございました.

TIPS

Console API

JavaScript 内使える console オブジェクトが持っている関数の一覧です.

console.log(object[, object, ...]) 引数のメッセージを表示します. 内部的には処理は引数の値を toString した内容が表示されてるっぽい.
console.dir(object[, object, ...]) 変数のプロパティ一覧を表示します. あんまり知られていないけど一番便利かも♪
console.time(name) 引数名のタイマーを内部で作成します. timeEnd(name)を呼ぶとタイマーが停止して Console パネルに経過した時間が表示されます.
console.timeEnd(name) console.time(name) で生成されたタイマーを停止して経過時間を Console パネルに表示します.

上記の API は Console API のほんの一部です.

Console API については, 全ての API の実行例を書いた記事を別途書く予定です.

Console パネルで使用できる Command Line API

Console パネルに入力するときだけ使用できる関数の一覧です.

$(id) id が一致する要素を取得
$$(CSS セレクタ) CSS セレクタが一致する要素を配列として取得します.
$0 Elements パネルで選択している要素を取得します. また, 選択した要素は 内部でスタック式に記憶されており $1, $2, ... と指定することで過去に選択した要素にアクセスすることも可能です.

上の 関数だけで十分かなと思います. 他の関数についても知りたい方はこちらへ.

以上で Chrome Developer Tools の使い方について終わります.

間違いや質問, 要望などありましたら気軽にコメント, Tweetしていただけると嬉しいです.

次回は, Cnavas 使って何か作ります.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT