Chrome DevTools Console機能 入門
時間がない人向け。手っ取り早く知りたい人向け。
長い記事を読める時間がある人は公式の解説を見てもらった方が早い。
⇒ https://developers.google.com/web/tools/chrome-devtools/console/?hl=ja
Consoleパネルとは？
簡単なJavaScriptコード（= スニペット）を任意のWebページでお手軽に実行できるGoogle Chrome DevToolsの機能。
用途
- Webサイト内のJavaScriptが動作した結果作られた変数の存在および中身を確認する
- 思いついたスクリプトの動作を実際のWebページのコードを編集する前に簡易的に確認をする
- 簡単なJavaScriptのコードを用いて開いているページ内の情報をうまい具合に加工・収集する
- ブックマークレット的に使って作業を簡略化・自動化する
Console機能の呼び出し方
Chromeを開き、以下の方法の何れかで呼び出す
ショートカットキーで直接Consoleを開く
- Windows：Ctrl+Shift+J
- Mac：Cmd+Opt+J
Chrome DevToolsを開いてからConsoleを開く
F12キーを押してChrome DevToolsを開き、ナビゲーションメニューの「Console」をクリックして開く
Chrome DevToolsを表示する位置の変更
右上の「︙」ボタンをクリックすると、「Dock side」と書かれているメニューとアイコンが表示される。
このアイコンをクリックするところでChrome DevToolsを表示する位置を変更することができる。
左のアイコンから、
- 独立したウィンドウでChrome DevToolsを表示する
- ブラウザ内左側の領域にChrome DevToolsを表示する
- ブラウザ内下側の領域にChrome DevToolsを表示する
- ブラウザ内右側の領域にChrome DevToolsを表示する
文字が小さすぎて読めなぁぁぁい！
Console画面のどこかをクリックしてから
Ctrl++で文字拡大。Ctrl+-で文字縮小。
Console画面の使い方
コードの実行
簡単なJavaScriptコードを入力してEnterキーを叩くとコードが実行される。
関数に入れずに宣言した変数はグローバル変数として扱われるので、変数の名前衝突を避けたい場合は即時関数などで処理内容を包む。
Consoleを実行しているWebページをリロードすることで作成した変数は破棄される。
実行されたコードは消えるが、↑キーを押すと過去に実行したコードを呼び出すことができるので、そのままEnterキーを叩けば過去に実行したことがあるコードを再度実行できる。何度も同じコードをコピペして貼り付ける必要はない。
↑キーを押した回数分昔に入力したコードを呼び出せる。
また、「コードを実行するのではなく単に改行したい」ときはShift+Enterキーで改行できる。
出力の消去
Ctrl+Lのキーボードショートカットを利用するか、以下のボタンをクリックすることでConsoleにゴチャゴチャ出力された内容を消すことができる。
あるいは、clear()と入力してEnterキーを叩いても消える。
実行したコードの履歴の消去
残してはいけないコードを入力した場合は、Console画面で右クリックして「Clear console history」を入力すれば過去の入力履歴から消える。こうすることでこれまで実行したコードを↑キーを押して呼び出すことができなくなる。
応用的な使い方
個人的によく使っているConsoleから使えるスニペット
何度も使い回すコードを保存したいとき
Sourcesタブ内のSnippets機能を使用する。
任意のページからのコード スニペットの実行 Tools for Web Developers Google Developers.html
