ブログ › チュートリアル

非開発者向けブラウザDevTools：コード不要でサイトの問題を診断

🔧 チュートリアル · 9 分で読める · 2026年7月22日
DevTools はプログラマーだけのものではない ステップ1：DevTools の開き方 Chrome / Edge Firefox Safari 覚えるべきは3つのタブだけ Console タブ：赤いエラーメッセージを読む Console とは 赤＝エラー、黄＝警告 エラーメッセージの読み方 よくあるエラー種類（訳付き） Console で最もよくある5つの問題 Network タブ：失敗したリソースの発見 Network とは 使い方 色分け 注目：ステータスコード 実践：Network で「画像が読み込まれない」を診断 実践：Network で「フォーム送信が無反応」を診断 Elements タブ：要素のスタイルを検査 Elements とは 最も便利な機能：要素を検証 非開発者にできること 注意：Elements での編集は一時的 5つの実例 ケース1：白紙ページ ケース2：画像が壊れたアイコンとして表示 ケース3：フォーム送信後無反応 ケース4：ページの読み込みが非常に遅い ケース5：モバイル布局が崩れる もっと簡単な方法はあるか？ まとめ より効率的にサイトの問題を報告する準備はできましたか？

DevTools はプログラマーだけのものではない

あなたは「Developer Tools（DevTools）」を聞いたことがあり、それがプログラマー専用だと思い込んでいるかもしれません。しかし真相は、DevTools の多くの機能は プログラミングの知識がまったくなくても使える ということです。 こんなシーンを想像してください：
  • ウェブサイトを開いたらページが真っ白——サイトが落ちたのか、それともあなたのネットワークの問題か知りたい
  • フォームに入力し、送信をクリックしたが何も起きない——ボタンが壊れたのか、それともサーバーに届かなかったのか知りたい
  • ページに変なレイアウトがある——ブラウザの問題か、それともサイトのコードのバグか知りたい
これらの答えは DevTools がすべて教えてくれます。しかも一行もコードを書く必要はありません。 本記事では、DevTools の重要な情報を最もシンプルに読み解き、ウェブサイトの問題がどこにあるかを素早く特定する方法をお教えします。

ステップ1：DevTools の開き方

Chrome / Edge

3つの方法から、一番楽なものを選んでください：
  • ショートカット：F12 または Ctrl + Shift + I（Mac：Cmd + Option + I）
  • 右クリックメニュー：ページの任意の場所で右クリック → 「検証」を選択
  • メニューパス：Chrome 右上 ⋮ → その他のツール → デベロッパーツール

    • Firefox

  • ショートカット：F12 または Ctrl + Shift + I
  • 右クリックメニュー：右クリック → 「要素を検証」

    • Safari

    まず開発メニューを有効にします：Safari → 環境設定 → 詳細 → 「メニューバーに開発メニューを表示」にチェック
  • ショートカット：Cmd + Option + I
  • メニューパス：開発 → Webインスペクタを表示
    • 開くと、ブラウザの下部または右側にパネルが表示されます。びっしり詰まったタブに怖気づかないでください——あなたが気にすべきはその中の3つだけです。

    覚えるべきは3つのタブだけ

    DevTools には十数個のタブがありますが、非開発者が必要なのはこの3つだけです：
    タブ 役割 何に使えるか
    Console サイトのエラーと警告を表示 サイトのコードがエラーを起こしたか判定
    Network すべてのネットワークリクエストを表示 画像／API／リソースの読み込み失敗を判定
    Elements ページのHTMLとCSSを表示 要素のスタイルと位置を検査
    順に見ていきましょう。

    Console タブ：赤いエラーメッセージを読む

    Console とは

    Console はサイトの「ブラックボックス」です。サイトのコードでエラーが起きると、ブラウザはここに記録します。車の警告灯のようなものだと想像してください——エンジンの仕組みを理解する必要はないが、どのランプが点いたかは知る必要があります。

    赤＝エラー、黄＝警告

    • 🔴 赤いメッセージ：エラーが発生、要注意
    • 🟡 黄色いメッセージ：警告、問題の可能性はあるが致命的ではない
    • 🔵 青／白いメッセージ：通常のログ、無視してよい

    エラーメッセージの読み方

    Console を開くと、こんな赤い文字が見えるかもしれません： 
    
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at ProductList.jsx:47:18
    英語に怖気づかないでください——分解してみましょう：
    部分 意味 注目すべき点
    TypeError 型エラー エラーの種類
    Cannot read properties of undefined 存在しないデータの読み取りを試みた 問題の説明（そのまま訳せばよい）
    ProductList.jsx:47:18 失敗した場所：ファイル名47行目18列 開発者に直すべき場所を伝える
    このエラーが何を意味するかを理解する必要はありません。あなたがやるべきはただ一つ：この赤いメッセージをスクリーンショットに撮るかコピーして、開発者に送ること。 この一行だけで、開発者の30分の調査時間を節約できます。

    よくあるエラー種類（訳付き）

    英語のエラー 日本語の意味 考えられる原因
    TypeError 型エラー データ形式が不正；オブジェクトを期待したのに空が来た
    ReferenceError 参照エラー 存在しない変数や関数をコードが使った
    SyntaxError 構文エラー ブラウザが解析できないコード記述ミス
    RangeError 範囲エラー 値が許容範囲を超えた
    Network Error ネットワークエラー リクエストがサーバーに届かなかった
    404 Not Found 見つからない 要求したリソースが存在しない
    500 Internal Server Error サーバー内部エラー サーバーコードにバグがある

    Console で最もよくある5つの問題

    1. 白紙ページ ＋ TypeError ページが白紙で読み込まれ、Console に赤い TypeError。大抵は JavaScript のクラッシュで描画できなくなっています。 2. ある機能が反応しない ＋ ReferenceError ボタンをクリックしても何も起きず、Console に赤い ReferenceError。大抵は関連コードが正しく読み込まれていません。 3. データが表示されない ＋ TypeError: Cannot read properties of undefined リストや表の領域が空で、Console にこのエラー。大抵はバックエンドがフロントエンドの期待と異なる形式のデータを返しました。 4. ページの一部が空白 ＋ 404エラー 一部の画像やコンポーネントが表示されず、Console に404。リソースのパスが誤っているかファイルが削除されました。 5. 読み込みが非常に遅い ＋ 黄色い警告が多数 ページの読み込みが遅く、Console に黄色い警告が多数。不必要なリソースを読み込みすぎか、パフォーマンスの問題の可能性があります。

    Network タブ：失敗したリソースの発見

    Network とは

    Network タブは、ページの読み込み時に発行されるすべてのネットワークリクエスト——画像、CSS、JavaScript、APIエンドポイント、フォントファイル、サーバーから取得する一切のリソース——を記録します。

    使い方

  • DevTools を開く
  • Network タブをクリック
  • ページを再読み込み（F5）
  • リクエスト一覧を観察

    • 色分け

    色 意味
    赤 リクエスト失敗（4xx/5xxエラー）
    灰 リクエストがブロックまたはキャンセルされた
    その他の色 リクエスト成功

    注目：ステータスコード

    各リクエストにはステータスコードがあり、問題を直接示す手がかりです：
    ステータス 意味 見られる現象
    200 成功 すべて正常
    301/302 リダイレクト 別のアドレスに飛ばされた
    400 不正なリクエスト フォームデータの形式が不正
    401 未認証 ログイン必要だが未ログイン
    403 禁止 このリソースへの権限がない
    404 見つからない 画像／ページ／APIが存在しない
    429 リクエスト過多 制限され、後ほど再試行を
    500 サーバー内部エラー サーバーコードにバグがある
    502 ゲートウェイ不正 サーバー過負荷またはメンテナンス中
    503 サービス利用不可 サーバーが一時的にリクエスト処理不可

    実践：Network で「画像が読み込まれない」を診断

  • Network タブを開く
  • ページを再読み込み
  • フィルタバーで Img をクリック（画像のみ）
  • 赤いリクエストを見つける
  • ステータスコードを確認：
    • 404 → 画像パス誤りまたは画像削除
    • 500 → 画像リクエスト処理中にサーバーがエラー
    • 対応するリクエストなし → 画像URLがそもそも要求されていない（フロントエンドコードの問題の可能性）

    実践：Network で「フォーム送信が無反応」を診断

  • Network タブを開く
  • 送信ボタンをクリック
  • 新しいリクエストが現れるか確認
  • 新しいリクエストなし → フロントエンドコードが送信していない（ボタンイベント未紐付け）
  • 赤いリクエストあり → ステータスコードでバックエンド問題を判定
  • 200のリクエストだがページ変化なし → バックエンドはデータを返したがフロントエンドが処理せず

    • Elements タブ：要素のスタイルを検査

    Elements とは

    Elements タブはページのHTML構造とCSSスタイルを表示します。要素の属性・スタイル・位置を検査するのに使えます。

    最も便利な機能：要素を検証

  • 検査したい要素を右クリック
  • 「検証」を選択
  • DevTools が該当のHTMLへジャンプ
  • 右パネルにその要素のすべてのCSSスタイルが表示

    • 非開発者にできること

    画像が正しく表示されない理由を確認：
    • <img> タグを見つける
    • src 属性を確認——画像URLは正しいか？
    • width と height を確認——寸法が制約されているか？
    テキストが切れる理由を確認：
    • テキスト要素を見つける
    • CSS の overflow プロパティを確認——hidden に設定されているか？
    • white-space と text-overflow を確認——改行が制限されていないか？
    ボタンがクリックできない理由を確認：
    • ボタン要素を見つける
    • CSS の z-index を確認——他の要素に覆われていないか？
    • pointer-events を確認——クリックが無効化されていないか？
    • display と visibility を確認——非表示になっていないか？

    注意：Elements での編集は一時的

    Elements タブで変更したスタイルは、ページの再読み込み後に元に戻ります。これはデバッグ専用で、サイトを実際に変更するものではありません。安心して試してください——何も壊せません。

    5つの実例

    ケース1：白紙ページ

    症状：サイトを開くとページが真っ白 診断手順：
  • DevTools を開く → Console
  • 赤い TypeError を確認
  • エラーメッセージをコピー
  • 結論：JavaScript のクラッシュで描画できず
    • 開発者への報告：「ページが白紙、Console に TypeError: Cannot read properties of undefined at app.js:23:5」

    ケース2：画像が壊れたアイコンとして表示

    症状：ページ上の画像が壊れたアイコンまたは空白領域として表示 診断手順：
  • 壊れた画像を右クリック → 検証
  • src 属性のURLを確認
  • Network タブを開く → 再読み込み → Imgでフィルタ
  • 該当リクエストを発見、ステータス404
  • 結論：画像ファイル不在またはパス誤り
    • 開発者への報告：「トップページのバナー画像が404、URLは /images/hero-v2.png」

    ケース3：フォーム送信後無反応

    症状：フォーム入力後、送信をクリックしてもページに反応なし 診断手順：
  • Network タブを開く
  • 送信ボタンをクリック
  • 新しいネットワークリクエストが現れない
  • Console を開き、赤い ReferenceError: submitForm is not defined を確認
  • 結論：送信ボタンのイベントハンドラが正しく読み込まれていない
    • 開発者への報告：「送信ボタンクリック無反応、Console に ReferenceError: submitForm is not defined at checkout.js:15:3」

    ケース4：ページの読み込みが非常に遅い

    症状：ページを開くのに10秒以上かかる 診断手順：
  • Network タブを開く
  • ページを再読み込み
  • 下部の読み込み時間統計を確認
  • 「読み込み時間で並べ替え」で最も遅いリクエストを発見
  • 8秒かけて読み込まれた3MBの画像を発見
  • 結論：非圧縮の画像が読み込み遅延の原因
    • 開発者への報告：「ページ読み込み遅延、product-hero.jpg（3MB）の読み込みに8秒、圧縮を推奨」

    ケース5：モバイル布局が崩れる

    症状：スマホでサイトを開くとボタンとテキストが重なる 診断手順：
  • Ctrl + Shift + M を押してデバイスエミュレーション mode へ切り替え
  • 機種を選択（例：iPhone 14）
  • 重なる要素を右クリック → 検証
  • CSS の @media 規則を確認——モバイル対応が欠けていると判明
  • 結論：レスポンシブ布局のメディアクエリ欠如
    • 開発者への報告：「モバイル（幅375px）でボタンが重なる、@media (max-width: 768px) の布局対応欠如」

    もっと簡単な方法はあるか？

    DevTools を開き、Console を探し、Network を見つけ、エラーメッセージをコピーするのがまだ面倒なら——もっと簡単な方法があります。 BugCapturer がこれらをすべて自動でやってくれます。 BugCapturer でスクリーンショットを撮ってフィードバックを送信すると、自動的に収集します：
    • コンソールエラー：最大10件の error レベルログ（ファイル名と行番号付き）
    • 失敗したネットワークリクエスト：最大5件のステータス ≥ 400 のリクエスト（URL、メソッド、ステータスコード付き）
    • 技術環境情報：URL、ブラウザ、OS、画面解像度、ビューポート寸法、DPR
    DevTools を開く必要も、Console の場所を知る必要も、エラーメッセージを手動コピーする必要もありません。ただ：
  • 拡張機能アイコンをクリック
  • 問題の領域を枠選択
  • 注釈を追加
  • 送信をクリック
    • すべての診断情報がメールに自動添付されます。問題発見からレポート送信まで：30秒。

    まとめ

    DevTools の Console と Network は、ウェブサイトの問題を診断する最も直接的なツールです。コードを書く必要はありません——ただ：
  • DevTools を開く（F12）
  • Console の赤いメッセージを読む（コードにエラーがあったか？）
  • Network の赤いリクエストを読む（リソースの読み込みが失敗したか？）
  • エラー情報を開発者に送る（スクショまたはテキストコピー）
    • 毎回 DevTools を手動操作したくなければ、BugCapturer がコンソールエラーと失敗ネットワークリクエストを自動収集し、最もシンプルに完全な診断情報付きのフィードバックを送信できます。

    より効率的にサイトの問題を報告する準備はできましたか？

    BugCapturer を Chrome に追加 — 無料 コンソールエラーと失敗ネットワークリクエストを自動収集——30秒でプロ級の診断レポートを送信。

    #DevTools #browser debugging #website diagnostics #console errors #Chrome extension
    共有

    関連記事

    始めましょう
    バグを説明するのをやめて、
    見せましょう。
    数秒でインストール、今日最初のバグレポートを共有リンクに。
    Chromeに追加 — 無料