chromeのF12のConsoleが見づらくなった
いや、それぐらい覚えろや。使いやすくなったぞ。
と、言われそうですが、
最初、なんじゃこりゃ、チェックボックス邪魔ー。と思っちゃいました。
と言ってても仕方ないので、
AI先生に聞いて意味を調べたのでメモしとくぜぇ。
Google Chromeの「検証」→「Console」で表示されるチェックボックスの意味
画像のチェックボックスは、Consoleの表示や入力動作を細かく切り替える設定です。
- Hide network: 404などのネットワーク関連エラーをコンソールに出さないようにします。
- Preserve log: ページ遷移や再読み込み後も、コンソールのログを消さずに保持します。
- Selected context only: 右上の「JavaScript コンテキスト」で選んだフレーム/ワーカー由来のメッセージだけを表示します。
- Group similar messages in console: 同一内容のログを1行にまとめてカウント表示にします(オフにすると毎回バラで表示)。
- Show CORS errors in console: CORSエラーをコンソールに明示的に表示します(必要に応じて非表示化も可能)。
- Log XMLHttpRequests: XHR/Fetchのリクエストとレスポンス詳細をコンソールにも記録します(NetworkタブだけでなくConsoleにも出ます)。
- Eager evaluation: コンソール入力中に、評価結果のプレビューを即時に表示します(入力補助で値のプレビューが見える)。
- Autocomplete from history: コンソールの過去入力履歴からオートコンプリートを有効にします。
- Treat code evaluation as user action: コンソールで実行したコードを「ユーザー操作あり」と見なします(評価時に
navigator.userActivation.isActiveが true になる動作を切替)。
ヒント
- 拡張機能や別フレームの雑多なエラーが邪魔なときは「Selected context only」をオンにすると対象のフレームだけに絞れます。
- CORS系のノイズが多いときは「Show CORS errors in console」をオフにするか、まずNetworkタブで実際のHTTP状態を確認すると切り分けが早いです。
各項目はConsole右上の歯車アイコン「Console settings」からいつでも切替できます。
)
コメント