Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第4回は、Android端末に表示しているWebサイトを、Chromeデベロッパーツールで検証する「Webインスペクタ」を解説します。 特定デバイスでのバグ、表示崩れの原因を調べたい スマートフォン向けにコーディングをしていると、特定の端末でしか発生しないバグや表示崩れがあります。「特定の端末」の場合、第1回で解説した「Device Mode」では問題が再現せず、原因の特定は困難です。 原因を特定するには、バグ、表示崩れが発生した端末でChromeデベロッパーツールの「Webインスペクタ」を使って、問題のWebページを表示しながら検証します。 Webインスペクタの設定方法 Webインスペクタに使用するAndroid端末の設定を変更します。設定画面を開き、「開発者向けオプション」を表示します。
![Android実機のデバッグが激しく捗る「Webインスペクタ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa500d9a63b4ce13e2e4fe0684e3fa42bb2a1bec/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F1999%2F03%2F26%2F746496%2Fl%2Fbe7c21e27bc10fa1.jpg)