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

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

20130308chrome

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

 

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

 

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

Web Developerをインストール

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

2012111902.jpg

Web Developerの機能

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

便利なchromeのアドオン(拡張機能)Web Developer

Disable

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

Cookies

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

Images

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

Imagesの設定

CSS

Disable All Styles CSSを切る事が出来ます。
EDIT CSS ブラウザ上で直接CSSを編集が可能になります。
View CSS サイトで使用しているCSSを表示できます。

Outline

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

まとめ

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

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