Google Chromeの開発者ツール（検証機能）を開いた際に、「コンソールのオブジェクトが見つからない」「どこに表示されているのか分からない」と感じるケースがあります。特にChromebookではWindowsやMacと画面構成が少し異なるため、表示場所に戸惑うことがあります。本記事では、Chrome検証ツールの基本構造とオブジェクト表示の場所について整理します。
Chrome検証ツール（DevTools）の基本構造
Chromeの検証ツールは「Elements（要素）」「Console（コンソール）」「Sources（ソース）」など複数のタブで構成されています。
この中で「オブジェクト」は主にConsoleタブやSourcesタブで扱うデータのことを指します。
そのため、まずはどのタブを見ているかを確認することが重要です。
「オブジェクト」が見えない原因
コンソール内のオブジェクトが見つからない場合、いくつかの原因が考えられます。
・ConsoleタブではなくElementsタブを見ている
・ログ出力されていないため表示されていない
・フィルタ設定で非表示になっている
特に初期状態ではConsoleタブに切り替えないとオブジェクトは表示されません。
Chromebookでの検証ツールの開き方
Chromebook（Dynabook C1）では、通常のChromeと同様に開発者ツールを利用できます。
ショートカットは「Ctrl + Shift + I」または「右クリック → 検証」で開くことが可能です。
開いた後は上部のタブから「Console」を選択することでオブジェクト表示にアクセスできます。
Consoleタブでオブジェクトを確認する方法
Consoleタブでは、JavaScriptの実行結果やオブジェクト内容が表示されます。
例えば「console.log({name:”test”})」のようなコードを実行すると、そのオブジェクトが展開表示されます。
矢印をクリックすることで中身を確認することができます。
オブジェクトが表示されないときのチェックポイント
それでも表示されない場合は、以下を確認することで解決することが多いです。
・Consoleフィルタ（Errors / Warnings / Info）が制限されていないか
・ページのJavaScriptが正しく実行されているか
・拡張機能が影響していないか
特にフィルタ設定は見落としやすいポイントです。
まとめ
Chromeの検証ツールにおける「オブジェクト」は主にConsoleタブで表示されるものであり、タブの切り替えや表示設定によって見え方が変わります。
Chromebookでも基本操作は同じですが、まずConsoleタブを開くことが重要です。
表示されない場合はフィルタやコードの実行状況を確認することで解決できるケースがほとんどです。
コメント