検索
連載

WebサイトのリダイレクトをChromeで調べるときのコツTech TIPS

Google ChromeのデベロッパーツールでWebサイトのリダイレクト時の挙動を確認するには、デフォルトから設定を変更する必要がある。その方法は? 注意点は?

PC用表示 関連情報
Share
Tweet
LINE
Hatena
「Tech TIPS」のインデックス

連載目次

対象ソフトウェア:Google Chrome(Windows/Mac用)


 Webサイトの構築や管理、運用に携わっていると、「リダイレクト」の挙動を確認しなければならないことがある。この機能は、例えばコンテンツの場所(URL)を移動させたり、HTTPからHTTPS対応のページへ誘導させたりする場合などによく使われる。

 その時に調べたいのは、次のようなことだろう。

  • ジャンプ前後のページのURLは想定通りか?
  • 「301」「302」といったHTTPステータスコードは正しいか?
  • レスポンスヘッダは想定通りか?

 こうした情報は、Google Chromeの「デベロッパーツール」を使えば簡単に確認できる。Windowsなら[F12]キー、Macなら[option]+[command]+[I]キーを押してデベロッパーツールを起動し、[Network]タブを選んでから対象のページを開く。すると、その読み込みの過程(ログ)が記録・表示される。

 だが、リダイレクトする直前のページを読み込んでも、そのログはいくら探しても見つからない。ステータスコードが「301」「302」であるページが記録されていないのだ。

Google Chromeのデベロッパーツールでリダイレクト時のログを確認しようとしているところ。SSL対応ページへ2回リダイレクトされるURLを開いてみる。あらかじめデベロッパーツールの[Network]タブを開いて、リダイレクトの過程のログを見ようとすると……
Google Chromeのデベロッパーツールでリダイレクト時のログを確認しようとしても……
リダイレクト時のログは見つからない。[Network]タブには、リダイレクトした後のページからログが始まっている。その前のログは見つからない。
リダイレクト時のログは見つからない

 なぜならデフォルトの設定のままだと、[Network]タブのログは、ページが遷移するたびにクリアされるからだ。つまり、肝心のリダイレクトの直前と最中のログは消え、リダイレクトによってジャンプした先のページから再びログが記録される。

リダイレクト時のログを残すには?

 これを解決するには、[Preserve log](ログの保存)チェックボックスにチェックを入れてオンにすればよい。これによりリダイレクトを含むページ遷移時にログがクリアされずに残るようになる。

引き続きGoogle Chromeのデベロッパーツールの[Network]タブ。ツールバーの[Preserve log]チェックボックスにチェックを入れてオンにしてから、リダイレクトするページを読み込むと、リダイレクトを表すステータスコード「301」「302」のログが記録された。つまりリダイレクト時のログが残った。
[Preserve log]をオンにするとリダイレクト時のログが残る

 ログの各行をクリックすると、それぞれのリクエストヘッダやレスポンスヘッダといった詳細な情報を確認できる。

不要になったログをクリアするには?

 [Preserve log]をオンにしていると、クリアされることなく、ログがどんどん積み重なっていく。そのため、次第に不要なログが増えて見にくくなってしまう。

 そんなときには、ツールバーにある通行止めの標識のようなアイコンをクリックして、ログを全部クリアすればよい。

引き続きGoogle Chromeのデベロッパーツールの[Network]タブ。ツールバーの左の方にある通行止めの標識のようなアイコンをクリックすると、ログが消えた
[Network]タブのログを手動でクリアする

リダイレクトの設定変更後の挙動を確実に調べるには?

 Webサイト側でリダイレクトの設定を更新してから、再びGoogle Chromeで読み込んでみても挙動が変わらないことがある。それはGoogle Chromeのメモリキャッシュやディスクキャッシュに残っている更新前の古いページにヒットしているせいかもしれない。

 そんなときには、[Disable cache]チェックボックスにチェックを入れてオンにし、キャッシュを無効化してみよう。その後に記録したログの[Size]列から「(from disk cache)」「(from memory cache)」が消え、データサイズを表す数値のみが表示されていれば、キャッシュは無効化されている。

引き続きGoogle Chromeのデベロッパーツールの[Network]タブ。ツールバーの[Disable Cache]チェックボックスにチェックを入れてオンにしてからページを読み込むと、ログの[Size]列から「(from disk cache)」「(from memory cache)」が消える。これはChromeのキャッシュが無効化されたことを表している。
Chromeのキャッシュを無効化してログを記録する

「Tech TIPS」のインデックス

Tech TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る