Chrome開発者ツールでIPアドレスを確認する完全ガイド|ネットワーク情報を徹底的に調べる方法

「このサイトのサーバーはどこ?」「IPアドレスを知りたいけど、コマンドは難しい…」

そんな時、Chrome開発者ツールを使えば、ブラウザだけで簡単にIPアドレスを確認できます。

しかも、IPアドレスだけでなく:

  • 接続先のポート番号
  • 通信プロトコル(HTTP/HTTPS)
  • 応答速度
  • サーバーからの詳細情報

これらすべてが、追加ソフトなしで確認できるんです。

この記事では、Chrome開発者ツールを使ってIPアドレスを確認する方法を、初心者にもわかりやすく徹底解説します。

スポンサーリンク
  1. Chrome開発者ツールとは?
    1. 本来の用途
    2. なぜIPアドレス確認に便利?
  2. 基本:開発者ツールでIPアドレスを確認する手順
    1. ステップ1:開発者ツールを開く
    2. ステップ2:Networkタブを開く
    3. ステップ3:ページをリロード
    4. ステップ4:最初のリクエストをクリック
    5. ステップ5:IPアドレスを確認
  3. より詳しく:Networkタブの見方
    1. Networkタブの構造
    2. リクエスト一覧で確認できること
    3. 詳細パネルのタブ
  4. Headers タブで確認できる全情報
    1. General セクション
    2. Response Headers セクション
    3. Request Headers セクション
  5. 高度な確認方法
    1. 複数のIPアドレスを確認する
    2. CDNの確認
    3. DNS解決時間の確認
    4. SSLハンドシェイクの確認
  6. フィルタ機能で特定の通信だけ表示
    1. フィルタバーの使い方
  7. IPアドレスが表示されない場合の対処法
    1. 問題1:Remote Address が表示されない
    2. 問題2:リクエスト一覧が空
    3. 問題3:プロキシ経由でIPが分からない
    4. 問題4:キャッシュで古い情報が表示される
  8. 応用:特定の通信を詳しく調べる
    1. WebSocketの通信を確認
    2. リダイレクトの追跡
    3. APIサーバーのIPアドレスを確認
  9. 情報をエクスポートする
    1. HARファイルとしてエクスポート
    2. スクリーンショットを撮る
    3. コピー機能
  10. セキュリティとプライバシーの確認
    1. SSL証明書の確認
    2. Cookie の確認
    3. Mixed Contentの確認
  11. よくある質問
    1. Q1. 開発者ツールを使っても安全?
    2. Q2. モバイル版Chromeでも使える?
    3. Q3. 他のブラウザでも同じことができる?
    4. Q4. IPアドレスを見ただけでバレる?
    5. Q5. IPv6アドレスも表示される?
  12. まとめ:開発者ツールは強力な診断ツール

Chrome開発者ツールとは?

開発者ツール(DevTools)は、Chromeに標準搭載されている強力な診断ツールです。

本来の用途

もともとはWeb開発者が使うツールですが、誰でも無料で使えます。

主な機能:

  • HTML/CSSの確認・編集
  • JavaScriptのデバッグ
  • ネットワーク通信の監視(今回使用)
  • パフォーマンス分析
  • セキュリティ情報の確認

なぜIPアドレス確認に便利?

メリット:

  • 追加ソフト不要
  • リアルタイムの通信情報
  • 視覚的にわかりやすい
  • 詳細な技術情報も確認可能

Web開発者だけでなく、一般ユーザーのトラブルシューティングにも役立ちます。

基本:開発者ツールでIPアドレスを確認する手順

まずは基本的な確認方法から解説します。

ステップ1:開発者ツールを開く

方法は3つあります:

方法A:キーボードショートカット(最速)

F12 キー

または

Ctrl + Shift + I (Windows)
Command + Option + I (Mac)

方法B:右クリックメニュー

  1. ページの適当な場所で右クリック
  2. 「検証」をクリック

方法C:メニューから

  1. Chrome右上の「︙」(三点リーダー)をクリック
  2. 「その他のツール」→「デベロッパーツール」

ステップ2:Networkタブを開く

開発者ツールが開いたら、上部のタブから「Network」をクリックします。

日本語表示の場合:「ネットワーク」

ステップ3:ページをリロード

ネットワーク通信を記録するため、ページを再読み込みします。

リロード方法:

  • F5 キー
  • Ctrl + R (Windows)
  • Command + R (Mac)
  • アドレスバーの更新ボタンをクリック

ステップ4:最初のリクエストをクリック

Networkタブに、たくさんのファイル名が表示されます。

一番上の行(通常はドメイン名と同じもの)をクリックしてください。

例:example.comindex.html

ステップ5:IPアドレスを確認

右側に詳細パネルが表示されます。

  1. 「Headers」タブ(日本語:「ヘッダー」)を確認
  2. スクロールして「General」セクションを探す
  3. 「Remote Address」を見る

表示例:

Remote Address: 93.184.216.34:443
  • 93.184.216.34 → IPアドレス
  • 443 → ポート番号(HTTPSの標準ポート)

より詳しく:Networkタブの見方

基本が分かったら、さらに詳しい情報を見てみましょう。

Networkタブの構造

左側:リクエスト一覧
ページが読み込んだすべてのファイルが時系列で表示されます。

右側:詳細パネル
選択したリクエストの詳細情報が表示されます。

リクエスト一覧で確認できること

各リクエストの行には、以下の情報が表示されます:

Name(名前):
読み込んだファイル名やURL

Status(ステータス):

  • 200 → 成功
  • 301/302 → リダイレクト
  • 404 → ファイルが見つからない
  • 500 → サーバーエラー

Type(タイプ):

  • document → HTMLページ
  • script → JavaScriptファイル
  • stylesheet → CSSファイル
  • xhr → Ajax通信
  • img → 画像

Size(サイズ):
ファイルサイズ

Time(時間):
読み込みにかかった時間

詳細パネルのタブ

右側の詳細パネルには、複数のタブがあります。

Headers(ヘッダー):

  • IPアドレス
  • リクエスト・レスポンスのヘッダー情報
  • ステータスコード

Preview(プレビュー):
レスポンスの内容をプレビュー表示

Response(レスポンス):
サーバーから返された生データ

Timing(タイミング):
通信の各段階にかかった時間の詳細

Headers タブで確認できる全情報

IPアドレス以外にも、重要な情報がたくさん表示されます。

General セクション

Request URL(リクエストURL):
実際にアクセスしたURL

https://www.example.com/

Request Method(リクエストメソッド):
通信方法

GET
  • GET → データ取得
  • POST → データ送信
  • PUT → データ更新
  • DELETE → データ削除

Status Code(ステータスコード):
サーバーの応答結果

200 OK

Remote Address(リモートアドレス):
接続先のIPアドレスとポート番号

93.184.216.34:443

Referrer Policy(リファラーポリシー):
どこから来たかの情報をどう扱うか

Response Headers セクション

サーバーから返された情報です。

Server(サーバー):
使用されているWebサーバーソフト

nginx

または

Apache/2.4.41

Content-Type(コンテンツタイプ):
ファイルの種類

text/html; charset=UTF-8

Cache-Control(キャッシュ制御):
キャッシュの有効期限

max-age=3600

Set-Cookie:
サーバーが設定するCookie

Request Headers セクション

ブラウザがサーバーに送った情報です。

User-Agent(ユーザーエージェント):
ブラウザの情報

Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0

Accept:
受け入れ可能なファイル形式

Accept-Language:
言語設定

ja,en-US;q=0.9,en;q=0.8

高度な確認方法

もっと詳しく調べたい人向けの機能です。

複数のIPアドレスを確認する

大きなWebサイトは、複数のサーバーを使っています。

手順:

  1. Networkタブでリクエスト一覧を見る
  2. 異なるドメインのリクエストを複数クリック
  3. それぞれのRemote Addressを確認

例:YouTubeの場合

www.youtube.com → 142.250.207.46
i.ytimg.com → 142.250.207.78
fonts.googleapis.com → 172.217.175.10

複数のIPアドレスから、画像やフォントを読み込んでいることがわかります。

CDNの確認

CDN(Content Delivery Network)を使っているか確認できます。

見分け方:

メインのドメインとは異なるドメインから、画像やCSSが読み込まれている。

例:

メイン: example.com → 203.0.113.10
CDN: cdn.example.com → 104.26.10.200

CDNのIPアドレスは、地域によって変わることがあります。

DNS解決時間の確認

IPアドレスを調べるのにかかった時間を確認できます。

手順:

  1. リクエストをクリック
  2. 「Timing」タブを開く
  3. 「DNS Lookup」の時間を確認

時間の目安:

  • 10ms以下 → 速い(キャッシュされている)
  • 10〜50ms → 普通
  • 50ms以上 → 遅い

SSLハンドシェイクの確認

HTTPSの接続確立にかかる時間も確認できます。

Timingタブで確認:

  • Initial connection → TCP接続の確立時間
  • SSL → SSL/TLS接続の確立時間

セキュリティは重要ですが、時間もかかります。

フィルタ機能で特定の通信だけ表示

大量のリクエストから、目的のものだけ表示できます。

フィルタバーの使い方

Networkタブの上部に、フィルタバーがあります。

タイプでフィルタ:

  • All → すべて表示
  • XHR → Ajax通信のみ
  • JS → JavaScriptファイルのみ
  • CSS → CSSファイルのみ
  • Img → 画像のみ
  • Media → 動画・音声のみ
  • Font → フォントのみ
  • Doc → HTMLドキュメントのみ
  • WS → WebSocketのみ
  • Manifest → マニフェストファイルのみ

ドメインでフィルタ:

フィルタバーに直接ドメイン名を入力すると、そのドメインへの通信だけ表示されます。

domain:example.com

特定のファイルを検索:

ファイル名やURLの一部を入力すると、該当するリクエストだけ表示されます。

.jpg

すべての画像ファイル(JPG)が表示されます。

IPアドレスが表示されない場合の対処法

うまく表示されない時のトラブルシューティングです。

問題1:Remote Address が表示されない

原因:
古いバージョンのChromeを使っている可能性があります。

解決策:

Chromeを最新版にアップデートしてください。

  1. Chrome右上の「︙」→「ヘルプ」→「Google Chrome について」
  2. 自動的にアップデートが始まる
  3. 再起動

問題2:リクエスト一覧が空

原因:
Networkタブを開く前にページを読み込んでしまった。

解決策:

  1. Networkタブを開いた状態で
  2. ページをリロード(F5)

Networkタブを開いてから読み込まないと、記録されません。

問題3:プロキシ経由でIPが分からない

原因:
会社や学校のプロキシを経由している場合、表示されるIPはプロキシサーバーのものです。

確認方法:

プロキシを使っているか確認:

  1. Chrome設定を開く
  2. 「プライバシーとセキュリティ」
  3. 「セキュリティ」
  4. 「詳細設定」で確認

問題4:キャッシュで古い情報が表示される

原因:
ブラウザがキャッシュを使っている。

解決策:

スーパーリロード(強制再読み込み):

Ctrl + Shift + R (Windows)
Command + Shift + R (Mac)

または

キャッシュを無効化:

  1. Networkタブを開いた状態で
  2. 上部の「Disable cache」にチェックを入れる
  3. リロード

応用:特定の通信を詳しく調べる

より高度な調査方法です。

WebSocketの通信を確認

リアルタイム通信(チャット、ライブ配信など)のIPアドレスを確認できます。

手順:

  1. Networkタブでフィルタを「WS」に設定
  2. WebSocket通信が表示される
  3. クリックして詳細を確認

リダイレクトの追跡

サイトが別のサーバーにリダイレクトしている場合、すべてのIPアドレスを確認できます。

手順:

  1. Networkタブでステータスコードが「301」や「302」のリクエストを探す
  2. 「Location」ヘッダーに、リダイレクト先のURLが表示される
  3. 複数のリクエストを順番に確認

APIサーバーのIPアドレスを確認

WebアプリがAPIサーバーと通信している場合、そのIPアドレスも確認できます。

手順:

  1. フィルタを「XHR」に設定
  2. API通信のリクエストを見つける
  3. Remote Addressを確認

例:

メインサイト: example.com → 203.0.113.10
API: api.example.com → 198.51.100.20

フロントエンドとバックエンドで、異なるサーバーを使っていることがわかります。

情報をエクスポートする

確認した情報を保存・共有できます。

HARファイルとしてエクスポート

すべてのネットワーク通信を、ファイルとして保存できます。

手順:

  1. Networkタブでリクエストを記録
  2. リクエスト一覧の上で右クリック
  3. 「Save all as HAR with content」を選択
  4. ファイルを保存

用途:

  • 技術サポートに送る
  • 後で詳しく分析する
  • 他の開発者と共有する

スクリーンショットを撮る

視覚的に情報を共有したい場合に便利です。

Windows:

Win + Shift + S

画面の一部を選択してスクリーンショット

Mac:

Command + Shift + 4

ドラッグして範囲を選択

コピー機能

特定の情報だけコピーできます。

手順:

  1. リクエストを右クリック
  2. 「Copy」を選択
  3. 目的の項目を選択

コピーできる項目:

  • Copy link address → URL
  • Copy as cURL → コマンドライン形式
  • Copy response → レスポンス内容
  • Copy all as HAR → すべての通信情報

セキュリティとプライバシーの確認

IPアドレス以外のセキュリティ情報も確認できます。

SSL証明書の確認

HTTPSサイトの証明書情報を見られます。

手順:

  1. Networkタブでメインのリクエストを選択
  2. 「Security」タブをクリック(日本語:「セキュリティ」)
  3. 証明書の詳細が表示される

確認できる情報:

  • 証明書の発行者
  • 有効期限
  • 暗号化方式
  • 証明書チェーン

Cookie の確認

サイトが設定するCookieを確認できます。

手順:

  1. Networkタブでリクエストを選択
  2. 「Cookies」タブをクリック
  3. すべてのCookieが表示される

確認できる情報:

  • Cookie名
  • ドメイン
  • パス
  • 有効期限
  • セキュリティ属性(HttpOnly、Secure)

Mixed Contentの確認

HTTPSサイトからHTTPリソースを読み込んでいないか確認できます。

問題のある例:

https://example.com (安全)
→ http://image.example.com/photo.jpg (危険)

HTTPSサイトからHTTPを読み込むと、セキュリティ警告が出ます。

よくある質問

開発者ツールの使用に関する疑問にお答えします。

Q1. 開発者ツールを使っても安全?

はい、安全です。

理由:

  • 情報を見るだけで、サイトに影響しない
  • 自分のブラウザ内だけの操作
  • サーバーに特別な負荷をかけない

ただし、見た情報を悪用するのは違法です。

Q2. モバイル版Chromeでも使える?

AndroidのChromeには、簡易版の開発者ツールがあります。

使い方:

  1. Chrome設定から「デベロッパー向けのオプション」を有効化
  2. 「リモートデバッグ」を使用

iPhoneのChromeには、開発者ツールはありません。

Q3. 他のブラウザでも同じことができる?

はい、主要ブラウザはすべて開発者ツールを持っています。

Firefox:

  • F12 キーで開く
  • 「ネットワーク」タブで確認

Safari:

  • 「開発」メニュー → 「Webインスペクタを表示」
  • 「ネットワーク」タブで確認

Edge:

  • F12 キーで開く
  • Chromeとほぼ同じ

Q4. IPアドレスを見ただけでバレる?

いいえ、バレません。

理由:
開発者ツールは、自分のブラウザ内の情報を見ているだけです。

サーバー側には、通常のアクセスと区別がつきません。

Q5. IPv6アドレスも表示される?

はい、サイトがIPv6に対応していて、自分のネットワークもIPv6を使っていれば表示されます。

表示例:

[2001:db8:85a3::8a2e:370:7334]:443

角括弧で囲まれているのがIPv6アドレスです。

まとめ:開発者ツールは強力な診断ツール

Chrome開発者ツールを使えば、ブラウザだけで詳しいネットワーク情報を確認できます。

この記事の重要ポイント:

基本的な使い方:

  1. F12 で開発者ツールを開く
  2. 「Network」タブをクリック
  3. ページをリロード(F5)
  4. 最初のリクエストをクリック
  5. 「Headers」タブの「Remote Address」を確認

確認できる情報:

  • IPアドレス
  • ポート番号
  • サーバーソフト
  • SSL証明書
  • Cookie
  • 応答速度
  • ファイルサイズ

便利な機能:

  • フィルタで特定の通信だけ表示
  • HARファイルでエクスポート
  • Timingタブで性能分析
  • Securityタブで証明書確認

トラブル対処:

  • リクエストが表示されない → リロード
  • 古い情報が表示される → スーパーリロード
  • キャッシュを無効化する

活用シーン:

  • サーバー移転の確認
  • CDNの使用確認
  • API通信の調査
  • セキュリティチェック
  • パフォーマンス分析

Chrome開発者ツールは、Web開発者だけでなく、一般ユーザーのトラブルシューティングにも役立ちます。

コマンドを覚える必要もなく、視覚的にわかりやすいので、ぜひ活用してください!

コメント

タイトルとURLをコピーしました