「このサイトのサーバーはどこ?」「IPアドレスを知りたいけど、コマンドは難しい…」
そんな時、Chrome開発者ツールを使えば、ブラウザだけで簡単にIPアドレスを確認できます。
しかも、IPアドレスだけでなく:
- 接続先のポート番号
- 通信プロトコル(HTTP/HTTPS)
- 応答速度
- サーバーからの詳細情報
これらすべてが、追加ソフトなしで確認できるんです。
この記事では、Chrome開発者ツールを使ってIPアドレスを確認する方法を、初心者にもわかりやすく徹底解説します。
Chrome開発者ツールとは?
開発者ツール(DevTools)は、Chromeに標準搭載されている強力な診断ツールです。
本来の用途
もともとはWeb開発者が使うツールですが、誰でも無料で使えます。
主な機能:
- HTML/CSSの確認・編集
- JavaScriptのデバッグ
- ネットワーク通信の監視(今回使用)
- パフォーマンス分析
- セキュリティ情報の確認
なぜIPアドレス確認に便利?
メリット:
- 追加ソフト不要
- リアルタイムの通信情報
- 視覚的にわかりやすい
- 詳細な技術情報も確認可能
Web開発者だけでなく、一般ユーザーのトラブルシューティングにも役立ちます。
基本:開発者ツールでIPアドレスを確認する手順
まずは基本的な確認方法から解説します。
ステップ1:開発者ツールを開く
方法は3つあります:
方法A:キーボードショートカット(最速)
F12 キー
または
Ctrl + Shift + I (Windows)
Command + Option + I (Mac)
方法B:右クリックメニュー
- ページの適当な場所で右クリック
- 「検証」をクリック
方法C:メニューから
- Chrome右上の「︙」(三点リーダー)をクリック
- 「その他のツール」→「デベロッパーツール」
ステップ2:Networkタブを開く
開発者ツールが開いたら、上部のタブから「Network」をクリックします。
日本語表示の場合:「ネットワーク」
ステップ3:ページをリロード
ネットワーク通信を記録するため、ページを再読み込みします。
リロード方法:
- F5 キー
- Ctrl + R (Windows)
- Command + R (Mac)
- アドレスバーの更新ボタンをクリック
ステップ4:最初のリクエストをクリック
Networkタブに、たくさんのファイル名が表示されます。
一番上の行(通常はドメイン名と同じもの)をクリックしてください。
例:example.com
や index.html
ステップ5:IPアドレスを確認
右側に詳細パネルが表示されます。
- 「Headers」タブ(日本語:「ヘッダー」)を確認
- スクロールして「General」セクションを探す
- 「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サイトは、複数のサーバーを使っています。
手順:
- Networkタブでリクエスト一覧を見る
- 異なるドメインのリクエストを複数クリック
- それぞれの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アドレスを調べるのにかかった時間を確認できます。
手順:
- リクエストをクリック
- 「Timing」タブを開く
- 「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を最新版にアップデートしてください。
- Chrome右上の「︙」→「ヘルプ」→「Google Chrome について」
- 自動的にアップデートが始まる
- 再起動
問題2:リクエスト一覧が空
原因:
Networkタブを開く前にページを読み込んでしまった。
解決策:
- Networkタブを開いた状態で
- ページをリロード(F5)
Networkタブを開いてから読み込まないと、記録されません。
問題3:プロキシ経由でIPが分からない
原因:
会社や学校のプロキシを経由している場合、表示されるIPはプロキシサーバーのものです。
確認方法:
プロキシを使っているか確認:
- Chrome設定を開く
- 「プライバシーとセキュリティ」
- 「セキュリティ」
- 「詳細設定」で確認
問題4:キャッシュで古い情報が表示される
原因:
ブラウザがキャッシュを使っている。
解決策:
スーパーリロード(強制再読み込み):
Ctrl + Shift + R (Windows)
Command + Shift + R (Mac)
または
キャッシュを無効化:
- Networkタブを開いた状態で
- 上部の「Disable cache」にチェックを入れる
- リロード
応用:特定の通信を詳しく調べる
より高度な調査方法です。
WebSocketの通信を確認
リアルタイム通信(チャット、ライブ配信など)のIPアドレスを確認できます。
手順:
- Networkタブでフィルタを「WS」に設定
- WebSocket通信が表示される
- クリックして詳細を確認
リダイレクトの追跡
サイトが別のサーバーにリダイレクトしている場合、すべてのIPアドレスを確認できます。
手順:
- Networkタブでステータスコードが「301」や「302」のリクエストを探す
- 「Location」ヘッダーに、リダイレクト先のURLが表示される
- 複数のリクエストを順番に確認
APIサーバーのIPアドレスを確認
WebアプリがAPIサーバーと通信している場合、そのIPアドレスも確認できます。
手順:
- フィルタを「XHR」に設定
- API通信のリクエストを見つける
- Remote Addressを確認
例:
メインサイト: example.com → 203.0.113.10
API: api.example.com → 198.51.100.20
フロントエンドとバックエンドで、異なるサーバーを使っていることがわかります。
情報をエクスポートする
確認した情報を保存・共有できます。
HARファイルとしてエクスポート
すべてのネットワーク通信を、ファイルとして保存できます。
手順:
- Networkタブでリクエストを記録
- リクエスト一覧の上で右クリック
- 「Save all as HAR with content」を選択
- ファイルを保存
用途:
- 技術サポートに送る
- 後で詳しく分析する
- 他の開発者と共有する
スクリーンショットを撮る
視覚的に情報を共有したい場合に便利です。
Windows:
Win + Shift + S
画面の一部を選択してスクリーンショット
Mac:
Command + Shift + 4
ドラッグして範囲を選択
コピー機能
特定の情報だけコピーできます。
手順:
- リクエストを右クリック
- 「Copy」を選択
- 目的の項目を選択
コピーできる項目:
- Copy link address → URL
- Copy as cURL → コマンドライン形式
- Copy response → レスポンス内容
- Copy all as HAR → すべての通信情報
セキュリティとプライバシーの確認
IPアドレス以外のセキュリティ情報も確認できます。
SSL証明書の確認
HTTPSサイトの証明書情報を見られます。
手順:
- Networkタブでメインのリクエストを選択
- 「Security」タブをクリック(日本語:「セキュリティ」)
- 証明書の詳細が表示される
確認できる情報:
- 証明書の発行者
- 有効期限
- 暗号化方式
- 証明書チェーン
Cookie の確認
サイトが設定するCookieを確認できます。
手順:
- Networkタブでリクエストを選択
- 「Cookies」タブをクリック
- すべてのCookieが表示される
確認できる情報:
- Cookie名
- 値
- ドメイン
- パス
- 有効期限
- セキュリティ属性(HttpOnly、Secure)
Mixed Contentの確認
HTTPSサイトからHTTPリソースを読み込んでいないか確認できます。
問題のある例:
https://example.com (安全)
→ http://image.example.com/photo.jpg (危険)
HTTPSサイトからHTTPを読み込むと、セキュリティ警告が出ます。
よくある質問
開発者ツールの使用に関する疑問にお答えします。
Q1. 開発者ツールを使っても安全?
はい、安全です。
理由:
- 情報を見るだけで、サイトに影響しない
- 自分のブラウザ内だけの操作
- サーバーに特別な負荷をかけない
ただし、見た情報を悪用するのは違法です。
Q2. モバイル版Chromeでも使える?
AndroidのChromeには、簡易版の開発者ツールがあります。
使い方:
- Chrome設定から「デベロッパー向けのオプション」を有効化
- 「リモートデバッグ」を使用
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開発者ツールを使えば、ブラウザだけで詳しいネットワーク情報を確認できます。
この記事の重要ポイント:
基本的な使い方:
- F12 で開発者ツールを開く
- 「Network」タブをクリック
- ページをリロード(F5)
- 最初のリクエストをクリック
- 「Headers」タブの「Remote Address」を確認
確認できる情報:
- IPアドレス
- ポート番号
- サーバーソフト
- SSL証明書
- Cookie
- 応答速度
- ファイルサイズ
便利な機能:
- フィルタで特定の通信だけ表示
- HARファイルでエクスポート
- Timingタブで性能分析
- Securityタブで証明書確認
トラブル対処:
- リクエストが表示されない → リロード
- 古い情報が表示される → スーパーリロード
- キャッシュを無効化する
活用シーン:
- サーバー移転の確認
- CDNの使用確認
- API通信の調査
- セキュリティチェック
- パフォーマンス分析
Chrome開発者ツールは、Web開発者だけでなく、一般ユーザーのトラブルシューティングにも役立ちます。
コマンドを覚える必要もなく、視覚的にわかりやすいので、ぜひ活用してください!
コメント