Meta tags:

Headings (most frequently used words):

network, ツールバー, performance, 詳細ペイン, 要素, elements, コンソール, console, ソース, sources, ネットワーク, パフォーマンス, memory, アプリケーション, application, 設定, debugger, source, webaudio, webauthn, とほほのdevtools入門, 目次, 概要, 上部アイコン, メモリー, ライトハウス, lighthouse, ツール, tools, settings, コマンドメニュー, command, menu, リンク, devtoolsとは, devtoolsを開くには, メインパネルとドロワー, パネルメニューとツールメニュー, キーボードショートカット, 便利機能, 要素選択アイコン, デバイス切り替えアイコン, 設定アイコン, カスタマイズアイコン, domツリー, スタイル, コンソールサイドバー, コンソールペイン, ナビゲーター, navigator, エディタ, editor, デバッガー, ソースマップ, map, フィルタバー, グラフペイン, テーブルペイン, タイムラインビュー, トラックペイン, スナップショットペイン, ストレージ, storage, バックグラウンドサービス, background, services, フレーム, frames, 選択項目, 改善提案, アニメーション, animation, 自動入力, autofill, 変更, changes, カバレッジ, coverage, cssの概要, css, overview, デベロッパーリソース, developer, resources, 問題, issues, メディア, media, メモリインスペクター, inspector, ネットワーク状態, conditions, ネットワークリクエストのブロック, request, blocking, パフォーマンスモニター, monitor, クィックソース, quick, レコーダー, recorder, レンダリング, rendering, 検索, search, セキュリティ, security, センサー, sensors, 新機能, what, new, preference, ワークスペース, workspace, 試験運用版, experiments, 無視リスト, ignore, list, デバイス, devices, スロットリング, throttling, 場所, locations, ショートカット, shortcuts, メインパネル, ドロワー, パネルメニュー, ツールメニュー, デザイン, appearance, 拡張機能, extension, 永続化, persistence, デバッガ, グローバル, global, 同期, sync,

Text of the page (most frequently used words):
devtools (42), javascript (42), を参照してください (38), 詳細は (37), #network (32), console (31), デフォルトはオン (30), sources (28), ソース (27), css (25), アイコン (22), デフォルトはオフ (21), ctrl (19), html (18), に関する情報を表示します (17), chrome (16), エディタ (16), log (15), show (15), ネットワーク (15), url (15), dom (15), editor (15), settings (14), performance (14), user (13), shift (12), command (12), overrides (12), elements (12), copy (12), コンソール (11), memory (11), source (10), content (10), domツリー (10), search (10), オーバーライド (10), navigator (10), トラック (10), cpu (10), http (9), enable (9), function (9), パフォーマンス (9), request (9), ソースマップ (9), ツールバー (9), hide (8), blocking (8), webauthn (8), webaudio (8), ドロワー (8), storage (8), paint (8), web (7), add (7), ナビゲーター (7), デフォルトは (7), style (7), name (7), フレーム (7), all (7), new (7), https (7), tools (7), cookie (7), cookies (7), 詳細ペイン (7), har (7), breakpoints (7), コマンドメニュー (6), ワークスペース (6), and (6), sync (6), open (6), disable (6), true (6), cors (6), wasm (6), focus (6), preference (6), api (6), メディア (6), capture (6), lighthouse (6), frames (6), fetch (6), application (6), clear (6), override (6), step (6), google (5), ショートカット (5), code (5), shortcuts (5), センサー (5), デバイス (5), デバッガー (5), ignore (5), folder (5), workspace (5), macは (5), debugger (5), messages (5), group (5), レイヤ (5), トラックペイン (5), cache (5), ネットワークリクエストのブロック (5), スタイル (5), reveal (5), node (5), file (5), what (5), メインパネル (5), セキュリティ (5), option (5), レコーダー (5), conditions (5), inspector (5), media (5), issues (5), アニメーション (5), snapshot (5), background (5), アプリケーション (5), filter (5), save (5), call (5), f11 (5), grid (5), flex (5), sensors (4), スロットリング (4), scripts (4), reload (4), into (4), type (4), auto (4), global (4), body (4), return (4), preserve (4), layer (4), または (4), scroll (4), waterfall (4), panel (4), tab (4), 新機能 (4), security (4), レンダリング (4), ネットワーク状態 (4), arraybuffer (4), scope (4), developer (4), overview (4), カバレッジ (4), 自動入力 (4), アクセシビリティ (4), に格納された情報を表示します (4), indexeddb (4), フィルタ (4), instrumentation (4), profile (4), load (4), slow (4), メイン (4), main (4), を開きます (4), address (4), png (4), more (4), element (4), xpath (4), パネルやツールは (4), menu (3), throttling (3), mobile (3), touch (3), desktop (3), custom (3), maps (3), list (3), experiments (3), enter (3), デバッガ (3), extension (3), header (3), window (3), const (3), age (3), 保持したままにします (3), trace (3), automatically (3), になります (3), コンソールから (3), evaluation (3), action (3), コンソールに (3), autocomplete (3), javascriptコンテキスト (3), context (3), not (3), zoom (3), タイムラインビュー (3), しないを切り替えます (3), ログを保持 (3), hover (3), 要素選択アイコン (3), から選択します (3), indentation (3), none (3), すべて (3), sidebar (3), state (3), layout (3), rendering (3), パネル (3), json (3), recorder (3), クィックソース (3), quick (3), パフォーマンスモニター (3), monitor (3), 文字列 (3), メモリインスペクター (3), issue (3), デベロッパーリソース (3), resources (3), cssの概要 (3), coverage (3), changes (3), autofill (3), animation (3), メインパネルとドロワー (3), ツール (3), seo (3), ベストプラクティス (3), accessibility (3), pwa (3), app (3), モバイル (3), スナップショット (3), ライトハウス (3), reporting (3), キャッシュストレージ (3), ストレージ (3), サービスワーカー (3), objects (3), 選択肢 (3), summary (3), 高度な描画パフォーマンスの測定 (3), を有効にする (3), advanced (3), キャプチャの設定 (3), event (3), time (3), bottom (3), gpu (3), fps (3), 非表示を切り替えます (3), page (3), パネルで (3), initiator (3), archive (3), パネルの (3), コンテンツをオーバーライド (3), ネットワークリクエストブロック (3), コマンド形式 (3), を表示します (3), map (3), 1処理分ステップ実行します (3), next (3), をコピーします (3), document (3), index (3), コンソールサイドバー (3), x123 (3), その他のツール (3), esc (3), キーボードショートカット (3), move (3), ツールメニュー (3), パネルメニュー (3), 2024年7月21日 (2), リンク (2), location (2), locations (2), 低品質回線シミュレーション (2), devices (2), 無視リストを管理します (2), party (2), from (2), 無視リスト (2), 試験運用版 (2), デフォルトを復元して再読み込み (2), restore (2), defaults (2), for (2), グローバル (2), stack (2), local (2), 永続化 (2), persistence (2), link (2), 拡張機能 (2), with (2), hasbody (2), devtoolsformatters (2), color (2), font (2), userformatter (2), object (2), formatters (2), ページを再描画した時でもコンソールの表示をクリアせず (2), navigation (2), expand (2), ユーザが何らかのページ操作を行った場合 (2), false (2), 操作を行った場合もこのフラグが (2), になりますが (2), このチェックボックスをオフにしておくと (2), にならなくなります (2), このフラグをみてフォームに入力中か否かを判断しているようなページのデバッグに有効です (2), useractivation (2), isactive (2), コード評価をユーザアクションとして扱わない (2), treat (2), コンソールに変数名などを入力する際に入力が完了する前にマッチする変数があればその値を表示します (2), 先行評価 (2), eager (2), エラーを表示します (2), コンソールにcorsエラーを表示する (2), errors (2), 同じメッセージが表示された場合 (2), メッセージを書き出すのではなく (2), 前のメッセージの表示カウントをインクリメント表示します (2), コンソールの類似するメッセージをまとめる (2), similar (2), 履歴から予測入力 (2), history (2), xmlhttpreuqests (2), 関連の状況を示すログを表示します (2), xmlhttprequests (2), 選択肢で選択したコンテキストから書き出されたメッセージのみに絞り込みます (2), 選択したコンテンツのみ (2), selected (2), only (2), 404 (2), found (2), などのネットワーク系のメッセージを表示しなくなります (2), frame (2), layers (2), view (2), mouse (2), force (2), this (2), site (2), のテーブルで (2), ウォーターフォール (2), while (2), ただし (2), record (2), documentation (2), tooltip (2), 上の要素にマウスを乗せた時 (2), shadow (2), agent (2), 4個のスペース (2), デフォルトのインデント (2), default (2), allow (2), pause (2), プリティプリント (2), してくれます (2), で空白の表示方法を選択します (2), は表示しません (2), はすべての空白を (2), で表示します (2), variable (2), language (2), システム設定 (2), system (2), デザイン (2), appearance (2), を選択できます (2), protocol (2), サイトの (2), tls (2), をクリックすると (2), パネルで開きます (2), macの場合は (2), ドキュメント (2), レイアウト (2), リクエスト (2), 文字列にマッチする (2), の読み込みをブロックします (2), typedarray (2), dataview (2), アイコンをクリックすると (2), メディアプレイヤーに関する情報を表示します (2), エラー (2), webページの問題 (2), の一覧と詳細を表示します (2), イニシエータ (2), 合計バイト数 (2), が正常に読み込まれているかを確認します (2), の概要 (2), 使用されている (2), の概要レポートを作成します (2), が表示されます (2), ファイルの中で使用されていない箇所を見つけることができます (2), で行ったソースの変更記録を表示します (2), の自動入力機能の内 (2), 住所に関する自動入力を検査 (2), デバッグします (2), cssアニメーションの効果を測定したりカスタマイズすることができます (2), engine (2), optimization (2), csp (2), xss (2), best (2), practice (2), 未使用の (2), があります (2), 例えば (2), 改善提案 (2), progressive (2), デスクトップ (2), 選択項目 (2), 投機的読み込み (2), バウンストラッキング対策 (2), バックグラウンド同期 (2), バックグラウンドフェッチ (2), バックフォワードキャッシュ (2), バックグラウンドサービス (2), services (2), ストレージバケット (2), 共有ストレージ (2), インタレストグループ (2), プライベートステートトークン (2), localstorage (2), workers (2), manifest (2), retained (2), 遠近法 (2), select (2), allocation (2), heap (2), profiles (2), スナップショットペイン (2), ガベージコレクション (2), collect (2), garbage (2), プロファイルを保存します (2), プロファイルを読み込みます (2), メモリー (2), をチェックしておき (2), アクティビティ (2), first (2), contentful (2), タイミング (2), スクリーンショット (2), グラフセクション (2), ネットワーク速度を意図的に遅い状態をシミュレートします (2), ダウンロード速度 (2), アップロード速度 (2), レイテンシ (2), パケットロス率 (2), パケットキューの長さを指定してカスタマイズした通信状態を作成することもできます (2), selector (2), samples (2), メモリ (2), プロファイリングを開始してページを再読み込み (2), start (2), profiling (2), 停止します (2), stop (2), 情報を表示します (2), 送受信のキューイング時間 (2), 待ち時間 (2), dns解決時間 (2), 初期接続時間 (2), 要求送信時間 (2), 応答待ち時間 (2), response (2), headers (2), 追加したオーバーライド情報は (2), に保存されます (2), options (2), block (2), domain (2), curl (2), から実行する (2), コピー (2), browser (2), 新しいタブで開く (2), ファイルを (2), path (2), remote (2), size (2), テーブルペイン (2), イベントが発生するタイミングを示します (2), グラフペイン (2), requests (2), blocked (2), urls (2), image (2), フィルタバー (2), listeners (2), domブレークポイント (2), xhr (2), watch (2), 関数があれば関数の中に入ります (2), との違いがよく分かりません (2), f10 (2), スクリプトの実行を一時停止 (2), script (2), toolbar (2), ファイルを開く (2), 現時点では実験的機能です (2), 作成元 (2), queryselectorall (2), arg (2), スニペット (2), ペインの (2), localhost (2), ページ (2), error (2), コンソールペイン (2), ブレークポイントの位置 (2), break (2), パディング (2), ボーダーの太さを表示します (2), プロパティを追加することもできます (2), styles (2), top (2), ノードのスクリーンショットをキャプチャ (2), screenshot (2), attribute (2), modifications (2), cut (2), paste (2), この要素を示す (2), outerhtml (2), html要素 (2), カスタマイズアイコン (2), 設定アイコン (2), デバイス切り替えアイコン (2), 上部アイコン (2), 機能を用いると (2), 便利機能 (2), パネルメニューとツールメニュー (2), タイトルを左右にドラッグ (2), ドロップすることで順序を入れ替えることができます (2), タイトル右クリックの (2), などの (2), が並びます (2), が開閉します (2), f12 (2), パネルを開きます (2), devtoolsを開くには (2), devtoolsとは (2), とほほのdevtools入門 (2), www, tohoho, com, 最終更新, copyright, 2024, 杜甫々, microsoft, 様々なコマンドを検索, 実行することができます, を開いて, キーで表示されます, 右側の選択ボックスで全体を, visual, studio, 風のショートカットに切り替えることもできます, 削除アイコン, でショートカットの設定を元に戻すことができます, 追加したショートカットはゴミ箱アイコン, で削除できます, ショートカットを追加する, shortcur, でショートカットを追加することもできます, 右側に表示される鉛筆アイコン, でショートカットを変更後チェックアイコン, で変更することができます, ショートカットの一覧を表示します, ロケーション, で指定可能な, の管理を行います, スロットル処理, ネットワークのスロットリング, の設定を行います, デバイス名, 画面サイズ, ピクセル比, ユーザーエージェント文字列, を指定してデバイスを追加することもできます, スマートフォンやタブレットでの表示をシミュレートする際のデバイスの一覧を表示します, 無視リストは, でファイルを右クリックして, 無視リストに追加, からでも追加削除することができます, カスタムの除外ルール, exclusion, rules, ソースマップの既知のサードパーティスクリプトを無視します, ソースマップの既知のサードパーティスクリプト, known, third, 拡張機能によって挿入されたコンテンツスクリプトを無視します, 拡張機能によって挿入されたコンテンツスクリプト, injected, extensions, の無視リストを有効にします, 無視リストを有効にする, listing, 無理リスト, 様々な試験運用機能のリストがあります, テスト, ワークスペースとして使用するフォルダを追加します, フォルダを追加, ワークスペースから除外するフォルダ名を指定します, で複数のパターンを指定することができます, の中では正規表現を使用することができます, フォルダ除外パターン, exclude, pattern, 設定した情報をすべてリセットして, を再読み込みします, 同じユーザでログインしている他のマシンの, の設定を同期させます, 設定の同期を有効にする, にログインしているアカウントを表示します, chromeにログイン済みのアカウント, signed, を押した際に開かれる検索で, 文字をタイプするたびにリアルタイムに検索結果を表示します, オフにすると, を押すまで検索しません, 入力逐次検索, you, を開いた状態でも新しいタブを開くリンク, target, をクリックした場合, 新しいべーでは, は閉じられたままですが, このチェックをオンにしておくと, 新しいページを開く際に自動的に, が開きます, devtoolsをポップアップで自動オープン, popups, デフォルトではフレームワークが非同期処理をサポートしている場合, は非同期処理をトレースしようとしますがこれを無効化します, 非同期スタックトレースを無効にする, async, track, を無効化します, javascriptを無効にする, によるローカルオーバーライドを有効にします, ローカルのオーバーライドを有効化, ファイルリンクをクリックした際の開き方を指定します, で開きますが, 拡張機能をインストールすると拡張機能で開くことができるようになります, リンク処理, handling, に表示されるエラーメッセージを, を用いて分析して解決策を示します, コンソールの分析情報, gemini, でエラーと警告をより深く理解する, aiを使用してコンソールメッセージを分析, understand, カスタムフォーマッタを利用可能にします, コンソールに表示するオブジェクトの表示方法をカスタマイズすることができます, カスタムフォーマッタは, メソッドを持つオブジェクトを, に登録して利用します, red, weight, bold, span, null, u12345, yamada, カスタムフォーマッタ, 移動時のログを保存, upon, の出力メッセージを自動的に展開します, メッセージを自動展開, 予測入力の際, キーで入力の候補を採用します, enterキーで予測入力の候補を採用する, accept, suggestion, で履歴情報からの予測入力を有効化します, の出力にタイムスタンプを表示します, タイムスタンプ, timestamps, xmlhttprequestをログ, ネットワークメッセージを非表示, ビューで, フレームを非表示にします, ビューでchromeフレームを非表示, の中段にある, でマウスホイールを動かしたときの動作を, で切り替えます, 上段の, では常に, 動作になるので, 中断の, にしておいた方が便利そうです, flamechartのマウスホイール動作, flamechart, wheel, 広告と思われるリクエストを強制的にブロックします, このサイトで広告ブロックを強制, iframe, によって開始されたリクエストをグループ化して表示します, ネットワークログをフレーム別にグループ化, テーブルタイトル右クリックから, 列を表示している場合, リソースタイプによって棒グラフが色分けされるようになります, カラーコードのリソースタイプ, resource, types, が開いている間, ネットワークキャッシュを無効にします, devtoolsが開いている間に, キャッシュを無効にする, に登録された, やドメインをブロックする, このチェックをつけてもつけなくても, フラグが優先されるようです, ネットワークリスエストのブロック, でページを表示する際にネットワークログを採取します, ネットワークログを記録, でページを再表示する際に前のネットワークログを消去せずに残します, cssプロパティにマウスを乗せた時にプロパティの説明ツールチップを表示します, cssドキュメントのツールチップを表示, ページ上にルーラーを表示します, カーソルを合わせたときに定規を表示する, rulers, ページ上の対応する要素がハイライトされますが, この時にツールチップを表示します, 詳細は検査ツールチップを表示, detailed, inspect, メインパネル上部の, を押してページ内で要素の上にマウスを乗せた時, 上の対応する要素をハイライト表示します, カーソルを合わせたdomノードを表示, のコメントを表示します, 件のコメントを表示, comments, で長い行を折り返し表示します, ワードラップ, word, wrap, ノードを表示します, ユーザエージェントシャドウdomを表示, デフォルトのインデントを, 2個のスペース, 8個のスペース, タブ文字, がリモートファイルからソースマップなどのリソースを読み込むことを許可します, セキュリティ上の理由によりデフォルトはオフ, リモートからリソースを読み込むことを許可, デバッグ情報を使用して, をデバッグする際, 可能であれば, バイトコードで一時停止しないようにします, バイトコードで一時停止しない, bytecode, でファイルの末尾を超えてスクロールできるようになります, ファイルの終わりを超えるスクロールを許可, scrolling, past, end, 利用時にコンパイルされた, の代わりにソースとなる, sccs, ファイルなどを表示することができます, cssソースマップ, minimize, されたソース, min, 最下部の, をクリックしなくても自動的に展開表示, 圧縮されたソースを自動的にプリティプリントする, pretty, print, minified, ブレークポイントで停止した際に, で該当の箇所を表示します, 何故かオフにしても表示されました, ブレークポイントのトリガー時にソースパネルを表示する, when, triggering, breakpoint, デバッグ時に, の末尾に変数の値をインライン表示します, デバッグ時に変数値をインライン表示, display, values, inline, debugging, trailing, は末尾の空白のみを薄い赤ハイライトで表示します, 空白文字を表示, whitespace, characters, でブロックを折り畳んだり展開することができるようになります, コードの折りたたみ, folding, で対応する閉じ括弧, 開き括弧が無い場合, 括弧が薄い赤色でハイライトされ赤い下線が付きます, かっこの一致, bracket, matching, で対応する閉じ括弧を自動入力します, 閉じ括弧の自動入力, closing, brackets, でオートコンプリートを有効にします, 予測入力, autocompletion, 8スペース, tab文字など, ソースコードのインデントを検出できた場合, を無視してソースコードのインデントに従います, 値を変更した際は, を再読み込みする必要があります, インデントを検出, detect, キーを押した時にタブを挿入するのではなく, フォーカス移動するようになります, タブでフォーカスを移動, moves, javascriptの, 機能を有効にします, javascriptソースマップ, のタブでソースを切り替えると, 自動的に, の選択ファイルを切り替えます, サイドバーにファイルを自動的に表示, files, 拡張機能によるコンテンツスクリプトも検索対象に含めて検索します, 非同期のコンテンツスクリプト内で検索, anonymous, が更新された際に新機能を紹介します, 更新時に新機能を表示, after, each, update, デバッガでコードが一時停止された時, ビューポートの一時停止アイコンを非表示にします, 一時停止状態のオーバーレイを無効にする, paused, overlay, キーによるパネル切り替えを有効にします, パネルの切り替えにctrl, shortcut, switch, panels, の言語を切り替えます, 切り替えた後は, を再起動する必要があります, english, のパネルレイアウトを, 水平方向, horizontal, 垂直方向, vertical, パネルレイアウト, デザインテーマを, ライト, light, ダーク, dark, テーマ, theme, 各項目をクリックするとさらに詳細が表示されます, 設定の概要, 様々な値を変更しても, preferences, で全パラメータをデフォルト値にリセットすることができます, 右上の, で開閉します, 新機能の概要, 最新ブラウザバージョンで, に追加された機能を紹介します, 認証システムをエミュレートする, トランスポートとして, usb, nfc, ble, internal, プロトコルとして, ctap2, client, authenticator, u2f, universal, 2nd, factor, パスワード不要の認証システムである, の認証システムをエミュレートすることができます, の指標を表示する, を使用しているページを開くと, パフォーマンス指標を表示します, audiocontext, webautio, センサーをエミュレートする, ユーザがスマホを利用中か, スクリーンがロックされているかなどをエミュレートします, アイドル検出, idle, detector, クリックイベントを強制的にタッチイベントに変更します, タッチ, スマートフォンの向き, 水平や縦方向垂直, 横方向垂直など, を指定することできます, orientation, スマートフォンの位置情報を, tokyo, london, などの地名や経度, 緯度で指定することができます, スマートフォンのセンサーに関する情報をエミュレートします, セキュリティの問題を理解する, などの現在では非推奨のプロトコルが使用されていないかなどを調べることができます, 左ペインで, 右ペインに, の詳細が表示されます, 灰色の四角は, で暗号化されていなかったり, 適切な, ではないことを示します, 緑の四角はページが適切に, で暗号化されていることを示します, 左ペインではメインページと, メインページに含まれるサブページの一覧が表示されます, ページが適切な, で暗号化されているかを示します, 読み込まれたすべてのリソースからテキストを検索する, 検索結果のファイルをクリックすると, で開くこともできます, に表示される複数のソースファイルの中から入力した文字列を含むファイルを検索します, タブの概要, レイヤに枠線をつける, 広告と思われるフレームをハイライト表示する, ローカルフォントを無効にする, ダークモードにしてみる, cssメディアタイプを切り替えてみる, 色覚異常者の場合の見栄えを確認するなど, 様々な機能をサポートしています, レンダリングに関する様々なオプションを設定します, ユーザーフローを記録して測定する, まだ実験的な機能で, 日本語変換, キーに対応していないなど, まだ問題はあるようです, パフォーマンス測定しながら記録を再生することもできます, 改善前と回前後でパフォーマンスの差異を比べるのに便利です, 記録をスロットリングあり, の状態で再生することもできます, 記録は, ファイルとして書き込んだり読み込んだりすることもできます, 画面上で, 入力する, ボタンを押すなどの動作を記録して再生することができます, クイック, もしくは, クィックソースパネルで, から編集対象のファイルを選択します, パネルで最後に編集したファイルが表示されます, で他のパネルにアクセスしながら, のクィックソースでソースファイルを表示, 編集することができます, パフォーマンスモニターパネル, css使用率, javascriptヒープサイズ, domノード, jsイベントリスナー, ドキュメントフレーム, スタイル再計算, 秒の状況をリアルタイムにグラフ表示します, リクエストをブロックしてサイトをテストする, ワイルドカードとして, を使用できます, 文字列を指定し, ネットワーク条件, ユーザー, エージェント文字列をオーバーライドする, デフォルト以外の値を指定いている場合は, パネルのタイトルの左に, アイコンが表示されます, キャッシュを行うか否か, ネットワークスロットリング, 低品質回線のシミュレート, accepted, encodings, ヘッダの設定を行います, を検査します, の中で, 型の変数の右側にある, メモリインスペクターパネルが開き, バッファの内容を, 16進ダンプや, ascii, で表示することができます, の中身を確認します, プレーヤー情報の表示とデバッグ, 一覧をクリックするとそのメディアに関する詳細情報を表示します, 再生されたメディアファイル, mp3, の一覧を表示します, youtube, などメディアを再生するページにアクセスし, ペインをひらきます, 問題を見つけて修正する, の一覧に表示される各問題をクリックすると, 問題の詳細や修正方法を確認することができます, 各重要度の問題の個数は, アイコンの左側にも表示されています, 問題は重要度に応じて, の3段階に分類されます, デベロッパー, リソース, ソースマップの表示と手動読み込み, デフォルトではwebサーバから, を読み込みますが, 手動で登録することもできます, の状態, エラー状態の一覧が表示されます, で改善できる点を特定する, サマリ, 使用されている色, 使用されているフォント, 未使用の定義, 使用されているメディアクエリなどの情報を表示します, ページが開かれている状態で, 概要をキャプチャ, ボタンをクリックします, 対象範囲, 使用していない, を見つける, 未使用バイト数, 使用率, 開始ボタンを押してから停止ボタンを押すまでに呼ばれたコードが測定されます, の変更をトラッキングする, 保存した住所の検査とデバッグ, ここで管理される情報は, アカウントと紐づいています, 自動入力される住所は, の設定メニュー, ではなく, 本体の設定, パスワードと自動入力, 住所など, で確認することができます, のアニメーション効果を調査して変更する, キャプチャをクリックするとアニメーションを再生することができます, キャプチャされたアニメーションは画面の上部にされます, cssアニメーションのあるページでアニメーションツールを開くとキャプチャが始まります, ツール名, でも開くことができます, ツールの起動方法やドロワーからメインパネルに移動する方法などは, ツールはメインパネルやドロワーに表示することができます, robots, txt, が設置されていません, meta, description, が記述されていません, policy, により, cross, scripting, を回避できるか検討してください, サポートが終了したapiが使用されています, 要素に, lang, が指定されていません, 画像に, alt, 属性が指定されていません, webp, avif, などを使用したほうがよい大きな画像があります, を使用したほうがよいコンテンツがあります, レンダリングを妨げるリソースがあります, コンテンツの描画に時間がかかっています, テキストを圧縮すると効果的です, 下記のような改善提案を行ってくれます, どの箇所が問題なのか, どのように改善すればよいのかも教えてくれます, カテゴリ, categories, タイムスパン, timespan, ナビゲーション, モード, mode, webページを下記のモードや観点から総合評価することができます, が提供する, webページ評価ツールの名称です, 英語としては, を意味します, ページのフレーム構成に関する情報をツリー形式で表示します, プッシュ通知, プッシュメッセージング, push, messaging, speculative, loads, 定期バックグラウンド同期, 定期的なバックグラウンド同期, periodic, 決済ハンドラ, 支払いハンドラ, payment, handler, notification, notifications, bounce, tracking, mitigations, back, forward, buckets, shared, interest, groups, private, tokens, sessionstorage, セッションストレージ, session, ローカルストレージ, が使用するストレージの割合を表示します, 使用しているストレージをクリアしたり, 使用量の上限値をシミュレートしたり, サービスワーカーを削除したりすることができます, service, ファイルに関する情報を表示します, のサンプルデモが, でいくつか紹介されています, プログレッシブ, アプリのデモ, マニフェスト, 上部で選択したオブジェクトの詳細情報を表示します, 保持者, retainers, のコンストラクタ名, クラス名, 毎の情報を表示します, コンストラクター, constructor, その他のフィルタ条件を選択します, devtoolsコンソールで保持されているオブジェクト, the, デタッチされたdomノードで保持されているオブジェクト, detached, nodes, 重複する文字列, duplicated, strings, の前にオブジェクトを割り当て, allocated, before, すべてのオブジェクト, 表示する, オブジェクトをクラス名でフィルタリングします, クラスでフィルタ, class, 日本語は, になっていますが, の誤訳のようです, コード, js配列, 型付き配列, システムオブジェクト, その他の分類で円グラフを表示します, 統計情報, statistics, オブジェクトの親子関係をツリー形式で表示します, 包含関係, containment, 複数のスナップショットを取得した場合に両者の比較を行います, comparison, サマリを表示します, perspective, スナップショット履歴の中から表示したいスナップショットを選択します, snapshots, プロファイリングタイプを選択します, vmインスタンスを選択します, vmインスタンスを選択, instance, サンプリングメソッドを使用してメモリの割り当てを記録します, 測定にかかるオーバーヘッドが小さいため, 長時間の測定に使用できます, 実行スタックごと概算値を知ることができます, 割り当てサンプリング, sampling, のメモリ割り当ての推移を表示します, 録画開始から録画終了までのオブジェクトを表示できます, これによりメモリリークを見つけることができます, タイムラインの計測手法割り当て, timeline, オブジェクトと, ノードのメモリ分布を表示します, ヒープスナップショット, プロファイル, ガベージコレクションを行います, プロファイリングの結果をファイルに書き込みます, プロファイリングの結果をファイルから読み込みます, プロファイリングしたスナップショットをすべて消去します, プロファイルをすべて消去, メモリスナップショットを取得します, 取得する度に, のように履歴保持していきます, ヒープスナップショットを撮る, take, ペイントイベントに関する詳細情報を表示します, トラックの中で, イベントをいた場合に表示されます, ペイントプロファイラ, profiler, トラックで指定した各フレームのレイヤ情報を表示します, トラックでフレームをクリックした場合に表示されます, この機能は廃止される可能性があります, 測定期間中に発生したイベント情報を表示します, イベントログ, 最も多くの時間を要しているアクティビティの親子関係をツリー形式で表示します, 呼び出しツリー, tree, 多くの時間を要しているアクティビティの一覧を表示します, セルフ時間, self, 列にはそのアクティビティで要した時間を, 合計時間, total, 列にはそのアクティビティと子アクティビティの合計時間を, activity, 列にはアクティビティの内容を表示します, ボトムアップ, で選択したオブジェクトの詳細情報を表示します, の利用状況を表示します, メモリに関する詳細を表示します, 表示されないこともあるようです, メモリーインフラ, memoryinfra, スレッドプールの状況を表示します, スレッドプール, thread, pool, 画像などをラスタライズ, ベクタ情報をピクセル情報に変換, する状況を表示します, ラスター, raster, クリックなどのイベント, どんな関数がどのくらいの時間を要しているかなどの詳細を表示します, 赤色は何らかの性能問題の可能性がある箇所を示しています, レイアウトシフトが発生している場合に表示されます, vitals, サイトの健全性を示す重要指標, レイアウトシフト, マウス操作などの操作記録を表示します, 記録の上にマウスを乗せると, 入力遅延, 処理期間, 表示遅延などの詳細が表示されます, インタラクション, 200ms, より遅くなると記録の右上に赤い三角が表示され, サマリタブにも警告メッセージが表示されます, interactions, 画面描画のタイミングを表示します, リソースをすべてロードし終えた時間, 最初の要素を描画した時間, fcp, 最初のなんらかの視覚要素を描画した時間, 一番大きなエレメントを描画した時間, lcp, largest, domツリーを構成した時間, dcl, loaded, timings, アニメーションに関する情報を表示します, アニメーションを含むページでもこのトラックが表示されないこともあるようです, animations, 各フレームの状況を表示します, 緑のフレームは期待通りに描画されたこと, 黄色のフレームは少し問題があったこと, 赤いフレームは適切な時間内にレンダリングできなかったことを示します, ネットワークの詳細を表示します, グラフセクションで, グラフの下に青い横線がある箇所が, ネットワーク通信が発生している箇所です, は黄色, 画像は緑で表示されます, 左上の小さな青い四角は, 濃い場合は優先度が高いこと, 薄い場合は優先度が低いことを示します, トラックに表示される色付き矩形部, タブに詳細情報が表示されます, などのトラック名を右クリックして, トラックを設定, configure, tracks, を実行すると各トラックの表示, 非表示を切り替えたり, 表示順序を変更することができます, マウスホイールで表示領域を拡大, 縮小したり, マウスドラッグで表示領域を左右に動かすことができます, 詳細情報を表示します, フレームの上にマウスを乗せると, フレームが拡大表示されます, 各時点のフレームのスクリーンショットが表示されます, チェックボックスをオンにしておいた場合に表示されます, の下に表示されます, フレームセクション, マウスをドラッグしたりホイールを操作すると, 下部の, セクションなどの表示領域を調整することができます, cpuグラフの下に青い横線が表示されている場合, ネットワーク通信が発生していることを示します, per, second, meter, を実行し, メーターを表示することもできます, cpuグラフの上に赤い横線が表示されている場合, アニメーション描画速度, を下回っていることを示します, セクションの円グラフの色に相当します, ツールバーの下部に, 使用率が, 100, で表示されます, 論理プロセッサの数, を調整します, hardwareconcurrency, ハードウェアの並行処理, hardware, concurrency, 通信状態が良くない場合の性能を確認するために, 低速度の, の場合の性能を確認するために, スロットリングを設定し, 状態をシミュレートします, slowdown, 4分の1, の速度にシミュレートします, cssセレクタの統計測定を有効にします, cssセレクタの統計情報を有効にする, stats, 高度な描画パフォーマンスの測定を有効にします, 機能が有効化されます, のサンプリングを無効にして, モバイルデバイスに対する実行時のオーバーヘッドを削減します, javascriptのサンプルを無効にする, ページの記録中にガベージコレクションを強制します, メモリタイムラインの表示, ロードしたページのスクリーンショットを撮ります, 右端に, net, と表示されているグラフの上にマウスを乗せると, その時点のスクリーンショットを表示することができます, screenshots, 最近実行したプロファイリングの履歴を表示します, 最近のタイムラインセッションを表示, recording, プロファイリングの結果を, josn, ファイルとして保存します, プロファイリングの結果を保存した, ファイルから読み込みます, プロファイリングの結果を消去します, プロファイリングを開始してページを再読み込みします, パフォーマンスのプロファイリングを開始, パフォーマンスパネルの機能を理解するために, 下記のサンプルページが用意されています, ページを表示して, を起動し, アイコンをクリックし, 5秒間の間に, ボタンを十数回程度, 青いアイコンの動作が遅くなる程度まで, 押してみてください, googlechrome, github, jank, 測定は, キャッシュや拡張機能の影響を受けないようにシークレットモードで行うことが推奨されています, ページの性能的なボトルネックを解析するためにパフォーマンスの測定を行います, 応答メッセージの, 応答ダウンロード時間の詳細を表示します, timing, このファイルが, どのファイルから呼び出されたか, どのファイルを呼び出しているかを表示します, 応答メッセージのボディ情報を表示します, レスポンス, ファイルの中身をプレビューします, プレビュー, preview, 要求メッセージのボディ情報を表示します, ペイロード, payload, 応答メッセージのヘッダ情報を表示します, ヘッダー, 名前を付けてファイルに保存します, 名前をつけて保存, 表示されているリクエスト, レスポンスをすべて, コンテンツも含めて, 形式ファイルに保存します, コンテンツを一緒にharとしてすべて保存, すべてのオーバーライドを表示, コンテンツ自体を一時的にオーバーライドします, で呼び出す, のレスポンスを一時的にオーバーライドしたものに置き換えることができます, レスポンスのヘッダ情報を一時的に変更したり追加したりします, 正式サーバ側で, ヘッダの設定を行う前に, ヘッダが返却された場合の動作をあらかじめシミュレートすることができます, ヘッダーをオーバーライド, テーブルに表示する列を変更します, テーブルヘッダを右クリックした際のメニューと同様です, ヘッダーオプション, テーブルを指定した列で並べ替えます, 並べ替え, sort, にドメインを加えます, リクエストドメインをブロック, を加えます, ブロックリクエストのurl, コピーバッファにコピーします, コマンドプロンプトから実行する, bash, powershell, invoke, webrequest, リクエストヘッダー, レスポンスヘッダー, レスポンス全体, ファイル形式, 様々な情報や形式でコピーすることができます, ブラウザの, を消去します, ブラウザcookieを消去, ブラウザのキャッシュを消去します, ブラウザキャッシュを消去, ファイルをブラウザの新しいタブで開きます, パネルで開く, ファイルを右クリックすると下記のメニューが表示されます, 列のファイル名をクリックする, タイトル右クリックで, を表示してグラフにマウスを乗せると, 応答ダウンロード時間の詳細を表示することができます, キーを押しながら行にマウスを乗せると, その通信の元になった通信が緑色で表示されます, 上記の中からウォーターフォール, を表示すると, リクエスト毎に所要時間をグラフで表示することができます, タイトルを右クリックすることで, method, status, scheme, set, priority, connection, has, の中から表示する列を選択することができます, 個々の送受信に関する情報をテーブル形式で表示します, ダブルクリックすると範囲選択モードが解除されます, クリックすると範囲選択バーが表示され, 選択した範囲の送受信のみに絞り込むことができます, 縦の赤い線は, 縦の青い線は, domcontentloaded, httpの送受信をグラフ表示します, サードパーティのリクエストログのみを表示します, サードパーティのリクエスト, 3rd, でブロックされたログのみを表示します, ブロックされたリクエスト, 何らかの理由でブロックされたレスポンス, を含むログのみを表示します, ブロック中のレスポンスcookie, 表示するurlの種別を選択します, 拡張機能により取得されたurlを表示しません, 拡張機能のurlを表示しない, 文書に埋め込まれた, を表示しないようにします, データurl, データのurlを非表示, data, フィルタの条件を反転させ, フィルタにマッチしないログを表示します, invert, 指定した文字列を含むファイル名に絞り込みます, jpg, の様に正規表現で絞り込んだり, mime, larger, than, の様に指定して, 1kb, 以上の, ファイルのみに絞り込むこともできます, ネットワークログを, 形式のファイルにエクスポートします, harをエクスポート, export, 形式のファイルをインポートします, harファイルをインポート, import, を追加します, その他のネットワーク状態, 通信状態が良くない場合の表示を確認するために, キャッシュを無効化します, キャッシュを無効化, ページを再描画した時でもネットワークログの表示をクリアせず, ネットワークログの中から文字列を検索します, フィルタバーの表示, 表示されているネットワークログを消去します, ネットワークログを消去, ネットワークのロギングを開始, ネットワークログの記録を停止, recoding, ソースマップを使用してデプロイするのではなく, オリジナル, コードをデバッグする, ソースマップ機能を用いると, デバッグの際にコンパイル済ソースではなく, コンパイル前のソースを用いてデバッグすることができるようになります, 複数の, ファイルをコンパイルしてひとつのソースにまとめ, コンパクト化することがあります, クロスサイトスクリプティング, といった, trusted, の違反を検出した場合にブレークします, 信頼できるタイプのブレークポイント, csp違反ブレークポイント, violation, 対象を指定することなる, マウス, のクリック, click, イベント発生時や, キーボード, keyboard, のプレス, keypress, イベント発生時などにブレークすることができます, イベントリスナーブレークポイント, listener, などのグローバルオブジェクトに設定されたイベントリスナの一覧を表示します, グローバルリスナー, domに対するブレークポイントの一覧を表示します, ブレークポイントは, の要素右クリックから追加削除することができます, を指定しておくと, xmlhttprequest, が行われた時にブレークします, フェッチブレークポイント, 現在の実行行のコールスタックを表示します, コールスタック, 現在の関数スコープ, および, グローバルスコープの変数と値の一覧を表示します, 設定したブレークポイントの一覧を表示します, ブレークポイントはソースコードの行数の左側をクリックすることで追加できます, ブレークポイント, 変数や式をウォッチします, アイコンで変数や式を追加します, refresh, アイコンで変数や式の値をリフレッシュします, スレッドの一覧を表示します, を使用して複数スレッドを実行している場合のみ表示されます, スレッド, threads, すべてのブレークポイントを一時的に無効化します, ブレークポイントを無効化, deactivate, ステップ, 現在の関数を終了させ, 呼び出し元関数に戻る箇所まで実行します, 現在の関数からステップアウト, out, current, 次の関数呼び出しにステップイン, 関数があっても関数の中には入りません, 次の関数呼び出しにステップオーバー, over, 再開します, resume, execution, をブレークポイントで停止させて変数を確認したりなどのデバッグを行うことができます, パネルの右側に表示されるペインです, ファイルを無視リストに追加します, 無視リストにスクリプトを追加, 名前を付けてファイルを保存します, 名前を付けて保存, ファイルをオーバーライドリストに登録します, に追加します, ソースマップを追加, ファイル名のみをコピーします, ファイル名をコピー, リンクアドレス, リンクのアドレスをコピー, ソースをブラウザの新しいタブで開きます, このファイルを, サイドバーに表示します, ナビゲーターのサイドバーに表示, 下記のポップアップメニューがあります, でエディタに関する様々な設定を行うことができます, ワークスペースを用いて実ソースとマッピングすると, 実ソースをブラウザで修正しながらデバッグすることもできます, ソースコードを編集し, オーバーライドに保存することで一時的に修正したソースをデバッグすることもできます, もう一度クリックするとブレークポイントをキャンセルします, 行番号の左側をクリックするとブレークポイントを設定します, ブロック先頭行の行番号の右側にマウスをあてると, が表示され, ブロックを折り畳むことができます, 最下部にある, をクリックすると自動整形表示, 自動整形で改行された行は行番号が, を押すと検索ボックスを開きます, ソースを表示, 編集します, パネルの中央に表示されるペインです, ファイルを開きます, optn, 無視リストのソースの表示, 無視リストのソースを非表示にする, listed, 実装元ごとにグルーピングする, 実装元ごとにグループ化, authored, deployed, ページやコンテンツスクリプトをフォルダ毎にグルーピングする, フォルダ別に分類, その他のオプション, デバッグの際によく使う, をスニペットとして記録しておくことができます, 例えば下記のスクリプトをスニペットとして登録しておけば, の代わりに, を使用することができるようになります, snippets, インストールされているコンテンツスクリプトの一覧を表示します, コンテンツスクリプト, リクエストに対するレスポンスをオーバーライドして, 上書きして, テストすることができます, ファイル名の小さな紫の, はファイルがオーバーライドされていることを意味します, オーバーライドしたリソースがオーバーライドフォルダに登録され, このファイルに対するリクエストはネットワーク経由ではなく, オーバーライドフォルダから読み込まれるようになります, でファイル名の右クリックから, を実行します, ナビゲータ, webサイトにアクセスし, でファイルを編集します, オーバーライド用のフォルダを選択, からオーバーライド用に使用するフォルダ, temp, を指定してアクセスを許可しておきます, ローカルホスト上のリソースを表示している際に, で編集した内容をローカルホストのファイルに同期して修正を保存することができます, 通常の編集ではネットワーク経由のリソースを一時的に変更しているだけですが, ワークスペース経由で変更をオリジナルソースに反映することができます, ペインでファイルを編集し, で保存します, ファイル名に小さな緑の, はネットワーク経由のアクセスと, ワークスペース経由のアクセスが同期していることを示します, フォルダの追加, をクリックし, フォルダを選択し, アクセスを許可します, を開いた状態で, にアクセスします, これを, でアクセスできる状態とします, ローカルフォルダの, などのソースコードがあるとします, の一覧をツリー形式で表示します, やその, に含まれるリソースファイルの一覧をツリー形式で表示します, パネルの左側に表示されるペインです, 編集したソースファイルを, 機能で保存しておくこともできます, ソースファイルは編集することもできます, ソースファイルを表示します, に登録した, を実行することもできます, を入力して実行することもできます, エラーメッセージや, などで書き出したメッセージを表示します, 複数のファイル, がメッセージを書き出している場合, 書き出したファイルで絞り込むこともできます, ユーザーが, から書き出したもののみに絞ることができます, コンソールに表示するメッセージのログレベルを, debug, info, warn, で選択します, コンソールに関する設定を行います, revolution, コンソールの入力履歴からのオートコンプリートを有効にします, form, xmlhttprequestsをログ, ネットワークを非表示, コンソールの設定, コンソールの表示を, 入力した文字を含む行だけにフィルタリングします, とすることで正規表現も利用できます, ライブ式を作成します, 例えば変数名を指定するとコンソールの上部に変数名とその値が常に表示され, の実行により変数がどのように変化していくかをリアルタイムに確認することができます, ライブ式を作成, create, live, expression, のコンテキスト, が何を示すかを選択します, コンソールの表示をクリアします, も使用できます, コンソールを消去, を表示, 非表示します, コンソールサイドバーを表示, 非表示にします, ネットワークエラーの場合, エラーメッセージの右側のアイコンから該当のネットワーク通信の詳細画面にジャンプできます, を直接実行することもできます, ページ内で発生したエラーや, などで書き出されるコンソールログを表示します, アクセシビリティの充足状況を確認するために, アクセシビリティツリー, aria属性, 計算済みプロパティを表示します, 画面上の表示が, 上ではどのような順番で記述されているか, 音声ブラウザなどでどの順番で読み上げられるか, を表示することができます, 選択した要素のプロパティリストを表示します, 右クリックするとプロパティをコピーしたり, に追加することができます, プロパティ, properties, で設定した, に対するブレークポイントの一覧を表示します, 選択した要素に設定されているイベントリスナーの一覧を表示します, イベントリスナー, 要素の右側に表示される, バッジをクリックした際に表示されるグリッドやフレックスの詳細表示に関して, グリッド線, トラックサイズ, 領域名などの表示, 非表示設定を行います, 選択した要素に最終的に適用されれいるスタイルを表示します, 最上部は要素のマージン, 複数のフォントが指定されている場合, 最下部には最終的にどのフォントが採用されているかを表示します, 計算済み, computed, 選択した要素に関するスタイルを表示します, 無視されているものは打消し線で表示されます, 値をダブルクリックすることで値を変更したり, プロパティは, abc, 順に表示されますが, グループ別に表示することもできます, 最下部は要素のマージン, プロパティの値を変更したり, パネルの右側ペインです, 要素を, で参照可能なグローバル変数に設定します, 変数には, temp1, temp2, temp3, などの名前がつけられます, tempx, を表示したり, で操作したりすることができます, グローバル変数として保存, store, バッジの表示, 非表示を設定します, バッジには, snap, container, slot, subgrid, の種類があります, バッジの設定, badge, setting, 現在フォーカスが当たっているノードに移動します, フォーカス, 選択ノードが表示される位置まで画面をスクロールさせます, 表示される位置までスクロール, ノードのスクリーンショットをキャプチャします, ノードをキャプチャするとスクロールしないと見えない領域を含めてすべてキャプチャすることができます, キャプチャした結果はダウンロードフォルダに, 形式で保存されます, 子要素をすべて折りたたみます, 子を折り畳む, collapse, children, 子要素をすべて開きます, 再帰的に展開, recursively, で要素や属性が変更されるタイミングにブレークポイントを設定して, をデバッグすることができます, 選択ノードが削除された時, ブレークします, ノード削除, removal, 選択ノードの属性が追加, 削除されたとき, 属性値が変更されたときにブレークします, 属性の変更, 選択したノードの子ノードが追加, 削除された時, 子ノードのコンテンツが変更された時にブレークします, 子ノードの属性や選択ノードの変更ではブレークしません, サブツリーの変更, subtree, 要素の状態を強制的に設定します, 状態には, active, visited, within, visible, を指定できます, 状態を強制, 要素を非表示にします, 非表示となった要素には先頭に薄い, 再度実行すると再表示します, 要素を非表示, した要素を張り付けます, 貼り付け, 要素を様々な形式でコピーします, この要素を示すフル, div, 完全なxpathをコピー, full, xpathをコピー, この要素に適用されている, スタイルをコピーします, 26pt, スタイルをコピー, でこの要素を取得するコードをコピーします, queryselector, jsパスをコピー, セレクタをコピーします, selectorをコピー, 部分をコピーします, outerhtmlをコピー, 要素をコピーします, 要素をコピー, 要素を切り取ります, すると要素が移動します, 切り取り, 要素を削除します, 要素を削除, delete, 要素を複製します, 要素を複製, duplicate, htmlとして編集します, htmlとして編集, edit, 要素に属性を追加します, 属性を追加, 右クリックメニューで下記の操作ができます, バッジをクリックすると, などの詳細情報を表示することができます, などの場合, 要素の右側に, などのバッジが表示されます, 要素を選択してキーボードのカーソルキーで要素を開いたり閉じたりすることもできます, 要素をドラッグ, ドラッグすると要素を移動することができます, 要素をダブルクリックすると属性などを編集することができます, mac, で検索ボックスを開きます, 要素選択アイコンをクリックしてから画面をクリックすることで, 対応する, を選択することもできます, 要素をクリックすると対応する表示部の色が変わります, はツリー形式で開いたり閉じたりすることができます, htmlの要素, パネルの左側ペインです, やスタイル, を確認したり変更したりすることができます, devtoolsの問題を報告するサイトを開きます, devtoolsの問題を報告, report, の新機能に関するドキュメントを表示します, リリースノート, release, notes, に関するドキュメントを表示します, ヘルプ, 設定画面を開きます, ショートカットを表示, パネルでソースを開きます, コマンドを実行, run, ツールを開きます, サーチ, コンソールドロワーを表示, drawer, をどこに表示するかを指定します, デフォルトは右側ですが, 別ウィンドウに変更することができます, 固定サイド, dock, side, 各種設定を行います, モードにすると, 各種スマートフォンやタブレットでの表示を試してみることができます, デバイスを, モードと, モードに切り替えます, 画面をクリックすると, パネルが開き, 該当する要素が選択されます, クリックすると要素選択モードとなり, 画面上の要素を選択することができます, パネルから, 要素を右クリックして, でスクロールを含めた画面全体のキャプチャを取得することができます, ページ全体や一部のスクリーンショットを撮る, ページのパフォーマンス, の観点からwebページを総合評価し, 改善の提案を受けることができます, webページを総合評価する, ペインでネットワーク, メモリなどの性能情報をグラフ化し, 性能のボトルネックがどこにあるか解析することができます, 性能ボトルネックを見つける, サーバからのレスポンスの一部を強制的に書き換えてテストすることができます, レスポンスの一部を書き換える, webページをネットワーク経由で確認しながら, ローカルフォルダのソースファイルを直接書き換えることができます, ローカルフォルダのソースファイルを直接書き換える, ソースの行番号の左をクリックしてブレークポイントを設定し, でステップ実行, ステップイン, ステップアウト, ステップオーバー, などのデバッグを行うことができます, をデバッグする, でリクエスト, レスポンスをキャプチャして, リクエストヘッダ, レスポンスヘッダ, ボディ情報を確認することができます, レスポンスの中身を確認する, パネルの左上にある, デバイスのツールバーを切り替え, toggle, device, のスマートフォンでどのように表示されるか確認することができます, スマートフォンでの表示を確認する, japanese, 日本語, を選択して, を再起動します, 日本語モードにする, を開き, コマンドを検索実行します, コマンド実行する

Text of the page (random words):
能を用いると サーバからのレスポンスの一部を強制的に書き換えてテストすることができます 性能ボトルネックを見つける パフォーマンス performance ペインでネットワーク cpu メモリなどの性能情報をグラフ化し 性能のボトルネックがどこにあるか解析することができます webページを総合評価する ライトハウス lighthouse パネルで ページのパフォーマンス アクセシビリティ ベストプラクティス seo の観点からwebページを総合評価し 改善の提案を受けることができます ページ全体や一部のスクリーンショットを撮る 要素 elements パネルから html 要素を右クリックして ノードのスクリーンショットをキャプチャ capture node screenshot でスクロールを含めた画面全体のキャプチャを取得することができます 上部アイコン 要素選択アイコン クリックすると要素選択モードとなり 画面上の要素を選択することができます 画面をクリックすると 要素 elements パネルが開き 該当する要素が選択されます デバイス切り替えアイコン デバイスを デスクトップ モードと モバイル モードに切り替えます モバイル モードにすると 各種スマートフォンやタブレットでの表示を試してみることができます 設定アイコン 各種設定を行います 詳細は 設定 settings を参照してください カスタマイズアイコン 固定サイド dock side devtools をどこに表示するかを指定します デフォルトは右側ですが 下側 左側 別ウィンドウに変更することができます コンソールドロワーを表示 show console drawer ドロワー を開きます 検索 search サーチ search ツールを開きます コマンドを実行 run command コマンドメニュー を開きます ファイルを開く open file ソース sources パネルでソースを開きます その他のツール more tools 各種 ツール tools を開きます ショートカットを表示 show shortcuts ショートカット shortcuts 設定画面を開きます ヘルプ ドキュメント documentation devtools に関するドキュメントを表示します リリースノート release notes devtools の新機能に関するドキュメントを表示します devtoolsの問題を報告 report a devtools issue devtoolsの問題を報告するサイトを開きます 要素 elements html要素 dom やスタイル css を確認したり変更したりすることができます domツリー 要素 elements パネルの左側ペインです htmlの要素 dom を表示します dom はツリー形式で開いたり閉じたりすることができます 要素をクリックすると対応する表示部の色が変わります 要素選択アイコンをクリックしてから画面をクリックすることで 対応する dom を選択することもできます ctrl f mac は command f で検索ボックスを開きます 要素をダブルクリックすると属性などを編集することができます 要素をドラッグ ドラッグすると要素を移動することができます 要素を選択してキーボードのカーソルキーで要素を開いたり閉じたりすることもできます grid や flex などの場合 要素の右側に grid や flex などのバッジが表示されます バッジをクリックすると grid や flex などの詳細情報を表示することができます 右クリックメニューで下記の操作ができます 属性を追加 add attribute 要素に属性を追加します htmlとして編集 edit as html htmlとして編集します 要素を複製 duplicate element 要素を複製します 要素を削除 delete element 要素を削除します 切り取り cut 要素を切り取ります paste すると要素が移動します コピー copy 要素を様々な形式でコピーします 要素をコピー copy element 要素をコピーします outerhtmlをコピー copy outerhtml outerhtml 部分をコピーします selectorをコピー copy selector この要素を示す css セレクタをコピーします 例 x123 jsパスをコピー copy js path javascript でこの要素を取得するコードをコピーします 例 document queryselector x123 スタイルをコピー copy styles この要素に適用されている css スタイルをコピーします 例 font size 26pt xpathをコピー copy xpath この要素を示す xpath をコピーします 例 id x123 完全なxpathをコピー copy full xpath この要素を示すフル xpath をコピーします 例 html body div 2 貼り付け paste cut や copy した要素を張り付けます 要素を非表示 hide element 要素を非表示にします 非表示となった要素には先頭に薄い が表示されます 再度実行すると再表示します 状態を強制 force state 要素の状態を強制的に設定します 状態には active hover focus visited focus within focus visible を指定できます ブレークポイントの位置 break on javascript で要素や属性が変更されるタイミングにブレークポイントを設定して javascript をデバッグすることができます サブツリーの変更 subtree modifications 選択したノードの子ノードが追加 削除された時 子ノードのコンテンツが変更された時にブレークします 子ノードの属性や選択ノードの変更ではブレークしません 属性の変更 attribute modifications 選択ノードの属性が追加 削除されたとき 属性値が変更されたときにブレークします ノード削除 node removal 選択ノードが削除された時 ブレークします 再帰的に展開 expand recursively 子要素をすべて開きます 子を折り畳む collapse children 子要素をすべて折りたたみます ノードのスクリーンショットをキャプチャ capture node screenshot ノードのスクリーンショットをキャプチャします body ノードをキャプチャするとスクロールしないと見えない領域を含めてすべてキャプチャすることができます キャプチャした結果はダウンロードフォルダに png 形式で保存されます 表示される位置までスクロール scroll into view 選択ノードが表示される位置まで画面をスクロールさせます フォーカス focus 現在フォーカスが当たっているノードに移動します バッジの設定 badge setting バッジの表示 非表示を設定します バッジには grid flex scroll snap ad container slot top layer reveal subgrid media の種類があります グローバル変数として保存 store as global variable 要素を console で参照可能なグローバル変数に設定します 変数には temp1 temp2 temp3 などの名前がつけられます console で tempx を表示したり javascript で操作したりすることができます スタイル 要素 elements パネルの右側ペインです スタイル css 情報を表示します プロパティの値を変更したり プロパティを追加することもできます スタイル styles 選択した要素に関するスタイルを表示します 無視されているものは打消し線で表示されます 値をダブルクリックすることで値を変更したり プロパティを追加することもできます プロパティは abc 順に表示されますが グループ別に表示することもできます 最下部は要素のマージン パディング ボーダーの太さを表示します 計算済み computed 選択した要素に最終的に適用されれいるスタイルを表示します 最上部は要素のマージン パディング ボーダーの太さを表示します 複数のフォントが指定されている場合 最下部には最終的にどのフォントが採用されているかを表示します レイアウト layout 要素の右側に表示される grid や flex バッジをクリックした際に表示されるグリッドやフレックスの詳細表示に関して グリッド線 トラックサイズ 領域名などの表示 非表示設定を行います イベントリスナー event listeners 選択した要素に設定されているイベントリスナーの一覧を表示します domブレークポイント dom breakpoints ブレークポイントの位置 break on で設定した dom に対するブレークポイントの一覧を表示します プロパティ properties 選択した要素のプロパティリストを表示します 右クリックするとプロパティをコピーしたり 監視 watch に追加することができます アクセシビリティ accessibility アクセシビリティの充足状況を確認するために アクセシビリティツリー aria属性 計算済みプロパティを表示します また 画面上の表示が html 上ではどのような順番で記述されているか 音声ブラウザなどでどの順番で読み上げられるか を表示することができます コンソール console ページ内で発生したエラーや javascript の console log などで書き出されるコンソールログを表示します コンソールから javascript を直接実行することもできます ネットワークエラーの場合 エラーメッセージの右側のアイコンから該当のネットワーク通信の詳細画面にジャンプできます ツールバー コンソールサイドバーを表示 非表示にします show hide console sidebar アイコン コンソールサイドバー を表示 非表示します コンソールを消去 clear console アイコン コンソールの表示をクリアします ctrl l も使用できます javascriptコンテキスト javascript context 選択肢 javascript のコンテキスト this が何を示すかを選択します ライブ式を作成 create live expression アイコン ライブ式を作成します 例えば変数名を指定するとコンソールの上部に変数名とその値が常に表示され javascript の実行により変数がどのように変化していくかをリアルタイムに確認することができます フィルタ filter コンソールの表示を 入力した文字を含む行だけにフィルタリングします 文字列 とすることで正規表現も利用できます コンソールの設定 console settings アイコン コンソールに関する設定を行います ネットワークを非表示 hide network 404 not found などのネットワーク系のメッセージを表示しなくなります ログを保持 preserve log ページを再描画した時でもコンソールの表示をクリアせず 保持したままにします 選択したコンテンツのみ selected context only javascriptコンテキスト 選択肢で選択したコンテキストから書き出されたメッセージのみに絞り込みます コンソールの類似するメッセージをまとめる group similar messages in console 同じメッセージが表示された場合 メッセージを書き出すのではなく 前のメッセージの表示カウントをインクリメント表示します コンソールにcorsエラーを表示する show cors errors in console コンソールに cors エラーを表示します xmlhttprequestsをログ log xmlhttprequests コンソールに xmlhttpreuqests 関連の状況を示すログを表示します 先行評価 eager evaluation コンソールに変数名などを入力する際に入力が完了する前にマッチする変数があればその値を表示します 履歴から予測入力 autocomplete form history コンソールの入力履歴からのオートコンプリートを有効にします コード評価をユーザアクションとして扱わない treat code revolution as user action ユーザが何らかのページ操作を行った場合 navigator useractivation isactive が false から true になります コンソールから javascript 操作を行った場合もこのフラグが true になりますが このチェックボックスをオフにしておくと true にならなくなります このフラグをみてフォームに入力中か否かを判断しているようなページのデバッグに有効です コンソールサイドバー コンソールに表示するメッセージのログレベルを 詳細 debug 情報 info log 警告 warn エラー error で選択します ユーザーが javascript から書き出したもののみに絞ることができます 複数のファイル html js がメッセージを書き出している場合 書き出したファイルで絞り込むこともできます コンソールペイン エラーメッセージや javascript の console log や console error などで書き出したメッセージを表示します javascript を入力して実行することもできます スニペット に登録した javascript を実行することもできます ソース sources ソースファイルを表示します ソースファイルは編集することもできます 編集したソースファイルを オーバーライド 機能で保存しておくこともできます ナビゲーター navigator ソース sources パネルの左側に表示されるペインです url やその url に含まれるリソースファイルの一覧をツリー形式で表示します ページ page ページ html や js や css など の一覧をツリー形式で表示します ワークスペース workspace ローカルホスト上のリソースを表示している際に devtools で編集した内容をローカルホストのファイルに同期して修正を保存することができます 詳細 ローカルフォルダの c my app に index html などのソースコードがあるとします これを http localhost index html でアクセスできる状態とします devtools を開いた状態で http localhost index html にアクセスします ソース sources の ナビゲーター navigator ペインの ワークスペース workspace で フォルダの追加 add folder をクリックし c my app フォルダを選択し アクセスを許可します ファイル名に小さな緑の はネットワーク経由のアクセスと ワークスペース経由のアクセスが同期していることを示します エディタ editor ペインでファイルを編集し ctrl s で保存します 通常の編集ではネットワーク経由のリソースを一時的に変更しているだけですが ワークスペース経由で変更をオリジナルソースに反映することができます オーバーライド overrides リクエストに対するレスポンスをオーバーライドして 上書きして テストすることができます 詳細 ソース sources の ナビゲーター navigator ペインの オーバーライド overrides で オーバーライド用のフォルダを選択 select folder for overrides からオーバーライド用に使用するフォルダ 例 c temp chrome override を指定してアクセスを許可しておきます webサイトにアクセスし エディタ editor でファイルを編集します ナビゲータ navigator でファイル名の右クリックから コンテンツをオーバーライド override content を実行します オーバーライドしたリソースがオーバーライドフォルダに登録され 以後 このファイルに対するリクエストはネットワーク経由ではなく オーバーライドフォルダから読み込まれるようになります ファイル名の小さな紫の はファイルがオーバーライドされていることを意味します コンテンツスクリプト content scripts インストールされているコンテンツスクリプトの一覧を表示します 詳細 スニペット snippets デバッグの際によく使う javascript をスニペットとして記録しておくことができます 例えば下記のスクリプトをスニペットとして登録しておけば document queryselectorall の代わりに を使用することができるようになります function arg return document queryselectorall arg その他のオプション more options アイコン フォルダ別に分類 group by folder ページやコンテンツスクリプトをフォルダ毎にグルーピングする しないを切り替えます 作成元 実装元ごとにグループ化 group by authored deployed 作成元 実装元ごとにグルーピングする しないを切り替えます 現時点では実験的機能です 無視リストのソースを非表示にする hide ignore listed sources 無視リストのソースの表示 非表示を切り替えます 現時点では実験的機能です ファイルを開く optn file ファイルを開きます エディタ editor ソース sources パネルの中央に表示されるペインです ソースを表示 編集します ctrl f macは command f を押すと検索ボックスを開きます 最下部にある をクリックすると自動整形表示 プリティプリント してくれます 自動整形で改行された行は行番号が になります ブロック先頭行の行番号の右側にマウスをあてると が表示され ブロックを折り畳むことができます 行番号の左側をクリックするとブレークポイントを設定します もう一度クリックするとブレークポイントをキャンセルします ソースコードを編集し オーバーライドに保存することで一時的に修正したソースをデバッグすることもできます ワークスペースを用いて実ソースとマッピングすると 実ソースをブラウザで修正しながらデバッグすることもできます 設定 settings 設定 preference ソース sources でエディタに関する様々な設定を行うことができます 下記のポップアップメニューがあります ナビゲーターのサイドバーに表示 reveal in navigator sidebar このファイルを ナビゲーター サイドバーに表示します 新しいタブで開く open in new tab ソースをブラウザの新しいタブで開きます リンクのアドレスをコピー copy link address リンクアドレス url をコピーします ファイル名をコピー copy file name ファイル名のみをコピーします ソースマップを追加 add source map ファイルを ソースマップ に追加します コンテンツをオーバーライド override content ファイルをオーバーライドリストに登録します 名前を付けて保存 save as 名前を付けてファイルを保存します 無視リストにスクリプトを追加 add script to ignore list ファイルを無視リストに追加します デバッガー debugger ソース sources パネルの右側に表示されるペインです javascript をブレークポイントで停止させて変数を確認したりなどのデバッグを行うことができます ツールバー toolbar スクリプトの実行を一時停止 再開 pause resume script execution f8 スクリプトの実行を一時停止 または 再開します 次の関数呼び出しにステップオーバー step over next function call f10 1処理分ステップ実行します 関数があっても関数の中には入りません 次の関数呼び出しにステップイン step into next function call f11 1処理分ステップ実行します 関数があれば関数の中に入ります step f9 との違いがよく分かりません 現在の関数からステップアウト step out of current function shift f11 現在の関数を終了させ 呼び出し元関数に戻る箇所まで実行します ステップ step f9 1処理分ステップ実行します 関数があれば関数の中に入ります step into next function call f11 との違いがよく分かりません ブレークポイントを無効化 deactivate breakpoints ctrl f8 すべてのブレークポイントを一時的に無効化します スレッド threads スレッドの一覧を表示します web workers を使用して複数スレッドを実行している場合のみ表示されます 監視 watch 変数や式をウォッチします アイコンで変数や式を追加します refresh アイコンで変数や式の値をリフレッシュします ブレークポイント breakpoints 設定したブレークポイントの一覧を表示します ブレークポイントはソースコードの行数の左側をクリックすることで追加できます 範囲 scope 現在の関数スコープ および グローバルスコープの変数と値の一覧を表示します コールスタック call stack 現在の実行行のコールスタックを表示します xhr フェッチブレークポイント xhr fetch breakpoints url を指定しておくと その url に xmlhttprequest や fetch が行われた時にブレークします domブレークポイント dom breakpoints domに対するブレークポイントの一覧を表示します dom ブレークポイントは domツリー の要素右クリックから追加削除することができます グローバルリスナー global listeners window などのグローバルオブジェクトに設定されたイベントリスナの一覧を表示します イベントリスナーブレークポイント event listener breakpoints 対象を指定することなる マウス mouse のクリック click イベント発生時や キーボード keyboard のプレス keypress イベント発生時などにブレークすることができます csp違反ブレークポイント csp violation breakpoints クロスサイトスクリプティング xss といった trusted type の違反を検出した場合にブレークします 詳細は 信頼できるタイプのブレークポイント を参照してください ソースマップ source map 複数の css や javascript ファイルをコンパイルしてひとつのソースにまとめ コンパクト化することがあります ソースマップ機能を用いると デバッグの際にコンパイル済ソースではなく コンパイル前のソースを用いてデバッグすることができるようになります 詳細は ソースマップを使用してデプロイするのではなく オリジナル コードをデバッグする を参照してください ネットワーク network ツールバー ネットワークログの記録を停止 stop recoding network log ネットワークのロギングを開始 停止します ネットワークログを消去 clear network log 表示されているネットワークログを消去します フィルタ filter フィルタバーの表示 非表示を切り替えます 検索 search ネットワークログの中から文字列を検索します ログを保持 preserve log ページを再描画した時でもネットワークログの表示をクリアせず 保持したままにします キャッシュを無効化 disable cache キャッシュを無効化します スロットリング throttling 通信状態が良くない場合の表示を確認するために ネットワーク速度を意図的に遅い状態をシミュレートします ダウンロード速度 アップロード速度 レイテンシ パケットロス率 パケットキューの長さを指定してカスタマイズした通信状態を作成することもできます その他のネットワーク状態 more network conditions ドロワー に ネットワーク状態 network conditions を追加します harファイルをインポート import har file アイコン har http archive 形式のファイルをインポートします harをエクスポート export har アイコン ネットワークログを har http archive 形式のファイルにエクスポートします フィルタバー フィルタ filter 指定した文字列を含むファイル名に絞り込みます png jpg の様に正規表現で絞り込んだり mime type image png larger than 1k の様に指定して 1kb 以上の image png ファイルのみに絞り込むこともできます 詳細 反転 invert フィルタの条件を反転させ フィルタにマッチしないログを表示します データのurlを非表示 hide data urls html 文書に埋め込まれた データurl を表示しないようにします 拡張機能のurlを表示しない hide extension urls 拡張機能により取得されたurlを表示しません すべて all 表示するurlの種別を選択します ブロック中のレスポンスcookie blocked response cookies 何らかの理由でブロックされたレスポンス cookie を含むログのみを表示します ブロックされたリクエスト blocked requests ネットワークリクエストブロック でブロックされたログのみを表示します サードパーティのリクエスト 3rd party requests サードパーティのリクエストログのみを表示します グラフペイン httpの送受信をグラフ表示します 縦の青い線は domcontentloaded イベントが発生するタイミングを示します 縦の赤い線は load イベントが発生するタイミングを示します クリックすると範囲選択バーが表示され 選択した範囲の送受信のみに絞り込むことができます ダブルクリックすると範囲選択モードが解除されます テーブルペイン 個々の送受信に関する情報をテーブル形式で表示します タイトルを右クリックすることで name path url method status protocol scheme domain remote address remote address scope type initiator initiator address scope cookies set cookies size time priority connection id has overrides waterfall の中から表示する列を選択することができます 上記の中からウォーターフォール waterfall を表示すると リクエスト毎に所要時間をグラフで表示することができます shift キーを押しながら行にマウスを乗せると その通信の元になった通信が緑色で表示されます タイトル右クリックで ウォーターフォール waterfall を表示してグラフにマウスを乗せると 送受信のキューイング時間 待ち時間 dns解決時間 初期接続時間 要求送信時間 応答待ち時間 応答ダウンロード時間の詳細を表示することができます 名前 name 列のファイル名をクリックする 詳細ペイン を表示します ファイルを右クリックすると下記のメニューが表示されます ソース パネルで開く open in sources panel ファイルを ソース sources パネルで開きます 新しいタブで開く open in new tab ファイルをブラウザの新しいタブで開きます ブラウザキャッシュを消去 clear browser cache ブラウザのキャッシュを消去します ブラウザcookieを消去 clear browser cookies ブラウザの cookie を消去します コピー copy コピーバッファにコピーします url コマンドプロンプトから実行する curl コマンド形式 bash から実行する curl コマンド形式 powershell から実行する invoke webrequest コマンド形式 javascript の fetch 形式 node js の fetch 形式 リクエストヘッダー レスポンスヘッダー レスポンス全体 har ファイル形式 など 様々な情報や形式でコピーすることができます ブロックリクエストのurl block request url ネットワークリクエストブロック に url を加えます リクエストドメインをブロック block request domain ネットワークリクエストブロック にドメインを加えます 並べ替え sort by テーブルを指定した列で並べ替えます ヘッダーオプション header options テーブルに表示する列を変更します テーブルヘッダを右クリックした際のメニューと同様です ヘッダーをオーバーライド override headers レスポンスのヘッダ情報を一時的に変更したり追加したりします 例えば 正式サーバ側で cors ヘッダの設定を行う前に cors ヘッダが返却された場合の動作をあらかじめシミュレートすることができます 追加したオーバーライド情報は ソース sources パネルの オーバーライド overrides に保存されます コンテンツをオーバーライド override content コンテンツ自体を一時的にオーバーライドします fetch で呼び出す api のレスポンスを一時的にオーバーライドしたものに置き換えることができます 追加したオーバーライド情報は ソース sources パネルの オーバーライド overrides に保存されます すべてのオーバーライドを表示 show all overrides ソース sources パネルの オーバーライド overrides を開きます コンテンツを一緒にharとしてすべて保存 save all as har with content 表示されているリクエスト レスポンスをすべて コンテンツも含めて har http archive 形式ファイルに保存します 名前をつけて保存 save as 名前を付けてファイルに保存します 詳細ペイン ヘッダー headers 要求 応答メッセージのヘッダ情報を表示します ペイロード payload 要求メッセージのボディ情報を表示します プレビュー preview ファイルの中身をプレビューします レスポンス response 応答メッセージのボディ情報を表示します イニシエータ initiator このファイルが どのファイルから呼び出されたか どのファイルを呼び出しているかを表示します タイミング timing 送受信のキューイング時間 待ち時間 dns解決時間 初期接続時間 要求送信時間 応答待ち時間 応答ダウンロード時間の詳細を表示します cookies cookies 要求 応答メッセージの cookie 情報を表示します パフォーマンス performance ページの性能的なボトルネックを解析するためにパフォーマンスの測定を行います 測定は キャッシュや拡張機能の影響を受けないようにシークレットモードで行うことが推奨されています パフォーマンスパネルの機能を理解するために 下記のサンプルページが用意されています ページを表示して devtools を起動し パフォーマンス performance パネルで プロファイリングを開始してページを再読み込み start profiling and reload page アイコンをクリックし 5秒間の間に add 10 ボタンを十数回程度 青いアイコンの動作が遅くなる程度まで 押してみてください https googlechrome github io devtools samples jank ツールバー 記録 停止 record stop アイコン パフォーマンスのプロファイリングを開始 停止します プロファイリングを開始してページを再読み込み start profiling and reload page アイコン プロファイリングを開始してページを再読み込みします 消去 clear アイコン プロファイリングの結果を消去します プロファイルを読み込みます load profile アイコン プロファイリングの結果を保存した json ファイルから読み込みます プロファイルを保存します save profile アイコン プロファイリングの結果を josn ファイルとして保存します 最近のタイムラインセッションを表示 recording 最近実行したプロファイリングの履歴を表示します スクリーンショット screenshots ロードしたページのスクリーンショットを撮ります 右端に cpu net と表示されているグラフの上にマウスを乗せると その時点のスクリーンショットを表示することができます メモリ memory メモリタイムラインの表示 非表示を切り替えます 詳細 ガベージコレクション collect garbage アイコン ページの記録中にガベージコレクションを強制します キャプチャの設定 capture settings アイコン javascriptのサンプルを無効にする disable javascript samples javascript のサンプリングを無効にして モバイルデバイスに対する実行時のオーバーヘッドを削減します 高度な描画パフォーマンスの測定 低速 を有効にする enable advanced paint instrumentation slow 高度な描画パフォーマンスの測定を有効にします レイヤ layer 機能が有効化されます cssセレクタの統計情報を有効にする 遅い enable css selector stats slow cssセレクタの統計測定を有効にします cpu cpu 低速度の cpu の場合の性能を確認するために c...