こんにちは、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形式や各種イメージ形式で保存可能です。
今回は、私が実際に使用しているアドオンツールからいくつかピックアップしてご紹介致しました。
またおすすめしたいツールがあったら、あらためてご紹介したいと思います。
