Webサイトの検証ができるツールをご紹介します。
ユーザーエージェント
ユーザーエージェントとはWEBサイトにアクセスした際に伝えられるユーザー情報のことです。利用者のOSやブラウザ、機種などの情報をWEBサイトに伝えることにより、そのユーザーの状態に適したデザインを表示させます。下記のWEBサイトから「ツールを開く」をクリックしてみましょう。自分が見ている環境が表示されます。


PCツール(WEB検証関連)
WEBサイトの裏側の情報を確認できるツールがあります。3つご紹介します。
User-Agent Switcher for Chrome
Chromeのアドオン機能です。このツールを利用すると、ユーザーエージェントを偽装して表示することができます。例えばWindows10のパソコンを使用してWEBサイトを開きます。その際にツールでiPhoneXを選択します。そうすることでWEBサイトにWindows10ではなくiPhoneXで見ていると情報を伝えられ、iPhoneXのデザインが表示されます。

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ja
Web Developer
Chromeのアドオン機能です。ツールを利用すると画像に使用しているaltやリンクを表示させたり、リダイレクトをさせないような調整ができます。WEBサイトのエラーの原因調査や検証には必須のツールです。

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja
EmEditor
EmEditorはテキストエディタです。動作が軽いためテキストエディタとしても優秀なツールですが、便利な機能の一つとしてgrepコマンドが利用できます。grepコマンドとは、ファイル内に使用されている文字列を全て拾うことができる機能です。ファイル内を検索することができるため、例えばGoogleの広告タグを反映しているページのみを全て洗い出す、といった処理も自動で行うことができます。

POINT
ユーザーエージェントやWEBサイトの検証方法を知っていると、WEBサイトを違った目線で見ることができます。
コメント