【Catoクラウド】デベロッパーツールを用いたトラブルシューティング

はじめに

Cato クラウドを利用のお客様から、ときどき次のようなお問い合わせが来ることがあります。

  • Web ページ内の動画を再生できない
  • Web ページは開けるが正常に表示されない

Cato クラウドに接続しなければ正常に Web ページが表示されるのであれば、上記のような問題は Cato クラウドによって引き起こされていると考えられます。

このような場合、ブラウザのデベロッパーツールを利用すればお客様自身で素早く解決できる可能性がありますので、そのトラブルシューティング方法をご紹介します。

トラブルの原因

Cato クラウドに接続しなければ正常に Web ページが表示されるのに、Cato クラウドに接続するとおかしくなるという問題が起きた場合、お客様自身で Web ページへのアクセスに関するイベントを確認し、Internet Firewall で許可したり TLS Inspection をバイパスしたり、他にもいろいろと試されるのですが、解決できずにお問い合わせいただくことがあります。

表示がおかしくても Web ページ自体は開けているのであれば、その Web ページへのアクセスは Cato クラウドによって制限されることなく行えていることを意味します。しかし、表示がおかしくなるということは、その Web ページから参照されている他の Web サイトへのアクセスがブロックされている可能性があります。

世の中の多くの Web ページでは、そこにアクセスしたとき、ブラウザのURL欄に表示される FQDN (ドメイン名) 以外の Web サイトへのアクセスも行われ、JavaScript、CSS、画像や動画、その他リソースの読み込みが行われます。それらの読み込みがブロックされると、結果として Web ページ内の一部が表示されない、レイアウトが崩れる、一部機能が動作しないといった事象に繋がります。

例として、弊社の Web ページ (https://www.scsk.jp/) を挙げてみます。この Web ページでは、サイト内検索機能を実現するために “c.marsflag.com” というドメインにアクセスして JavaScript などを読み込むようになっています。試しに Cato クラウドの Internet Firewall を用いてこのドメインをわざとブロックするようにしてみると、次の図のように検索機能が利用できなくなってしまいました。

ドメインをブロックしていない場合(正常な表示)

一部ドメインをブロックした場合(検索ボックスが無くなって使えなくなっている)

こういった問題の原因は Web ページを見るだけではわかりづらく、お客様に通信のキャプチャを取得していただいたうえで弊社や Cato のサポートにて解析・調査しているのですが、ブラウザのデベロッパーツールを利用すればお客様自身で素早く解決できる可能性があります。

トラブルシューティング方法

ここでは一般的によく利用される PC 用ブラウザで、デベロッパーツールを利用してトラブルシューティングする方法を説明します。先ほどの例のまま “c.marsflag.com” ドメインをブロックしている状態で試しています。

Google Chrome の場合

Google Chrome では、キーボードの「Ctrl + Shift + I キー」を押すとデベロッパーツールが表示されます。あるいは、メニューの「その他のツール」の中から「デベロッパーツール」を選択して表示することもできます。

上図のブラウザ画面の右のほうの領域を占めているのがデベロッパーツールです。このうち「Network」タブがトラブルシューティングの肝です。デベロッパーツールを表示してから Web ページを表示 (F5 キーで再読み込み) すると、ブラウザと Web サーバとの間で行われる多数の HTTP 通信の内容が全て表示されます。

一覧では HTTP 通信の Name, Status, Type などが表示されていますが、Cato クラウドをお使いの場合は通信先のドメイン名が重要ですので、一覧のヘッダ部分を右クリックして「Domain」も選択して表示させるようにするのがお勧めです。

すると、”c.marsflag.com” というドメインへのアクセスで HTTP ステータスコード 403 のエラーとなっていることが一目でわかります。

この 403 エラーとなっている行を選択し、右クリックして “Open in new tab” を選択してその URL を別のタブで開いてみると、たしかに Cato クラウドのブロック画面が表示されました。

これにより、”c.marsflag.com” というドメインの URL へのアクセスが Cato クラウドによってブロックされていることがわかりましたので、あとはイベントログを確認しつつ、実際にブロックしている機能 (Internet Firewall など) のルールを変更すればアクセスできるようになります。Cato クラウドのブロック画面以外が表示されるようであれば、おそらく Web サイト側の問題の可能性が高いです。

また、Web ページが表示されるのが遅いという場合、デベロッパーツールの各行の「Time」を見ると、どのリソースへのアクセスでどれだけ時間がかかったのかわかります。Cato クラウドを使わない場合は素早く表示されるのに Cato クラウド経由だと遅くなるような場合には、時間がかかっているアクセスの URL を特定できれば、原因特定や改善にも役立ちます。

Microsoft Edge の場合

Microsoft Edge も Google Chrome と同様に、キーボードの「Ctrl + Shift + I キー」を押すか、メニューの「その他のツール」の中から「開発者ツール」を選択すれば、デベロッパーツールを表示できます。

表示が日本語化されていたり、ツールの名称が「Microsoft Edge DevTools」や「開発者ツール」となっていたりしますが、デベロッパーツールの利用方法や機能は Google Chrome とほぼ同じです。

Mozzila Firefox の場合

Mozzila Firefox もキーボードの「Ctrl + Shift + I キー」を押すか、メニューの「その他のツール」の中から「ウェブ開発ツール」を選択すれば、デベロッパーツールを表示できます。

見た目は Google Chrome などと異なりますが、同様に利用してトラブルシューティングを行えます。

まとめ

本記事では、ブラウザのデベロッパーツールを用いたトラブルシューティング方法の一例を説明しました。

Web ページの一部の表示がおかしいときのトラブルシューティングとして記載していますが、他の問題が起きたときもデベロッパーツールが役立ちますので、ぜひご活用ください!

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