Web担当者の業務をブラウザアドオンで効率化しよう③デバッグ・検証編

Webサイトの構築・運用におけるサイト調査に役立つブラウザアドオンをご紹介します。

ご利用のブラウザにアドオン（機能拡張）をインストールすることで、Webサイトの構築・運用において作業効率化を実現できます。 第一回の仕事効率化編、第二回のサイト調査編に続き、今回はWebサイトのデバッグ・検証編に役立つブラウザアドオンをご紹介します。

閲覧中のサイトのソースをエディターを起動しないで修正できないの？

HTML・CSS・JavaScript等をリアルタイムに編集、デバッグ、監視が可能。

Firebug こんな時に便利●公開したページの行間や文字サイズの調整をする ●開発中のHTML、CSSのデバッグをブラウザ上で行う

ソースの編集、構文のチェック等、サイト構築を効率化したい。

CSSやJavaScriptの無効化、フォーム・画像・その他要素の情報を表示。

Web Developer こんな時に便利●CSSやJavaScriptが無効となるブラウザの表示を確認 ●画像やリンク、フォーム等の要素の詳細情報を表示

ブラウザ表示を確認しながらHTML構文のエラーをチェックできないかな？

表示されたページのHTMLを検証し、エラーと警告の数をステータスバーに表示。エラーの詳細がソース画面に表示される。

HTML Validator こんな時に便利●W3Cに基づいたHTMLの構文のエラーをチェックする ●HTMLソースの不具合を効率的に修正

JavaScriptのオン/オフを、すぐに切り替えて表示の違いを見たい。

ツールバーのボタンをクリックし再読み込みする。

JSOff こんな時に便利●JavaScriptが使えない状態のブラウザの挙動を調べる ●JavaScriptをオフにすることによって、ページの表示を高速化

画像に設定されている代替テキストをその画像の上で見たい。

マウスを画像に合わせると代替テキストが表示。

Popup ALT Attributes こんな時に便利●画像に代替テキストが適切に設定されているかを確認 ●リンク画像の代替テキストがリンク先にあっているかを確認

リンク切れを視覚的に確認できないの？

ページの任意の部分、またはターゲットとなるリンクを選択（複数可）して右クリック。

Pinger こんな時に便利●公開直後の確認でリンク切れ箇所がないかを確認 ●公開中のページにリンク切れがないか定期的に確認

端末が無い時に各種モバイル端末の表示を確認できないの？

UserAgentを切り替えて、モバイル端末など様々なブラウザによるサイトの表示をシミュレート。

User Agent Switcher こんな時に便利●PC、スマホ、携帯の各ブラウザでの表示を確認する

実機を使わないでキャリアの絵文字や端末機能を確認したい。

主要3キャリア（DoCoMo/Au/SoftBank）の携帯端末ブラウザをシミュレート。

FireMobileSimulator こんな時に便利●キャリアの端末を指定して表示を確認する ●絵文字表示等、携帯特有の表示をPCで確認する

ブラウザを各種デバイスごとの画面サイズに合わせたい。

解像度一覧から確認したいデバイスの解像度を選択。

Window Resizer こんな時に便利●ブラウザで各種デバイスの表示状態を見たい

レスポンシブデザインの表示状態をチェックしたい。

パネルに表示切り替えサイズが表示され、ルーラーをクリックするとウインドウ幅を変更可能。

Responsive Inspector こんな時に便利●ブラウザのウインドウ幅をサイズを指定し変更 ●レスポンシブの表示を切り替えるウインドウサイズを確認

IEを起動しないでIEでの表示を確認できないかな？

選択したタブをInternet Explorerのレンダリングエンジンを使って表示する。

IE Tab こんな時に便利●WebページのIEでの表示をすぐに確認する

Firefoxで見ているページを即IEで開き、IEの独自機能も利用したい。

表示しているページを、右クリックでInternet Explorerを起動し開き直す

IE View こんな時に便利●IE専用で利用するページをIEで開きなおす ●リンク先のページをIEで開く

ブラウザアドオンとは

Webブラウザにインストールする機能拡張アプリです。ブラウザの利便性を高めたり、様々な機能の追加を可能にします。ブラウザアドオンの追加・削除、有効・無効等の管理方法は各ブラウザのヘルプページをご確認ください。

●ブラウザアドオンの利用による不具合につきましては、当社では一切責任を負いません。 ●ブラウザアドオン同士の競合により、動作が不安定になることがあります。 ●ブラウザのアップデートにより、動作が不安定になることがあります。

＜この記事について＞▼各ブラウザアドオンの利用については、下記のサイトで公開しています。http://at21.jp/web/topic/topic13.html

株式会社あとらす二十一

http://at21.jp/