Consoleタブの機能とsettingをちゃんと知りたい｜Devtools｜Chrome

* 本稿は Google Chorme の DevTools（デベロッパーツール） でも、**Consoleタブ**の機能について特化した記事です

# コレ、ご存知ですか？

次のイラストをご覧ください

![pic000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/95b591e6-4a7b-1dfb-da1c-7131657f6934.png)

イラスト中の（１）と（２）の機能をご存知ですか？

私、知りませんでした。普段からチョイチョイConsoleは開いているのに...

（1）は`Live Expression`
（2）は`Execution Context Selector`
といいます


# コンソールタブの機能と設定

コンソールタブの機能と設定について、一通りを調べてみました。

ON/OFFすると何が変わるのか、GIFアニメを中心に共有します。
もっと早く、調べておけばよかった...

上記の（1）や（2）の機能・使い方を知らなかった方は、ぜひご覧ください。

## 調査にあたって、組んだスクリプト

Console上にlogやerrorをいっぱい表示させたいと思い、Codepenで検証用のスクリプトを組みました。

この投稿の最後にCodepenを掲載しています（埋め込んでいます）

説明各所にあるGIFアニメ中で用いているものと同一です。

ぜひ本稿をご覧いただく際はデベロッパーツールを起動いただき、ご自身でも試していただけると幸いです。

![cap00002.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/460abea6-6092-4039-7879-0c6a7e0b688f.gif)

### 何をするスクリプトか

* `GOボタン`を押すと`goFnc()`が実行されます
* `goFnc()`が実行されると、1秒ごとに`count`が増えます
* 同時に`text`にランダムな文字列が表示されます
* またconsole上には`count`に合わせて `info` `warn` `error` `log`のメッセージが表示されます
* 内部には配列`dataArray`があり、`count`と`text`を組み合わせたオブジェクトが追加されていきます
* `STOPボタン`を押すと`stopFnc()`が実行されます。
* `stopFnc()`が実行されると、`goFnc()`の処理が止まります。
* また`console.log("STOP!!")` と `console.table(dataArray)`が表示されます
* 404エラーの表示が欲しかったので、**わざと**リンク切れ画像（存在しない画像URL）を設置しています

---

では、本題へ

## 分かりやすいフィルタリング機能

こちらは説明不要かと思いますが、いちおう掲載します。

### console sidebar

> クリックするとログを出力したファイルの一覧が表示されます。 ファイルを選択すると、そのファイルから出力されたログのみを表示できます。
> 引用元サイト：[メッセージソースでフィルタリング](https://zenn.dev/lollipop_onl/articles/eoz-devtools-console-filter#%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%A7%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0)

![cap00003.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/f17151e4-2904-1619-bb35-a05b0fec7eb3.gif)



### Loglevel でフィルタリング

> Console パネル上部のドロップダウンから表示したいログのレベルを指定できます。
> ここでは、 Verbose、Info、Warnings、Errors の４つのログレベルから表示したいログのレベルをそれぞれ指定します。
> デフォルトでは Verbose を除く全てのログが表示されます。
> 引用元サイト：[ログレベルでフィルタリング](https://zenn.dev/lollipop_onl/articles/eoz-devtools-console-filter#%E3%83%AD%E3%82%B0%E3%83%AC%E3%83%99%E3%83%AB%E3%81%A7%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0)

![cap00005.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/9c1ec992-3bb2-2ac5-7f40-216bb5935a15.gif)



### テキストでフィルタリング

> Console パネル上部の入力欄から表示したいログに含まれるテキストを指定できます。
> また、テキストを /[expression]/ とすることで、正規表現も使用できます。
> 引用元サイト：[テキストでフィルタリング](https://zenn.dev/lollipop_onl/articles/eoz-devtools-console-filter#%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%A7%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0)

![cap00004.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/aa993d8b-2823-7e7a-fd56-6fce86d58950.gif)

* GIFアニメ中では、まずLoglevelフィルタリングで`log`だけが表示されるようにし、続いてテキストフィルターへ`randomText`と入力しています
* `log`の中でも文字列`randomText`が含まれるもののみが表示される様子を表現しています



## コンソール出力のクリア

こちらも、説明は不要かと

![cap00006.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/480b2d39-5541-bc8e-e429-f090d85ee62e.gif)

* 出力画面を綺麗にします
* ショートカットキー`Ctrl + L`でも同じです


## Execution Context Selector

* 本稿の冒頭におったやつです
* Execution → 実行 、 Context → 背景・環境・状況 、 Selector → 選ぶやつ

> 下記のドロップダウンメニューは Execution Context Selector と呼ばれています。コンテキストは通常 top（ページの一番上のフレーム）に設定されています。他のフレームや拡張機能はそれぞれのコンテキストで動作します。こうした他のコンテキストを使用するには、このドロップダウンメニューから選択する必要があります。
> 引用元サイト：[実行コンテキストの選択](https://murashun.jp/article/performance/chrome-devtools.html#chapter-12)

う〜ん...ちょっと難しい...
以下に例を示してみます

![cap00011.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/54b8c112-2db7-4299-32e8-3bf3343bfd4a.gif)

* 上記のGIFアニメでは`goFnc()`を実行しようとしています
* `goFnc()`を実行すると、カウントが始まるはずです
* しかしエラー`goFnc is not defined`が出力されました
* そりゃそうです。だって`Execution Context（実行環境）`にデフォルトで設定されている`TOP`は**qiita**ですから（このページですから）
* 関数`goFnc()`は、あくまでCodepen内のものです
* そこで`Execution Context`のプルダウンから**Codepen**を選択します
* 「スコープをCodepenへ合わせる」という表現はあってるかな？（そんなイメージです）
* これで`goFnc()`が実行可能になりました

![cap00012.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/2a5ccfe3-71fa-f05e-d4da-5c4e842dd0c3.gif)

* 関数だけでは無いですよ
* `Execution Context`を合わせれば、代数だって参照できます
* 上記のGIFアニメでは**Codepen**内の代数（配列）`dataArray`を参照する様子です

---

## Live Expression
* これも本稿の冒頭におったやつです
* Live → ライブ・生 、 Expression → 表現

参考サイト:[Live Expressions in the Console](https://developer.chrome.com/blog/new-in-devtools-70/#watch)

参考サイトの説明、分からんわけじゃないけど、最初は理解が難しかった...
私なら、こう説明する↓

![cap00013.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/5d209c80-4ea2-eae4-04a0-2508cfeafa8a.gif)

* まず`Execution Context`を**Codepen**に合わせる
* 目のアイコン（`Create live expressions`）で以下３つを設定
  * `countText.textContent`：**count:**の右側に表示される数字部
  * `randomText.textContent`：**text:**の右側に表示される文字部
  * `dataArray`：配列。**count**と**text**を組み合わせたオブジェクトを格納
* `GOボタン`をクリック（処理を実行）
* リアルタイムで、各代数が更新されていくことを確認いただけましたか？

![cap00014.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/7ac1dd3f-b9c2-37e2-9c6d-1de7484123fd.gif)

* べつにCodepen使わなくてもいいです
* `let a = 1`して、**Live Expression**に`a`を設定
* その後に`a++`を繰り返し実行
* **Live Expression**の`a`の値が更新されていく様子を確認できます

* 要は、リアルタイムで代数の監視もできるよって機能です

---

## ギアマークの中身

* Consoleタブ内にギアマークは２つありますが、下の方についてです

![スクリーンショット 2021-05-15 2.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/6a0b8f1e-b07f-10f6-0959-2213270de66d.png)


### Hide network

> デフォルトではコンソールではネットワーク問題が報告されます。Hide network のチェックをオンにすると、コンソールにこれらのエラーのログが表示されなくなります。例えば、404 シリーズや 500 シリーズのエラーはログに記録されません。
> 引用元サイト:[コンソールの設定](https://murashun.jp/article/performance/chrome-devtools.html#chapter-14)

![cap00007.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/37d4b954-4baa-e993-59dd-cdcd847c7d04.gif)


### Preserve log

> ページの更新または操作中にコンソール履歴を保持します。
> 引用元サイト:[コンソールの設定](https://murashun.jp/article/performance/chrome-devtools.html#chapter-14)

![cap00008.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/e3df616b-7d23-26af-d87c-c763cde5d468.gif)

* `Preserve log`がOFF → リフレッシュしたらメッセージが消える
* `Preserve log`がON → リフレッシュしてもメッセージが消えない


### Selected context only

> 表示中のコンテキストからのメッセージのみ出力します。
> 引用元サイト:[コンソールの設定](https://murashun.jp/article/performance/chrome-devtools.html#chapter-14)

![cap00015.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/7022a401-c75a-fa4e-2c82-2eb050c250b0.gif)

* Selected → 選んだ、 context → 環境、 only → だけ（表示）


### Group similar messages in console

> 同様のコンソールメッセージをグループ化します。
> 引用元サイト:[コンソールの設定](https://murashun.jp/article/performance/chrome-devtools.html#chapter-14)

![cap00018.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/04c2da2f-460c-eed6-f2a2-e6a159237750.gif)

* Group → グループ化、 similar → 同じ様な、 messages in console → コンソール中のメッセージ
* 上記のGIFアニメでは、`STOPボタン`を連打して、いっぱいエラーを発生させますが「同じ様なメッセージ」としてまとめらています。
* `Group similar messages in console`をOFFにすると、メッセージがバラバラに（個別に）表示される様子を確認できます


### Log XMLHttpRequests

> 各 XMLHttpRequest をコンソールに記録するかどうかを決定します。
> 引用元サイト:[コンソールの設定](https://murashun.jp/article/performance/chrome-devtools.html#chapter-14)

![cap00009.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/e5b8d0fd-4061-666c-cd28-42e5a8fba40d.gif)


### Eager evaluation

> コンソールで式を入力した時に、入力を確定させる前に結果がプレビュー表示されます。
> 引用元サイト:[コンソールの設定](https://murashun.jp/article/performance/chrome-devtools.html#chapter-14)

![cap00016.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/f85dfc8f-cb78-23ed-8250-e5d4976ac2ef.gif)

* Eager → 前のめりな 、 evaluation → 評価
* `Eager evaluation`をON → エンターキーを叩く前に答えが表示されてる


### Autocomplete from history

> コンソールの履歴からオートコンプリートを有効にします。
> 引用元サイト:[コンソールの設定](https://murashun.jp/article/performance/chrome-devtools.html#chapter-14)

![cap00017.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/ac5a0cef-4c8b-345a-297a-34ff034d1d58.gif)


### Evaluate triggers user activation

> ユーザのアクティベーション (悪用可能な API の使用を制限するアクティブなユーザインタラクション) を評価します。例えば、ポップアップを開く、画面が振動するなどです。Evaluate triggers user activation のチェックをオフにすると、ユーザのアクティベーションを抑制します。
> 引用元サイト:[コンソールの設定](https://murashun.jp/article/performance/chrome-devtools.html#chapter-14)

![cap00019.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/2068c144-4549-d89d-3f5c-e6b9085ddadf.gif)

* これも最初、テキストだけの説明を見ても理解できなかったやつです
* 色々調べながらやってみたら理解できた感じです
* 試しに、このオプションをON/OFFしながら`window.open()`を実行してみてください

参考サイト：[Making user activation consistent across APIs](https://developers.google.com/web/updates/2019/01/user-activation)


## Settings の中の Console （コンソールの設定）

* ２つあるギアマークの上の方をクリックすると、**Settings**が開きます
* その内の**Preferences**の中に、Consoleに関する設定があります
* `Show timestamps` と `Enable custom formatters` 以外は、上記で紹介したものと同一です

![スクリーンショット 2021-05-15 3.24.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/0774ae59-d9cb-bdaa-f588-7375c0c6b98e.png)

### Show timestamps

![スクリーンショット 2021-05-15 3.29.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/6f55e89a-ff7a-c452-4825-c855d982aaeb.png)

* `Show timestamps`をONにすると、メッセージの右側にタイムスタンプが表示されます


### Enable custom formatters

> Custom Object Formatters を有効にします。Custom Object Formatters とは、コンソールに表示するフォーマット形式をオリジナルな形式で表示できる機能です。
> 引用元サイト:[コンソールの設定](https://murashun.jp/article/performance/chrome-devtools.html#chapter-14)

![cap00001.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/34773be3-df4a-c182-ddd2-6c87783d84d7.gif)

![pic023.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/82b1d9c1-b0f6-ff3b-f9c5-32031958698c.png)

* これも最初は理解が難しかった...
* 要は、任意のフォーマット（スタイル・デザイン）でメッセージ上へ表示できるよ、って機能です
* でも、そのためにスクリプトを組む必要があります
* 方法は**参考サイト：[Chrome の Custom Object Formatters 機能を使ったオブジェクトのデバッグ](https://qiita.com/howdy39/items/51594dcb48816021178e)**が、とても分かりやすかったです
* 最下部のCodepenにも、参考サイトのコードを活用させていただいております
* Codepenのソース中の関数`CustomObjectFormatters()`が、それです
* 設定の`Custom Object Formatters`をON/OFFしながら、関数`CustomObjectFormatters()`を実行したときの結果を（表示方法を）比べてみてください


---

# お試し用のCodepen

`Result`ボタンをクリックし、DevToolsを起動してご利用ください。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="tomokei5634" data-slug-hash="XWMXvaZ" data-preview="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="viewConsoleMessage">
  <span>See the Pen <a href="https://codepen.io/tomokei5634/pen/XWMXvaZ">
  viewConsoleMessage</a> by tomokei (<a href="https://codepen.io/tomokei5634">@tomokei5634</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>