Chromeデベロッパーツールの使い方！スマホ表示・HTML編集・エラー確認

外資系SEOスペシャリスト

Takuma Oka (岡 拓馬)

こんにちは、岡 拓馬（おか たくま）です。
このブログでは、海外ノマド×SEO×ストック収入をテーマに、自分の経験や学びを発信しています。

高校卒業後は料理人としてスタートし、その後、航空自衛隊での勤務を経て、2016年からWebライター・SEOコンサルタントとして独立。現在は、海外の外資系企業と契約しながら、フルリモートで働いています。拠点はアジア各国を転々としており、最近はベトナムやタイ、マレーシア、フィリピンなどでノマド生活をしています。

執筆者

こうした報告を受けたとき、いきなり制作会社へ連絡する前に、自分で状況を切り分けられると仕事が一段速くなります。

そのための道具が、Chromeに最初から入っているデベロッパーツール（Chrome DevTools）です。追加インストールは不要で、右クリックの「検証」から今すぐ開けます。

ただし、はじめて開いた人のほとんどは、英語だらけの画面に圧倒されてそっと閉じます。原因はシンプルで、「どのタブが、どの疑問に答えてくれるのか」を知らないまま開いているからです。

＼ サイト診断が無料で行えます！ぜひ試してみてください ／

Chromeデベロッパーツールとは？

結論から言うと、Chromeデベロッパーツールは「今見ているWebページが、実際にどうなっているのかを調べるための検査ツール」です。

Chromeに標準搭載されたWebページの検証ツール

Chromeデベロッパーツールは、Google Chromeに最初から組み込まれている機能です。

拡張機能のインストールも、アカウント登録も、費用も不要です。

確認できる主な内容は、次のとおりです。

「エンジニア向け」という印象が強いツールですが、実際に日々使うのはSEO担当者、Web担当者、広告運用者、WordPressサイトの管理者といった非エンジニアです。

コードを書けなくても、状態を読み取るだけで十分に実用的だからです。

あわせて読みたい

SEOツール利用者ランキング2026｜現役SEOコンサルが全部使って基礎の使い方まで解説 SEOツールの比較記事は世の中に山ほどありますが、その多くは「使ったことがないツールをカタログ的に並べただけ」です。 この記事は違います。紹介する8ツールはすべて...

Chrome DevToolsとデベロッパーツールは同じもの

検索していると複数の呼び方が出てきますが、指しているものは同じです。

表記	補足
Chrome DevTools	公式ドキュメントでの正式な呼び方
Chromeデベロッパーツール	日本語記事で最も一般的
Chrome開発者ツール	Chromeメニュー内の日本語表記
検証（けんしょう）	右クリックメニューの項目名
インスペクタ／Inspect	英語UIでの呼び方

「検証を開く」も「DevToolsを開く」も「F12を押す」も、すべて同じ画面を開く操作です。

呼び方の違いで混乱する必要はありません。

なお、似た名前で「Chrome DevTools Protocol」「Chrome DevTools MCP」というものもありますが、これらは自動操作や外部ツール連携のための仕組みで、今回扱う手動の検証作業とは目的が異なります。この記事では触れません。

DevToolsはテスト環境ではない

ここが最も重要な前提です。

DevToolsで加えた変更は、原則としてページを再読み込みした時点で消えます。そして本番サイトには一切保存されません。

Chrome公式ドキュメントでも、Elementsパネルで行ったDOMツリーへの変更はDevToolsが保存しない、と明記されています（後述するLocal Overridesは例外的な仕組みです）。

つまり、DevToolsの役割は次の4つに整理できます。

実務での使い分けは、次の流れが基本です。

項目	Chrome DevTools	ローカル環境	ステージング環境	本番環境
主な用途	状態確認・一時編集・原因切り分け	コードの実際の修正	公開前の最終確認	一般公開
変更の保存	原則保存されない（再読み込みで消える）	ファイルに保存される	保存される	保存される
影響範囲	自分のブラウザの表示のみ	自分のPCのみ	関係者のみ	全ユーザー
PHPやDBの修正	できない	できる	できる	できる
失敗したときのリスク	ほぼゼロ	小さい	中程度	大きい

【Chrome DevToolsは「テスト環境」ではありません】

Webサイトの修正確認は、目的によって場所を使い分けます。

・DevTools
CSS・HTMLの仮編集、スマホ表示、JSエラー、通信状況の確認

・ローカル環境
PHPやテーマ、プラグイン、DBを含む動作確認

・ステージング環境… pic.twitter.com/e44YtxNi8L

— 岡 拓馬(Takuma Oka)｜AI検索×SEO・SEGO開発 (@OkaTakuma1) July 25, 2026

あわせて読みたい

Googleサーチコンソールのデータをスプレッドシートに自動蓄積する方法【新UI対応・つまずきポイント付き】 サーチコンソール（GSC）のデータには、意外と知られていない致命的な仕様があります。保存期間が16ヶ月しかないということです。 つまり今日確認できる2年前のデータは...

Chromeデベロッパーツールの開き方

開き方は3通りありますが、実務では「右クリック→検証」と「ショートカット」の2つを覚えれば十分です。

右クリックの「検証」から開く

最も直感的で、初心者に一番おすすめの開き方です。

この方法の利点は、クリックした要素のHTMLが最初から選択された状態で開くことです。「このボタンのHTMLが見たい」という目的なら、これが最短です。

ショートカットキーで開く

慣れてきたらショートカットのほうが速いです。よく使う4つだけ覚えてください。

操作	Mac	Windows
DevToolsを開く／閉じる	Command + Option + I	F12 または Ctrl + Shift + I
要素選択モード（クリックした要素を調べる）	Command + Shift + C	Ctrl + Shift + C
Consoleを開く	Command + Option + J	Ctrl + Shift + J
デバイスモード（スマホ表示）の切り替え	Command + Shift + M	Ctrl + Shift + M
コマンドメニューを開く	Command + Shift + P	Ctrl + Shift + P
キャッシュを無視して再読み込み	Command + Shift + R	Ctrl + Shift + R

特にコマンドメニュー（Command/Ctrl + Shift + P）は覚える価値が高いショートカットです。

機能名の一部を入力すれば、どのパネルにあるかを知らなくても目的の機能を呼び出せます。後述するフルサイズのスクリーンショットも、ここから実行します。

表示位置を変更する

DevToolsが画面の右半分を占領して、ページ本体が細長くなってしまう、初心者が最初につまずくのがこれです。

表示位置は自由に変えられます。

選べる位置は4つです。

「別ウィンドウ」は特に、モニターが2枚ある環境で威力を発揮します。

Chromeデベロッパーツールを日本語化する方法

DevToolsのUIは日本語表示に切り替えられます。Chrome 94以降、日本語を含む80以上の言語に対応しました。

「Browser UI Language」を選ぶと、Chrome本体の表示言語に自動で合わせられます。

あわせて読みたい

GA4のデータをスプレッドシートに自動出力する方法【公式アドオンGA4 Reports Builder・注意点付き】 GA4の画面、正直使いにくくないでしょうか。ちょっとした数字を確認するだけでも探索レポートを組む必要があり、月次の定点観測のたびにポチポチやるのは苦行です。 そ...

ElementsでHTML・CSSを一時編集する方法

Elementsパネルは、今表示されているページのHTMLとCSSを確認し、その場で書き換えて見た目を試せる機能です。

「この見出しを1行短くしたらどう見えるか」「ボタンの色を変えたら目立つか」を、制作会社に依頼する前に自分で試せます。

調べたい要素を選択する

まず、調べたい部分のHTMLにたどり着く必要があります。手順は次のとおりです。

画面下部にはパンくず表示（例：body > div.container > main > h2）が出ます。これは「今選んでいる要素が、どの階層にあるか」を示すもので、親要素を選び直したいときに便利です。

見出しやボタンの文章を仮編集する

文言変更の効果は、実際に画面へ入れてみないと判断できません。DevToolsなら30秒で試せます。

タグごと書き換えたい場合は、要素を右クリックして「Edit as HTML」（Macは F2 でも可）を選ぶと、HTMLをまとめて編集できます。

この変更は、ページを再読み込み（F5）した瞬間に消えます。

あわせて読みたい

【2026年最新】Udemy最安値クーポン配布中！SEO・AI・営業コース【毎月更新】 こんにちは、岡 拓馬（@OkaTakuma1）です。 普段は海外（現在はベトナム・ダナン）を拠点に、外資系企業のSEOマーケティングやWebコンサルティングを行っています。 「U...

CSSを一時変更する

Elementsパネルの右側（または下側）にあるStylesペインで、CSSを書き換えられます。

初心者がまず試すとよいのは、次の7つです。

プロパティ	何が変わるか	入力例
color	文字の色	#333333
background-color	背景色	#f5f5f5
font-size	文字サイズ	18px
margin	要素の外側の余白	24px 0
padding	要素の内側の余白	16px
width	横幅	320px
display	表示形式（noneで非表示）	none

カラーコードの変更が最も分かりやすい入り口です。

color や background-color の値の左には小さな四角い色見本があり、これをクリックするとカラーピッカーが開きます。スポイトツールでページ内の色を拾うこともできるので、「このボタンの色、他の要素と揃っているか」の確認にも使えます。

余白の調整もよく使います。Stylesペインの一番下にあるBox Model（入れ子の四角形の図）は、margin・border・padding・content の実測値を表示します。数値部分をダブルクリックすれば、その場で変更できます。

「なんとなく詰まって見える」という感覚的な違和感を、具体的な数値に翻訳してくれる図です。

カラーコードの左にある色見本アイコンをクリックすると、カラーピッカーが開きます。数値を打たなくても色を試せるので、非エンジニアはここから始めるのがおすすめです。

あわせて読みたい

SEOレポート自動化とは？手作業をやめて仕組みで回す方法 SEOレポートの作成に、毎週どれくらいの時間を使っているでしょうか。 Google Search Console や GA4 の数値を確認し、前週と比較し、表を作り、コメントを書き、スライ...

画像や要素を一時的に非表示にする

「このバナーを消したら、ページの印象はどう変わるか」を確認する方法です。

削除してしまっても、再読み込みすれば元に戻ります。

要素の要不要を議論するとき、口頭で説明するより「消した状態のスクリーンショット」を見せたほうが早く決まります。

HTMLやCSSの変更は保存できるのか

結論として、Elementsパネルでの編集は保存されません。

Chrome公式ドキュメントも、ElementsパネルのDOMツリーへの変更はDevToolsが保存しない仕様であることを明記しています。

一方で、Local Overrides という機能を使えば、変更内容をローカルのフォルダに保存し、再読み込み後も維持できます。

ただしこれもあくまで自分のブラウザ内での話で、本番サイトのファイルが書き換わるわけではありません。詳しくは後半の章で説明します。

方法	再読み込み後	本番サイトへの反映	難易度
Elements編集	消える	されない	かんたん
Local Overrides	残る（自分のPCのみ）	されない	応用

あわせて読みたい

【2025年版】ECサイトの商品ページSEO完全ガイド！売れる構成と検索上位を両立する設計術 ECサイトの売上を左右するのは、「商品ページのSEO設計」です。 どれだけ広告を回しても、検索からの流入が弱ければ継続的な売上は安定しません。 とはいえ、ただキーワ...

Chromeデベロッパーツールでスマホ表示を確認する方法

デバイスモードを起動する

起動すると、ページ表示エリアの上部に「Dimensions」「幅 × 高さ」「Zoom」などのツールバーが現れます。

iPhone、Pixel、Galaxy、iPadへ切り替える

ツールバー左端のDimensionsプルダウンから、端末を選びます。標準では iPhone、Pixel、Samsung Galaxy、iPad、Surface などのプリセットが用意されています。

端末を選ぶと、画面幅・デバイスピクセル比・ユーザーエージェント文字列がまとめて切り替わります。

スマホ端末を追加する

一覧に目的の端末がない場合は、追加できます。

自社サイトのアクセス解析で上位に来る端末の画面幅を調べて、それを登録しておくと検証精度が上がります。

任意の画面幅で確認する

端末プリセットではなく、幅を直接指定して確認する方法もあります。

表示領域の端をドラッグして、幅を連続的に変えていく方法もおすすめです。レイアウトが崩れ始める幅（ブレークポイント）を体感的に見つけられます。

② スマホ表示の確認

DevToolsのデバイスモードを使うと、PC上でスマホ表示を確認できます。

・iPhone風の表示幅で確認
・レスポンシブの崩れ確認
・画面幅ごとの見え方チェック

「スマホでだけCTAが見切れる」
「ヘッダーが崩れる」

みたいな確認に便利です。 pic.twitter.com/MMimmmxV8r

— 岡 拓馬(Takuma Oka)｜AI検索×SEO・SEGO開発 (@OkaTakuma1) July 25, 2026

上部のツールバーで端末名と画面幅を確認してください。ここに表示されている数値が、実際に検証している画面幅です。

スマホ表示で確認するポイント

漫然と眺めても崩れは見つかりません。次の6点を順にチェックしてください。

Device Modeと実機確認の違い

デバイスモードは画面幅とユーザーエージェントのシミュレーションであり、実機の完全再現ではありません。

レイアウト崩れの一次チェックはDevTools、最終確認は実機。この使い分けが安全です。特にiOS Safari特有の崩れは、Chromeのデバイスモードでは再現されません。

スマホ表示にならない場合の対処法

デバイスモードにしたのにPC表示のままの場合、次を確認してください。

あわせて読みたい

LLMO対策｜AIクローラーがJavaScriptを読めない問題と解決法【2026年版】 「Googleでは上位なのに、ChatGPTやPerplexityに聞くと、うちの会社がまったく出てこない」 最近、こういう相談が明確に増えています。 そして多くの場合、原因はコンテ...

ConsoleでJavaScriptエラーを確認する方法

このタイプの不具合は、Consoleパネルに答えが出ていることが非常に多いです。

Consoleを開いて既存ログを消す

この4ステップだけで、「いつ出たエラーなのか」が明確になります。

赤いエラーと黄色い警告の違い

表示	意味	対応の目安
赤（Error）	処理が止まっている可能性が高い	機能が動かないなら最優先で調査
黄（Warning）	動作はするが推奨されない、または将来的に問題になる	すぐ壊れるわけではない。余裕があるとき対応
白・青（Log / Info）	開発者が意図的に出力した情報	基本的に無視してよい

赤があっても、目的の機能が正常に動いているなら緊急ではないケースも多くあります。逆に、目的の機能が動いていないなら、赤いエラーを最優先で読んでください。

よくあるJavaScriptエラー

初心者が遭遇しやすいものを、意味と典型的な原因で整理します。

エラー	ざっくりした意味	よくある原因
Uncaught TypeError	想定と違う型のデータを操作しようとした	要素が見つからないまま処理を続けている
Uncaught ReferenceError: xxx is not defined	存在しない変数や関数を呼び出した	スクリプトの読み込み順序ミス、読み込み失敗
Cannot read properties of null	存在しない要素を操作しようとした	HTMLの構造変更でclass名やIDが消えた
Failed to load resource	ファイルの読み込みに失敗した	ファイルのURLミス、404、外部サービス停止
gtag is not defined	GA4のタグが読み込まれる前に計測処理が走った	タグ設置位置の問題、広告ブロッカー、GTMの読み込み失敗

gtag is not defined はSEO・広告担当者が特に遭遇しやすいエラーです。計測データが欠損している原因がこれ、というケースは珍しくありません。

フォームやボタンが動かない場合の調査方法

「エラーが出ない」も重要な情報です。 その場合は原因がフロント側ではなくサーバー側にある、という切り分けができます。

Chrome拡張機能由来のログに注意する

Consoleに大量のエラーが出ていても、その多くは自分のサイトとは無関係な拡張機能のログであることがあります。

対策は3つです。

Consoleのフィルター欄に -extension と入力して除外する方法もあります。

開発担当者へ共有する情報

エラーを見つけたら、次の6点をまとめて渡すと調査が一気に速くなります。「動きません」だけの報告と比べて、往復のやり取りが半分以下になります。

あわせて読みたい

個人開発のSaaSをlaunchする前に、絶対やるべきセキュリティチェック5つ！Supabaseの脆弱性を実例で解説 こんにちは、岡 拓馬（@OkaTakuma1）です。 Web のSEO診断とAI検索（GEO/LLMO）対応をまとめて診断できる無料ツール「SEGO」を、個人で開発しています。4月30日の launc...

Networkで通信状況を確認する方法

Networkパネルでは、ページを表示するために発生したすべての通信を確認できます。

404の特定、リダイレクトの確認、重い画像の発見など、SEO・Web運用の実務で使用頻度が最も高いパネルです。

Networkを開いてページを再読み込みする

Networkパネルは開いている間の通信しか記録しません。 開く前の通信は表示されないため、必ず「開いてから再読み込み」の順序で操作します。

Networkの主要項目

カラム	意味	見るポイント
Name	ファイル名やURL	何が読み込まれているか
Status	HTTPステータスコード	200以外、特に赤い表示
Type	ファイル種別（document、script、imgなど）	想定外のファイルがないか
Initiator	その通信を発生させた側	「誰がこれを呼んだのか」の特定
Size	転送サイズ	突出して大きいファイル
Time	完了までの時間	突出して遅い通信
Waterfall	時系列のタイミング図	どこで待ち時間が発生しているか

画像、JavaScript、API通信を絞り込む

パネル上部のフィルターボタンで種別を絞り込めます。

検索欄にドメイン名やファイル名の一部を入力して絞り込むこともできます。

404、500などのHTTPステータスを確認する

Statusカラムの数値の意味です。

コード	意味	判断
200	正常	問題なし
204	正常。返す中身がないだけ	エラーではない 計測タグでよく発生
301	恒久的なリダイレクト	意図したものか確認
302	一時的なリダイレクト	恒久移転なら301にすべき
304	キャッシュが有効なので再送不要	エラーではない むしろ効率的な状態
404	ページ・ファイルが存在しない	要対応
500	サーバー内部エラー	最優先で要対応

通信をクリックしてHeadersを見る

一覧の行をクリックすると、詳細が右側（または下側）に開きます。Headersタブで確認すべき項目は次のとおりです。

リダイレクトを確認する

リダイレクトは、通常のままだと画面が切り替わった瞬間にログが消えてしまいます。

Preserve logを使うのがコツです。

重い通信を探す

表示が遅い原因を特定する手順です。

よくある犯人は3つです。

Networkに何も表示されない場合

慌てる前に、次の5点を確認してください。

拡張機能の広告ブロッカーが通信自体をブロックしているケースもあります。シークレットウィンドウで再確認すると切り分けられます。

あわせて読みたい

【SEO×AI】ブラックハットGEOとは？AI時代に拡大する不正SEOの仕組みとリスク 本記事は「searchengineland」の最新記事を翻訳し、独自の意見を加えたものです。 AIが検索体験を根本から変えた今、「ブラックハットGEO（Generative Engine Optimizat...

Cookie・Local Storage・キャッシュを確認する方法

こうした確認はApplicationパネルで行います。

ApplicationパネルでCookieを確認する

表示される項目の意味は次のとおりです。

項目	意味	見るポイント
Name	Cookieの名前	_ga _gid はGA4、_fbp はMeta広告
Value	保存されている値	意図した値が入っているか
Domain	有効なドメイン	サブドメインを含むか（先頭にドットがあるか）
Path	有効なパス	/ なら全ページで有効
Expires / Max-Age	有効期限	Session ならブラウザを閉じると消える
HttpOnly	JavaScriptから読めない設定	セキュリティ上、認証系はオンが望ましい
Secure	HTTPS接続でのみ送信	オンが望ましい
SameSite	別サイトからのリクエスト時の送信可否	Lax Strict None

行を右クリックすれば個別に削除でき、上部のアイコンで全削除もできます。同意バナーの初回表示テストは、該当Cookieを削除して再読み込みするのが最も確実です。

Local StorageとSession Storageを確認する

同じくApplicationパネルの左メニューにあります。

キーと値の一覧が表示されるので、値をダブルクリックすれば編集も可能です。

キャッシュを無効化する

「修正したのに反映されない」の大半はキャッシュが原因です。確認方法は2つあります。

あわせて読みたい

リンクビルディングの限界と新時代の答え！デジタルPRに全振りした理由 本記事は「blackhatworld」の最新トピックスを翻訳し、独自の意見を加えたものです。 長年、SEOにおける「被リンク獲得＝リンクビルディング」は王道の戦略として語られ...

Chromeデベロッパーツールでスクリーンショットを撮る方法

DevToolsには、拡張機能なしでページ全体を1枚の画像として保存する機能があります。競合分析、社内共有、記事作成のいずれでも便利です。

表示中の画面を撮影する

表示中の範囲（ビューポート）だけがPNGとして保存されます。

同じメニューには他にも次のコマンドがあります。

Webページ全体をフルサイズで撮影する

長いページを1枚に収めたいときはこれです。

スクロールが必要な範囲を含めて、ページ全体が1枚のPNGとして保存されます。

スマホ表示のスクリーンショットを撮影する

あわせて読みたい

【保存版】ブラックハットSEOから学ぶ攻めの戦略とリスク管理 本記事は「blackhatworld」の最新トピックスを翻訳し、独自の意見を加えたものです。 SEOの世界には「ホワイトハット」「ブラックハット」という二つの言葉があります。...

LighthouseとPerformanceでページ品質を確認する

Lighthouseで確認できる項目

Lighthouseは、ページの品質を自動診断してスコアとレポートを出す機能です。

DevToolsに「Lighthouse」パネルとして組み込まれています。

診断されるカテゴリは4つです。

Lighthouseの実行方法

スコアだけで判断してはいけない理由

Lighthouseのスコアは、次の理由で毎回変動します。「昨日は85点、今日は62点」は普通に起きます。

実際のユーザー体験を知りたい場合は、Search ConsoleのCore Web Vitalsレポートや、CrUX（Chrome UX Report）に基づくフィールドデータを確認してください。

Lighthouseの本当の価値はスコアではなく、レポート下部に並ぶ具体的な改善提案にあります。「画像の圧縮」「使われていないJavaScriptの削減」など、優先度つきで提示されます。

Performanceパネルで確認できること

Performanceパネルは、より詳細に表示速度を分析する機能です。

近年は入り口が大きく改善され、パネルを開くと最初にLive metrics画面が表示されます。ここではLCP・CLS・INPの3つのCore Web Vitalsが、操作に応じてリアルタイムで更新されます。

さらに録画（Record）してページを読み込むと、次のような内容を確認できます。

現在は、Lighthouseが指摘するような改善提案がInsightsサイドバーにも表示されるようになり、Performanceパネル単体でも原因分析から改善案までたどれるようになっています。

あわせて読みたい

【保存版】検索エンジンと生成AIの両方に効くコンテンツ戦略！SEOとAI時代の新しい最適化 本記事は「searchengineland」の最新記事を翻訳し、独自の意見を加えたものです。 SEOの世界は今、大きな転換期を迎えています。 これまでは「Google検索で上位表示され...

SEO担当者がChrome DevToolsで確認したい項目

外部ツールを立ち上げる前に、DevToolsで済むものは意外と多いです。

titleとmeta description

<head> は折りたたまれていることが多いので、<head> 左の三角をクリックして展開してください。

canonical

canonicalの事故は、影響が大きい割に気づきにくいタイプの問題です。テンプレート変更後は必ず確認してください。

robots meta

H1、H2、H3の見出し構造

画像のalt属性

内部リンクとnofollow

JSON-LD形式の構造化データ

構造化データの妥当性判定は、最終的にはGoogleのリッチリザルトテストなど専用ツールで行ってください。

DevToolsは「そもそも出力されているか」「重複していないか」の一次確認に向いています。

JavaScript実行後に本文やリンクがDOM上へ存在するか

これはDevToolsならではの確認方法です。

Elementsパネルが表示するのはJavaScript実行後のDOMであり、Networkパネルの Doc → Response で見られるのはサーバーが返した元のHTMLです。

この2つを比較すると、コンテンツがJavaScriptに依存しているかどうかが分かります。

ブラウザで見えているのに元のHTMLにない、という状態は、レンダリングが正しく行われなければ検索エンジンに認識されないリスクを意味します。

404、500、リダイレクト

X-Robots-Tagなどのレスポンスヘッダー

これはHTMLをいくら見ても分からないため、原因不明のインデックス未登録を調査するときに必ず確認したい項目です。PDFなどHTML以外のファイルの制御にも使われます。

GA4・GTMの通信

collect への通信がステータス204で返ってくるのは正常です。エラーではありません。

スマホ表示の横スクロールやCTAの見切れ

あわせて読みたい

【完全版】WordPressサイトにAPIを実装する方法！REST API・外部連携・プラグイン開発の基礎から応用まで WordPressでサイトを運営していると、 「外部サービスのデータを取り込みたい」 「自作アプリとWordPressをつなげたい」 「もっと効率よく自動化できないかな？」 そん...

位置情報・通信速度・ユーザーエージェントを変更する方法

DevToolsでは、ブラウザの環境そのものを一時的に切り替えられます。

「特定条件でだけ起きる不具合」の再現に使う機能です。

位置情報を一時変更する

通信速度を変更する

Networkパネル上部のThrottlingプルダウンから選びます。

ユーザーエージェントを変更する

プルダウンにはGooglebot相当のUA文字列も用意されています。

DevToolsでIPアドレスを変更できるのか

結論：Chrome DevToolsだけでは、インターネット上の公開IPアドレスは変更できません。

DevToolsで変更・再現できるのは、あくまでブラウザ側の設定や状態です。

DevToolsで変更できる	DevToolsでは変更できない
位置情報（緯度・経度）	公開IPアドレス
タイムゾーン	接続元の国・地域の判定（IPベースのもの）
ロケール（言語・地域設定）	サーバー側のジオロケーション判定
ユーザーエージェント	実際のネットワーク経路
通信速度・オフライン状態	—

IPベースで地域判定しているサイト（地域別価格、地域別コンテンツなど）の挙動を確認したい場合は、VPNやプロキシなど別の仕組みが必要です。

あわせて読みたい

SEOに強いサイト構造とは？ユーザー体験・内部リンク・トピカルオーソリティを最大化する設計術 本記事は「searchengineland」の最新記事を翻訳し、独自の意見を加えたものです。 サイト構造（サイトアーキテクチャ）は、SEOの成果を大きく左右する“見えない基盤”で...

Consoleを使ってSEO情報を抽出する方法

Consoleでは、今開いているページに対してJavaScriptを実行できます。手作業で数えると1時間かかる作業が、数秒で終わります。

実行方法は共通です。 Consoleタブを開き、コードを貼り付けて Enter を押すだけです。ページを書き換える処理ではないので、サイトが壊れることはありません。

ここで紹介するのは、ブラウザで既に表示されている公開情報を、手作業の代わりに整理するという使い方です。

認証を突破したり制限を回避したりする行為は、規約違反や法的リスクにつながります。

見出しを一覧化する

// ページ内の h1〜h4 をすべて取得し、タグ名と文言を表形式で表示する
const headings = [...document.querySelectorAll('h1, h2, h3, h4')].map(h => ({
  タグ: h.tagName,                            // H1 / H2 などのタグ名
  テキスト: h.innerText.trim().slice(0, 60)   // 長い見出しは60文字で省略
}));
console.table(headings);                       // 表形式で出力

見方：console.table は結果を表で表示します。タグ名の並びを上から追って、H1が1つあるか、H2→H3の階層が飛んでいないかを確認してください。

ページ内リンクを抽出する

// ページ内のすべてのリンクを、アンカーテキスト・URL・rel属性つきで一覧化する
const links = [...document.querySelectorAll('a[href]')].map(a => ({
  アンカー: a.innerText.trim().slice(0, 40),
  URL: a.href,
  rel: a.rel || '-',        // nofollow などが入っていれば表示
  target: a.target || '-'
}));
console.table(links);
console.log('リンク総数:', links.length);

見方：アンカーテキストが「こちら」「詳細はこちら」ばかりになっていないか、想定外の nofollow がないかを確認します。

外部リンクだけを抽出する

// 自ドメイン以外へのリンク（外部リンク）だけを抜き出す
const host = location.hostname;                        // 今見ているサイトのドメイン
const external = [...document.querySelectorAll('a[href^="http"]')]
  .filter(a => a.hostname !== host)                    // ドメインが違うものだけ残す
  .map(a => ({
    アンカー: a.innerText.trim().slice(0, 40),
    URL: a.href,
    rel: a.rel || '-'
  }));
console.table(external);
console.log('外部リンク数:', external.length);

見方：意図しない外部リンクが残っていないか、アフィリエイトリンクに sponsored が付いているかの確認に使えます。

alt属性がない画像を探す

// alt属性が未設定、または空文字の画像を抽出する
const noAlt = [...document.querySelectorAll('img')]
  .filter(img => !img.alt || img.alt.trim() === '')
  .map(img => ({
    src: img.currentSrc || img.src,
    幅: img.naturalWidth,     // 実際の画像の横幅（px）
    高さ: img.naturalHeight
  }));
console.table(noAlt);
console.log('alt未設定:', noAlt.length, '/ 画像総数:', document.images.length);

見方：装飾目的の画像はaltが空でも問題ありません。内容を伝える画像にaltがない場合のみ対応してください。あわせて、幅が2000pxを超えるような画像が並んでいたら、圧縮・リサイズの検討対象です。

title、description、canonical、robotsをまとめて確認する

// head内のSEO基本項目を一括で表示する
const meta = (name) => document.querySelector(`meta[name="${name}"]`)?.content ?? '(なし)';
console.table({
  title: document.title,
  description: meta('description'),
  robots: meta('robots'),
  canonical: document.querySelector('link[rel="canonical"]')?.href ?? '(なし)',
  ogTitle: document.querySelector('meta[property="og:title"]')?.content ?? '(なし)',
  lang: document.documentElement.lang || '(なし)'
});

見方：(なし) と表示された項目が未設定です。canonicalが今見ているURLと一致しているかも、あわせて確認してください。

JSON-LDを抽出する

// ページ内のJSON-LD（構造化データ）を1件ずつ展開して表示する
[...document.querySelectorAll('script[type="application/ld+json"]')].forEach((s, i) => {
  try {
    const data = JSON.parse(s.textContent);
    console.log(`--- JSON-LD ${i + 1} 件目 ---`, data);  // 展開可能な形で出力
  } catch (e) {
    // 構文エラーがあるとGoogleにも読み取られない可能性が高い
    console.warn(`JSON-LD ${i + 1} 件目は構文エラーの可能性があります:`, e.message);
  }
});

見方：出力された ▶ をクリックすると中身を展開できます。黄色い警告が出た場合は構文エラーで、検索エンジンにも読み取られていない可能性があります。同じ @type が複数出力されていたら、プラグインの重複を疑ってください。

HTMLテーブルを整理する

// ページ内1つ目のテーブルをタブ区切りで取り出し、クリップボードへコピーする
const table = document.querySelectorAll('table')[0];   // [1] にすれば2つ目のテーブル
const rows = [...table.querySelectorAll('tr')].map(tr =>
  [...tr.querySelectorAll('th, td')].map(cell => cell.innerText.trim())
);
console.table(rows);
copy(rows.map(r => r.join('\t')).join('\n'));          // タブ区切りでコピー
console.log('クリップボードにコピーしました。スプレッドシートへ貼り付けできます。');

見方：copy() はDevToolsのConsole専用の機能です。実行後、そのままGoogleスプレッドシートやExcelに貼り付ければ、表として展開されます。自社サイトの料金表や仕様表をデータ化したいときに便利です。

あわせて読みたい

失敗しないサイト移転とリダイレクトのやり方！SEO・ユーザー体験を両立する方法 サイト移転（ドメイン変更やサーバー移行）は、事業やサイトの成長に合わせて必要になるケースがあります。 しかし、移転のやり方を間違えると、これまで積み上げてきた...

Local Overridesで変更をリロード後も残す方法

Local Overridesは、DevToolsで加えた変更をローカルフォルダに保存し、再読み込みしても維持する機能です。

初心者にとっては応用機能なので、Elements・デバイスモード・Console・Networkに慣れてから触ってください。

通常のElements編集との違い

Elementsパネルでの編集は再読み込みで消えますが、Local Overridesを設定すると、DevToolsが保存したローカルのファイルを、サーバー上のファイルの代わりに読み込むようになります。

そのため、CSSやJavaScriptの修正案を「実際に何度も画面を触りながら」検証できます。

ただしChrome公式ドキュメントのとおり、ElementsパネルのDOMツリーへの変更はLocal Overridesでも保存されません。

保存できるのはCSS、JavaScript、レスポンスヘッダー、XHR/fetchのレスポンスなどです。

CSSやJavaScriptをローカル保存する

Networkパネルから始める方法もあります。対象の通信を右クリックし、「Override content」を選ぶと、そのファイルの編集画面へ直接移動できます。

APIレスポンスを仮変更する

Networkパネルで通信を右クリックし、「Override content」を選べば、XHRやfetchのレスポンス内容を書き換えられます。

「APIがまだ完成していないが、データが返ってきたときの表示を確認したい」という場面で使えます。

レスポンスヘッダーも同様に、「Override headers」から書き換えられます。x-robots-tag を追加したときの挙動確認などにも応用できます。

本番サイトには反映されない

Local Overridesで書き換えた内容は、自分のブラウザにしか反映されません。

他の人が同じURLを開いても、元のページが表示されます。あくまで「自分の環境で先に試す」ための機能です。

なお、Local Overridesを有効にしている間はキャッシュが自動的に無効化されます。設定したまま忘れていると、他の検証に影響することがあるため、使い終わったらオフに戻してください。

あわせて読みたい

AI検索時代にブランド評判を守る方法！ゼロクリック環境で主導権を握るための戦略 本記事は、「searchengineland」の最新記事を翻訳し、独自の意見を加えたものです。 Google AI OverviewsやChatGPTなどのAI検索が普及し、消費者のブランド発見プロセス...

Chromeデベロッパーツールでできないこと

できることと同じくらい、できないことを知っておくと判断を誤りません。

あわせて読みたい

SEO担当者必見！robots.txtで多言語サイトを正しくクロールさせる最新手法 多言語サイトのSEOでは、検索エンジンに「どのページをクロールさせるか」を正しく伝えることが欠かせません。そのカギを握るのが robots.txt です。 誤った設定をして...

Chromeデベロッパーツールでよくある質問

まずはElements・スマホ表示・Console・Networkから覚えよう！

Chromeデベロッパーツールは機能が多く、すべてを覚える必要はありません。

実務で使用頻度が高い順に、次の4つから始めれば十分です。

そのうえで、必要になったタイミングで次を追加してください。

最後にもう一度、最も重要な前提を確認します。

DevToolsは確認と仮説検証のツールであり、テスト環境でも修正ツールでもありません。

本番サイトの修正、PHPの変更、データベースの更新、公開IPアドレスの変更は、いずれもDevToolsだけでは行えません。

だからこそ、何を触っても壊れません。

今すぐ自社サイトを開いて、右クリックから「検証」を押してみてください。

あわせて読みたい

【SEO担当者必読】E-E-A-T完全ガイド｜経験・専門性・権威性・信頼性で差をつけろ！ 本記事は、「searchengineland」の最新記事を翻訳し、独自の意見を加えたものです。 SEOにおいて「E-E-A-T（経験・専門性・権威性・信頼性）」の重要性は、年々増してい...