0Pricing
Frontend Academy · レッスン

Chrome DevTools: Elements、Console、Network

Elements、Console、Networkパネルを操作して、スタイルの確認、JavaScriptエラーのデバッグ、HTTPリクエストの監視を行います。

「Chrome DevTools: Elements、Console、Network」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

DevToolsを効率的に開く

任意の要素を右クリックして「検証」を選ぶと、その要素を選択した状態でDevToolsが開きます。F12でパネルの表示を切り替えられます。MacではCmd+Shift+C、WindowsではCtrl+Shift+Cを押すと、パネル全体を開かずに直接検証モードに入れます。

Elementsパネル — DOMインスペクター

Elementsパネルには、生のHTMLソースではなく、解析後の現在のDOMツリーが表示されます。JavaScriptによる変更も反映されます。ノードにカーソルを合わせると、ページ上でその部分がハイライトされます。ダブルクリックすると、HTMLをその場で編集できます。

StylesとComputedペイン

要素を選択すると、Stylesペインに適用されているすべてのCSSルールが詳細度の順に表示されます。取り消し線の付いたルールは上書きされています。Computedペインには、すべてのプロパティの最終的な計算値が表示されます。

要素の状態を強制的に適用する

Stylesペインの「:hov」ボタンをクリックすると、:hover、:focus、:active、:visitedなどのCSS状態を強制的に適用できます。カーソルを完全に静止させ続けなくても、ホバー時のスタイルを確認できます。

ボックスモデルの可視化

Computedペインには、コンテンツ、パディング、ボーダー、マージンからなるインタラクティブなボックスモデル図が表示されます。各領域にカーソルを合わせると、その値を確認できます。クリックすると、マージンとパディングの値をリアルタイムで編集できます。

Consoleの基本 — ログの表示とコードの実行

Consoleにはエラー、警告、ログが表示されます。任意のJavaScript式を入力してEnterを押すと、現在のページを対象に評価できます。ConsoleをインタラクティブなREPLとして使えば、コードスニペットをすぐに試せます。

// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())

Console APIのメソッド

console.log以外にも、console.warn()（黄色の警告）、console.error()（赤色のエラー）、console.table()（配列やオブジェクトを表として表示）、グループ化した出力に使うconsole.group() / console.groupEnd()、計測に使うconsole.time()があります。

Networkパネルの概要

すべてのHTTPリクエスト（HTML、JS、CSS、画像、XHR、Fetch）が行として表示されます。列にはメソッド、ステータス、サイズ、処理時間が示されます。行をクリックすると、リクエストとレスポンスの詳細をすべて確認できます。

ネットワークリクエストを絞り込む

フィルターバーを使うと、URLで検索したり、種類で絞り込んだりできます。種類にはAll、XHR/Fetch、JS、CSS、Img、Media、Font、WSがあります。JavaScriptからのAPI呼び出しをデバッグするときは、XHR/Fetchフィルターが特に便利です。

リクエストとレスポンスを調査する

ネットワークリクエストを選択すると、Headers（リクエストとレスポンスのヘッダー）、Preview（整形されたJSON/HTML）、Response（生の本文）、Timing（接続の各段階）を確認できます。PayloadタブにはPOST本文のパラメーターが表示されます。

スロットリング — 低速ネットワークの再現

スロットルのドロップダウン（デフォルトはNo throttling）をクリックすると、Slow 3G、Fast 3G、Offlineを再現できます。「Disable cache」チェックボックスを有効にすると、テスト中にブラウザーがキャッシュ済みのリソースを使用しなくなります。

確認問題

選択した要素に適用されているすべてのCSSルール（上書きされたルールを含む）は、Chrome DevToolsのどこで確認できますか。

まとめ：Chrome DevToolsの各パネル

Elements：現在のDOMとCSSを調査・編集します。疑似状態を強制的に適用して、ホバー時のスタイルを調査できます。Console：JSのログ出力、デバッグ、リアルタイム実行を行います。Network：すべてのHTTPリクエストを監視し、ヘッダーとレスポンスを調査し、スロットリングで低速接続を再現します。

よくある質問

「Chrome DevTools: Elements、Console、Network」レッスンは無料ですか？

はい。「Chrome DevTools: Elements、Console、Network」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Chrome DevTools: Elements、Console、Network」で何を学びますか？

Elements、Console、Networkパネルを操作して、スタイルの確認、JavaScriptエラーのデバッグ、HTTPリクエストの監視を行います。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「Chrome DevTools: Elements、Console、Network」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Chrome DevTools: Elements、Console、Network
  2. VSCode: 拡張機能、Emmet、ショートカット
  3. PrettierとESLintの設定
  4. ブラウザー互換性とcaniuse.com
← Frontend Academyに戻る