Chrome DevTools（検証ツール）の確認も３回目。
今回はConsoleパネルの役割を確認します🧐
※このブログはキャラクター同士の会話形式で進みます。 → 登場キャラクター紹介はこちら
Consoleパネルは２種類ある
Consoleパネルは実は２種類あります。
①Elementsパネルのタブにある独立タブの「Console」
②下の写真にある簡易版Console（DevToolsを開いているときにEscで表示／非表示）
2つのConsoleの違いはなに？
機能は同じです。どちらも同じConsoleで、表示場所が違うだけです。
Elementsパネルを見ながら作業したい場合は、簡易コンソールで表示するといいでしょう。
| 独立タブのConsole | 簡易Console | |
|---|---|---|
| 表示場所 | Elementsと入れ替わる | Elementsの横or下に並ぶ |
| Elementsと同時に見られるか | 見られない | 見られる |
| 画面の広さ | 広い | 狭い |
Consoleパネルでできること
ざっくりいうと、ブラウザとJavaScriptの「対話窓口」です。
① エラーや警告を確認する（受け取る）
ページを開いたときに何か問題があると、ここに自動的に表示されます。
② JavaScriptを直接入力して試す（送る）
JavaScriptを書いて実行して情報を確認したり、
ページを書き換えるなど、を即座に試せます。
（以下は、ページのタイトル表示させています）。
なるほど。エラーの確認とか何か試したいときに使えそうだね。
でも初心者だと、何をどうすればいいのか、使い道が思いつかないなぁ。
おい、ロボット。なんかカンタンで役に立つ使い方はないのか？
はい。1行で試せる使い方があります。実際にやってみましょう。
カンタンで役立つConsoleパネルの使い道
① ページ内のリンクの数を数える
document.querySelectorAll(“a”).length
Enter すると 「38」のように、このページにあるリンクの総数が返ります。
② 見出しの文字を書き換える
document.querySelector(“.hero-title”).textContent = “テスト成功！”
（※: ” “内は任意の内容が入ります）
⬇️
見出しを直接変更することができました。
③ 選択中の要素を目立たせる
先にElementsパネルで何か要素をクリックしてから、Consoleで以下入力します。
メニュー部分が赤色になってわかりやすくなりました。
$0.style.border = “3px solid red”
⬇️
④ページ全体の文字を取り出す
document.body.innerText
Enterで入力すると、ページに表示されている文字がドバッと返ってきます。
おお〜、カンタンコマンドでいろいろできることありそうだね。
山と同じや。登ってみて初めて、見えてくる景色がある。知ってるのと、やってみるのは別もんや。
なるほどー。いろいろ試してみるってことが重要ですね！
まとめ
１：Consoleパネルは2種類ある
２：ConsoleパネルはブラウザとJavaScriptの対話窓口
３：エラーの確認とJavaScriptコマンドでいろいろなことができる
パッと見、何をすればいいのか、
よくわからない項目でしたが、試してみるといろいろと使い道がありそうです。
引き続き探求していきたいと思います😃
ではでは👋
