第五回 便利なchromeのアドオン(拡張機能)Web Developerをご紹介『制作者支援ツール』
第四回の「第四回 便利なchromeのアドオン(拡張機能)Screen Capture(by Google)をご紹介『ホームページの画像を切り抜き』」から一か月以上が経ったので、新しいアドオンをご紹介いたします。
今回は私もよく使っている。、ホームページ制作者に便利なアドオンを紹介します。
このWeb Developerはもともとfirefoxで有名なアドオンで、chrome版は後から開発されました。
このWeb Developerで何が出来るかというと、ホームページの様々な検証が可能になります。
特に便利な機能が、ブラウザから直接CSSをエディットしたり、javescriptの検証、cookiesを切ったりする事が可能です。
では、機能の説明は続きでしていきます。
Web Developerをインストール
chrome web storeよりscreen captureをインストールしてください。
ここから簡単に、インストールできます。
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で入れた文章で表示 |
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）を駆使する事で制作環境は大幅に向上します。
-
前の記事
プロモーションに力を入れている観ていて楽しいfacebookページ 2012.11.16
-
次の記事
SEO対策にはコンテンツと言い過ぎたので、SEO対策の技術について書きます。 2012.11.21