THE HAM MEDIA BLOG

Firefoxアドオンの使いどき(自分の場合)

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
便利サイト
タグ:
Firefox
Firebug
web

Firefoxアドオンの使いどき(自分の場合)

先日『(X)HTMLやCSSの動作を見るためにプログラマも入れておくべき
5つのオススメFirefoxアドオン
』のエントリーを書いて、
そこのコメントにid:bobchinさんが
私は(アドオンを)こう使ってる!というのがあるとうれしいかも
というご意見があったので、前回紹介したアドオンのを、
自分の場合こういう時に使っているよというのを書いておこうと思う。

JSView

JSView

前回の順番で説明すればよかったのかもしれないけど、
今日は説明する順番を変えています。

最初はJSView、実はこれはコーディングの時に使っているわけではなくて、
いいろなサイトを見て回っているときに、そのサイトが
「どんなCSSにしているのかな」とか「どんなJavaScript使っているのかな」
なんて思ったときに、それらを見るときに使っているアドオンです。

JSView

見ているサイト上で、ブラウザの下に、JSとかSSというボタンができるので、
それをクリックするだけで、上記画像のように、JavaScriptとCSSの一覧がでてきます。

ただしここに表示されるのは、外部ファイルとして読み込んでいるファイルのみで、
html上に直接書かれているCSSやJavaScriptはそこでは確認できません。

ボタンをクリックして一覧を出したあと、見たいファイルをクリックすると、
そのソースが表示されるので、CSSやJavaScriptの勉強をしたい場合になどに便利です。

もしこれを制作の時点で使うとしたら、
きちんとソースが読み込めているかの確認ができることでしょう。
一覧からクリックしても、読み込めていないファイルについては、
エラーの表示がでるようになっているので、
ファイルのパスが間違っていないかどうかの確認にも使ってみてください。

IE Tab

IE Tab

これはIEでのレンダリングチェックに利用するだけなので、
説明は省略させてもらいます。

Firefoxで見た時は問題なく作れていても、
IEでみたら崩れてしまっていたや、ズレているなどの問題が多々あるので、
必ずIEで確認するようにしたほうがいいです。

HTML Validator

HTML Validator

これは文法エラーがないかのチェックに使います。
これを使うと、わざわざW3Cなどのチェックサイトに行かなくとも、
ここだけでエラーのチェックをすることができるようになります。

エラーがあると、ソースの表示画面で間違っている箇所を教えてくれます。

HTML Validator

例は極端な例で、bodyタグを消した例を表示しているのですが、
こんな感じに間違っている部分を行番号とかも含めて教えてくれます。
説明が英語なのがちょっとわかり辛いのもありますが、
それでも間違っている部分をブラウザで表示したときにわかるので便利だと思います。

そして、僕は使った事がないのですが、
文法の修正も自動的にしてくれるとか・・・使った事がないのでわかりませんが
ぜひそれは使ってみて感想を教えてもらいたいです。

Web Developer

Web Developer

これはいろいろなケースがあるので、全部の機能が使えているわけではないのですが、
例えばJavaScriptで表示が崩れたりなにか誤作動しているときに、
JavaScriptのオンオフが簡単にできたりします。
JavaScriptだけじゃなくて、Cookieや画像、CSSもオンオフ可能です。

個人的に一番重宝しているのは、ソースの検証。
HTML Validatorでもいいのですが、
サイトで確認したいときや、HTML-lintで確認したいとき、
CSSのソースも確認したいときなど、ここのツールから一発で検証サイトへとべる。
さらにローカル内のファイルの検証も可能なのがいい!

(X)HTMLやCSSの動作を見るために、Webプログラマも入れておくべき5つのFirefoxアドオン

(X)HTMLやCSSの動作を見るために、Webプログラマも入れておくべき5つのFirefoxアドオン

使いどころは主にサイトが崩れてしまっている時、
ブロックの状態を確認するにはもってこい。
どこのブロックのズレのために崩れが発生しているのかを確認したりするのに利用している。

そこでも原因がわからない場合、直接各部分の情報を確認できます。

Firebug

Firebug

Firebugで自分が使っている部分は主にJavaScriptのエラーをみるため。
エラーが発生していると、どこでエラーなのかが表示される。
また、JavaScriptによるHTMLの変化もみることができ、
動作の確認にもかなり重宝する。

話が少しそれるが、DreamweverCS4では、
このFirebugでみれるようなことが、
ソースコードライブビューでも見れるようになるようだ。
(かなり欲しい。。。)

また、CSSの修正にも便利で、実際にCSSを書き換えられるわけではないが、
Firebug上でCSSの修正テストをすることも可能。
不必要な要素を消したり、値を直したりすることで、
その場で変化をみることができる。

個人的にはWEB Developerで確認できなかったような場合に、
このFirebugで試しに修正したりしてみている。
最近はFirefox上で表示がおかしくなることが最近ないので、
FirebugでのCSS操作はあまり使っていない。

むしろIE上でうまく表示されないことがあるのがあるのが悩み...

簡単にだけ書いてみましたが、
こういう時はどうしているの?などの質問があれば、
コメントなどに書いてもらえたらうれしいです。

参考サイト:
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。