第五回　便利なchromeのアドオン(拡張機能)Web Developerをご紹介『制作者支援ツール』

第四回の「第四回　便利なchromeのアドオン(拡張機能)Screen Capture(by Google)をご紹介『ホームページの画像を切り抜き』」から一か月以上が経ったので、新しいアドオンをご紹介いたします。
今回は私もよく使っている。、ホームページ制作者に便利なアドオンを紹介します。
このWeb Developerはもともとfirefoxで有名なアドオンで、chrome版は後から開発されました。

このWeb Developerで何が出来るかというと、ホームページの様々な検証が可能になります。

特に便利な機能が、ブラウザから直接CSSをエディットしたり、javescriptの検証、cookiesを切ったりする事が可能です。
では、機能の説明は続きでしていきます。

Web Developerをインストール

chrome web storeよりscreen captureをインストールしてください。
ここから簡単に、インストールできます。

機能は多数あるので、よく使う項目をご紹介していきます。

Disable

Disable JavaScript	JavaScriptを切る事が出来ます。

Cookies

Disable Cookies	Cookiesを切る事が出来ます。
Add Cookie…	フォーム等にCookieを追加できます。

Images

Display Image Dimensions	画像サイズを表示
Find Broken Images	壊れた画像一覧を表示
Replace Images With Alt Attributes	画像部分をaltで入れた文章で表示

CSS

Outline

Outline Block Level Elements	div,ul,h2等のCSSを視認できます。
Outline Floated Elements	サイトで使用しているフロートを視認できます。
outline Headings	hタグを視認できます。

ホームページを制作していると、CSSをちょっと書き換えたり画像のalt確認等、様々な部分をチェックする必要があります。
このツールを使えば、altの抜けている部分も簡単に見つける事が可能になります。
そのほかにも、面倒だった確認事項が簡単になるのでお勧めです。

このWeb Developerと共にchromeのデベロッパーツール（F12）を駆使する事で制作環境は大幅に向上します。