ChromeのデベロッパーツールのConsoleのチェックボックスの意味 | クズリーマンのカス備忘録

ChromeのデベロッパーツールのConsoleのチェックボックスの意味

chrome-like-logo chrome

chromeのF12のConsoleが見づらくなった

ss

いや、それぐらい覚えろや。使いやすくなったぞ。
と、言われそうですが、

最初、なんじゃこりゃ、チェックボックス邪魔ー。と思っちゃいました。

と言ってても仕方ないので、

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」からいつでも切替できます。
)

コメント

タイトルとURLをコピーしました