ページの開始
お問い合わせ
Tel 03-6832-2121

現在位置はホームの中のWeb担当者の業務をブラウザアドオンで効率化 デバッグ・検証編です

|
ここから本文

2014年11月4日

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

ご利用のブラウザにアドオン(機能拡張)をインストールすることで、Webサイトの構築・運用において作業効率化を実現できます。
おすすめのブラウザアドオンをご紹介します。

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

こんな時
に便利

  • 公開したページの行間や文字サイズの調整をする
  • 開発中のHTML、CSSのデバッグをブラウザ上で行う

Firebug

Firefoxへ追加

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

HTMLやCSSを直接書きかえてはいないため、編集したソースをコピーしておく必要がある

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

こんな時
に便利

  • CSSやJavaScriptが無効となるブラウザの表示を確認
  • 画像やリンク、フォーム等の要素の詳細情報を表示

Web Developer

Firefoxへ追加CHROMEへ追加

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

ソースを編集する場合、直接書きかえてはいないため別途ファイルへの保存が必要

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

こんな時
に便利

  • W3Cに基づいたHTMLの構文のエラーをチェックする
  • HTMLソースの不具合を効率的に修正

HTML Validator

Firefoxへ追加

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

公式配布されている広告タグ等にエラーが出ることがある

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

こんな時
に便利

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

JSOff

Firefoxへ追加

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

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

こんな時
に便利

  • 画像に代替テキストが適切に設定されているかを確認
  • リンク画像の代替テキストがリンク先にあっているかを確認

Popup ALT Attributes

Firefoxへ追加

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

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

こんな時
に便利

  • 公開直後の確認でリンク切れ箇所がないかを確認
  • 公開中のページにリンク切れがないか定期的に確認

Pinger

Firefoxへ追加

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

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

こんな時
に便利

  • PC、スマホ、携帯の各ブラウザでの表示を確認する

User Agent Switcher

Firefoxへ追加CHROMEへ追加

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

正確な表示状態や挙動、タッチ操作は実機での検証が必要

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

こんな時
に便利

  • キャリアの端末を指定して表示を確認する
  • 絵文字表示等、携帯特有の表示をPCで確認する

FireMobileSimulator

Firefoxへ追加CHROMEへ追加

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

正確な表示状態や挙動、タッチ操作は実機での検証が必要。端末のデータは有志による登録のため内容の確認が必要

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

こんな時
に便利

  • ブラウザで各種デバイスの表示状態を見たい

Window Resizer

CHROMEへ追加

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

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

こんな時
に便利

  • ブラウザのウインドウ幅をサイズを指定し変更
  • レスポンシブの表示を切り替えるウインドウサイズを確認

Responsive Inspector

CHROMEへ追加

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

機能の一つであるページ全体のスクリーンショットが撮れないことがある

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

こんな時
に便利

  • WebページのIEでの表示をすぐに確認する

IE Tab

Firefoxへ追加CHROMEへ追加

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

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

こんな時
に便利

  • IE専用で利用するページをIEで開きなおす
  • リンク先のページをIEで開く

IE View

Firefoxへ追加

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

ブラウザアドオンとは

Webブラウザにインストールする機能拡張アプリです。ブラウザの利便性を高めたり、様々な機能の追加を可能にします。

■ブラウザアドオンの追加・削除、有効・無効等の管理方法は各ブラウザのヘルプページをご確認ください。

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

Web担当者の業務をブラウザアドオンで効率化しよう
Webサイト運用のお問い合わせ

株式会社あとらす二十一 Webソリューション部

03-6832-2121 受付時間:平日 9 :00-18:00

お問い合わせフォーム

※広告・制作関連の同業、および個人の方のお問い合わせはご遠慮ください。



ここからフッターメニュー
ページの終わり
ページの先頭へ戻る