Webデザイン制作やコーディングの過程において、表示・動作テストは重要です。ユーザーがサイトを閲覧するためのデバイスのサイズや環境は多様化しているので、様々な状況を想定してテストする必要があります。

Google Chrome・FireFoxのブラウザ拡張機能であるWeb Developerを活用すれば、CSS・JavaScript・画像などのオン・オフや、異なるサイズのブラウザでの表示など、様々な状況をクリックひとつで簡単に再現できます。

目次

  1. Web Developerとは
  2. Web Developerの特徴
  3. インストール方法
  4. Web Developerの使い方
    1. 無効化
    2. 枠線表示
    3. ウィンドウサイズ変更
    4. 情報表示
    5. オプション設定
      1. ウィンドウサイズ登録
  5. Web Developerの削除方法
  6. まとめ

Web Developerとは

1.png
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja (Google Chrome)
https://addons.mozilla.org/ja/firefox/addon/web-developer/ (FireFox)

Web Developerとは、イギリスのWebエンジニアが作成したGoogle ChromeやFireFoxやOperaの拡張機能で、ブラウザに追加すると様々な状況下でのページの表示確認や動作テストなどを簡単に行えます。WindowsでもMacでも利用可能です。

例えば、見出しタグが正しく設定されているかチェックしたり、そのページ内のリンクを一覧で表示させたり、Webディレクターならインストール必須の拡張機能と言えます。

Web Developerの特徴

  • JavaScript・Cookie・CSS・画像表示を無効化
  • ページ内の情報や要素を表示
  • ブロック・フレーム・テーブル・外部リンク箇所を枠線で表示
  • ブラウザサイズの変更、カスタムブラウザサイズの追加
  • フォームの一括操作やテスト
  • HTML・CSS・リンクなどのバリデーションチェック

Web Developerを追加すると、デバイスごとの表示確認やフォームの動作確認テストなど、Web担当者が時間をとられがちなあらゆる作業を効率的に行えます。
HTMLやCSSのチェックも行えるので、デザイナーやエンジニアの方にとっても有用でしょう。

インストール方法

2.png
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja (Google Chrome)
https://addons.mozilla.org/ja/firefox/addon/web-developer/ (FireFox)

Google Chromeへのインストールをしていきましょう。Chromeウェブストア内のWeb Developerのページにて、「CHROMEに追加」ボタンをクリックします。

3.png
Web Developerを追加するかどうか確認するポップアップが表示されますので、「拡張機能を追加」をクリックします。

4.png
ブラウザの拡張機能にWeb Developerボタンが追加されます。

Web Developerの使い方

無効化

5.png
Disableタブでは、JavaScriptやプラグインを無効化したときのページの見え方を確認できます。

6.png
Disableタブ以外のタブ内にも、無効化の機能があります。CSSタブ内の「Disable All Styles」では、CSSを無効にできます。

7.png
Imagesタブ内の「Disable Images」では、画像を非表示にできます。「Images has been disabled.（画像は非表示になりました）」というメッセージが表示されたら、ページを再読込します。

8.png
画像が非表示になります。

枠線表示

9.png
Outlineタブでは、ブロック、フレーム、テーブルなどの周囲に枠線を表示できます。例として「Outline External Links（外部リンクに枠線を付ける）」をクリックします。

10.png
ページ内の外部リンク箇所に枠線が表示されます。

ウィンドウサイズ変更

11.png
Resizeタブでは、ブラウザのサイズを変更できます。スマートフォンやタブレットを含め、様々なサイズのPCやデバイスでもデザインの崩れがないかを確認するといった用途があります。予め登録されているサイズの他にカスタムのサイズを追加する方法は、オプション設定の項目でご説明します。

情報表示

12.png
Informationタブでは、サイトの様々な情報を表示・確認できます。「Display Element Information」をクリックします。

13.png
例として「新着」をクリックすると、ブラウザ下部にウィンドウが表示され、DOM・Layout・Position・Text（フォント・フォントサイズなど）・Ancestors・Childrenが表示されます。

オプション設定

ウィンドウサイズ登録

14.png
Optionsタブ > Optionsをクリックします。

15.png
管理用の名前と、ウィンドウの縦横サイズを入力したら、Addボタンをクリックします。

16.png
サイズ一覧に追加され、Resizeタブからも選択可能になります。

Web Developerの削除方法

17.png
ブラウザのアドレスバーに「chrome://extensions/」と入力し、拡張機能を表示します。一覧からWeb Developerを探し、右のゴミ箱マークをクリックすれば、ブラウザの拡張機能から削除できます。

まとめ

Web Developerを活用すれば、特定の機能・表示の無効化、異なるサイズのブラウザでの表示など、様々な状況を簡単に再現できます。

Google Chromeデベロッパーツールなど、ブラウザ標準搭載のデベロッパーツールと比較すると、各設定のオン・オフをクリックひとつで簡単に切り替えられる点がメリットです。今回ご紹介した基本的な表示や機能以外も試し、Web制作やテスト作業に活かしましょう。