こんにちは、Akros Web & Business Design Academy 札幌校の三本です。

先日、Firebugの開発終了がアナウンスされましたが、使い慣れていた方には残念なニュースだったかと思います。
私の場合、Firefoxの標準で装備されているデベロッパーツールの方が使いやすかったので、Firebugはアンインストールしてしまった派です。

さて今回は、ブラウザに機能を追加するためのいくつかのアドオンツールを紹介したいと思います。
メインで使用しているブラウザがGoogle Chromeですので、今回はChromeに絞ったツールをご紹介致します。

  ColorPick Eyedropper

参考サイトに表示されている画像やテキストなどのカラーコードを取得できるアドオンツールです。
CSSに書かれていれば、デベロッパーツールで取得できますが、画像やPDFは一度ダウンロードしてPhotoshopで開くなどしないと確認できないため、このツールで調べたいところにカーソルを当てると、HEXのカラーコードだけでなく、10進のRGBやHSLでの取得も可能です。

  Google Analytics オプトアウト アドオン

Googleが提供しているアドオンツールです。
アナリティクスを設定した際に、自身のアクセスもカウントされてしまい正確なアクセス数が計れないことがあります。
固定IPアドレスの場合は、アナリティクス側の設定で除外できますが、固定でない場合は、このアドオンを追加したブラウザからアクセスした場合は、集計から除外されるようになります。

  JavaScript Errors Notifier

このアドオンツールを追加しておくと、JavaScriptやCSSなどの外部ファイルでエラーを検出した場合、警告を表示してくれます。
エラーを検出しても表示上影響ない場合がありますが、表示しているページがどのスクリプトでエラーになっているか、デベロッパーツールを開かなくても分かるようになっています。

  Link Redirect Trace

表示しているページのリダイレクトがどのように発生しているか確認することができます。
ループが発生している場合、どのURLが繰り返しアクセスされているか、301、302、どちらでリダイレクトされているかなど確認することができます。

  FireShot

参考サイトの紹介や指示書を作成する場合、そのサイトの画面キャプチャが必要になる場合があります。
そんな時、このアドオンツールを追加しておくと、表示した状態のキャプチャやページ全体のキャプチャが取得できます。
pdf形式や各種イメージ形式で保存可能です。

 
今回は、私が実際に使用しているアドオンツールからいくつかピックアップしてご紹介致しました。
またおすすめしたいツールがあったら、あらためてご紹介したいと思います。

資料請求はこちら
体験レッスンお申し込みはこちら