スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSやScriptをFirefoxアドオンでデバックチェック

Webページデバック
というわけで、今回は前のFirefoxの記事にて紹介してサラーっと書いただけで流れてしまった、
CSSやJavaScriptやさらにはHTMLなどを簡単にデバックして、
チェックできる「Firebug」の紹介です。

この、「Fire bug」は元々はWebページ制作者の技術的なデバックを行うために作成された、
ツールなのですが、そんなすごそうなツール(実際凄いです)をFirefoxにアドオン形式にて
インストールするだけで、簡単に使用することが出来るという優れものです。

この、「Firebug」を使用すれば

「あれ~?このサイトってHTML&CSS&スクリプトってどうやって組み立てられてるんだろ~?」

という、疑問も速攻で解決することでしょう。
HTMLやCSSやJavaScriptなどを多用するウェブページ制作者の方は
是非一度使用してみてはどうでしょうか?詳細は続きから。


【はじめに】


Firebug は、Web ページを閲覧中にクリック一つで使える豊富な開発ツールを
Firefox に統合します。あなたはあらゆる Web ページの CSS、HTML、及び
JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。

というわけで、このFirebugの凄いところの一つに、今表示しているページを
リアルタイムにデバックして表示することが出来るというわけですね。

しかし。。。ここで驚くことは他にもあります。それはこの一文です。

CSS、HTML、及び JavaScript をリアルタイムに編集

そうです・・・・このFirebugのすごいところは今表示しているページを編集・・・
要約すると、今表示されているページをプレビューしながら書き換えることが出来るというわけです。

では、いろいろ論より証拠、実際に使ってみた方が早いですね。
まずは、Firebugをダウンロード致しましょう。



【ダウンロード】

【Step1】
Firebugダウンロードに行く

【Step2】
ページ中部にある、Firefoxにインストールをクリックします。
(警告などが出ると思いますが、許可します。)

【Step3】
Firefoxを再起動します。






【実際に使ってみた】


Firebugが動作しているFirefoxの右下の方に書きのように虫っぽいマークが出ると思います。
虫です

この虫っぽい(多分虫名はバグ)マークを右クリックして、「Suspend Firebug」を選択すれば、
簡単に、Firebugを停止させることが出来ますので、使用しない場合などはFirebugを
停止させたりしましょう。

といっても、このFirebug自体、動作していてもとても軽いものなので
あまり気にならないとは思います。

それでは、早速HTML&CSS&JAVASCRIPTのデバックをしてみましょう。


【Step1】
まず、チェックしたいサイトにFirefoxで普通にアクセスします。

【Step2】
チェックしたいサイトに来たら、右下の虫っぽいマークを左クリックします。
虫です

そしたら、下記のような画面が表示されます。
デバック中

これで、デバックは完了です。

「えっ!?もう!?」

と思う方もいるかもしれませんが、本当にこれだけです。
たったこれだけの作業で簡単に各サイトのHTMLやCSSをデバックすることが出来ます。

ですが、ただ一言デバックすることが出来ます。といってもなかなか伝わりにくいと思いますので、
実際にFirebugの機能の一つである、リアルタイム編集&デバックの機能を使ってみましょう。



【HTMLのリアルタイム編集】


まず、上記のFirebugの画面で下記のように調査をクリックします。

調査



そして、調査の状態でブラウザ上で表示されている調べたい部分を下記のようにクリックします。

こんな感じ

ポインタされると上記のように青枠で表示されるので、そこをクリックします。

この場合は、当サイト「Sun Eternityのエンブレム」のマウスを乗せると、どのように
画像が変わっているか?そして、マウスを放したときにどのように画像が変わっているのかの
ソース部分をチェックしています。

・・・・・・・・・・・

はい、早速チェックが完了しました。とっても早いですね。

結果は以下のようになりました。

チェック結果

この場合は、たった部分をクリックしただけなのに、そのソースの部分までFirebugが
ユーザーを導いてくれます。

もちろん、CSS部分などがある場合はCSSの部分も表示してくれますし、
上記のようなJavaScriptがファイル別に保存されていても、そのファイルまで表示してくれます。

これにより、Webページ制作者は一回一回ページのソースを表示させ、
各ページにアクセスして検索していくという手間が大幅に省かれたという
ことになります。

さらには、CSSやJavaScriptなどのソース部分も同時に表示してくれるので、
今まで自力でソース部分を探していた人はこのFirebugを使用すれば、
より簡単にデバック&チェックが行えるということです。

後、ここには書いていませんが画像のプロパティをクリックすれば、画像のサイズなども
表示してくれたりといった、至れり尽くせりの環境となります。

そして、上記に述べた機能ですごい機能といえばリアルタイム編集機能ですね。
早速簡単な例で、使用してみましょう。




【リアルタイム編集機能】


これに関しては、普通にFirebugを開いてHTMLやCSSやJavaScriptに
下記のような感じで書き込んでいくだけでOKです。

書き込んだ後にEnterキーを押せばすぐに有効になります。
このサイトを例にちょっとした簡単な編集をしてみました。

デバック中

上記の例では、まず調査をクリックして自分の編集したい(今回はタイトル画像)をクリックすれば、
それと同時に左のCSSの方でもその部分のCSSが表示されますので、
それにて編集を行っています。

この、編集ツールの凄いところはなんといっても、リアルタイムでプレビューしながら
作業が 行える
というところとさらにそれが別のファイルだとしても、
そのファイル自体も読み込んで、表示してくれることだと思います。

さらには、右に表示されているCSSの機能は一行ごとにワンクリックでの有効・無効の切り替えが
可能となっており、
たったワンクリックでそのCSSの機能を有効にしたり無効にしたりすることが出来ます。

なので、どのCSSがどんな動作をしているのかなども調べることが出来るというわけですね。
上記の機能はJavaScriptなどにも備わっています。


上記のようなCSSとHTMLのチェック&デバックだけではなく、
JavaScriptのエラーチェックや編集&デバックなども行えます。



エラーチェックを行いたいページにアクセスすると、JavaScriptのエラーのあるページは
上記のように表示されるようになっています。

そして、このエラー表示を左クリックするとそのページでのJavaScriptでのエラー構文部分が
表示されるようになっています。

これを詳しくチェックしていけば、どの部分がどのようなエラーを起こしているかを、
簡単に見つけることが出来るのです。主に発見されるエラーは構文の文法ミスなどですね。





【回覧速度のチェック】

このFirebugはWebサイトの回覧速度などもチェックすることが出来ます。
そして、どのファイルがどれだけの時間をかけて表示されるかなどもチェックすることが可能です。

下記のように「接続」をクリックして、三つのを有効にします。

接続

後は、下記のようにFirebugが勝手に表示速度などをチェックしてくれます。


回覧速度チェック


この回覧速度チェックを使用すればどのファイルにどれだけの時間をかけて
表示されているかなどを、簡単に表示知ることができます。


上記には書いていませんが、上記の各ファイル部分をクリックすると
クッキーの詳細URLやサーバーのレスポイント(応答)やサーバーの種類なども
詳細に調べることが出来ます。
ですので、サーバーの応答に関する詳細チェックなどにも使用できると言うことですね。

ここのFC2サーバーはサーバーソフトでもおなじみの「nginx/0.6.32」でした。
低スペックでもたくさんのIPを捌けるということでもとても有名なサーバーですね。




【後書き】

上記にも述べたようにこのFirebugを使用すれば、簡単に
そのページのソースをチェックすることが出来ます。

このFirebugを使用して大手企業などのサイトに行ってみると面白いですよ~
大手企業のウェブサイトは主にプロの方が作成されているため、様々な技術が多用されています。

まさに「まだ見ぬ技術の宝庫」といった感じですね。

よく大手企業のサイトに行くと

「これってどういう風にして動いているんだろ~?」

といったことが良くあると思います。

そんな疑問もこのFirebugを使用すれば、よくわからない構成などもFirebugが調べてくれる
(ソース部分に移動)してくれるため、
この大手企業のWebページの構成(HTML&CSS&JavaScript)なども割とすんなりチェックすることが出来るようになりました。

上記のようなとても便利な機能がたくさん備わっていますので、
Webページ制作する人&研究している方には自信を持っておすすめできるツールです。


関連記事:
HTMLの対応するタグをチェック
コメント

No title

チェック=表示ですよね?
つまり他のサイトのHTML / CSSを見ることができるんですか?
なら使い方によっては簡単に悪用できる気がしますが・・
丸パクリとか。

まぁ他のサイトの一部のCSSは真似してみたいと思います。

う~ん・・・

>mxさん

>チェック=表示ですよね?
つまり他のサイトのHTML / CSSを見ることができるんですか?
なら使い方によっては簡単に悪用できる気がしますが・・
丸パクリとか。

う~ん・・・チェック=表示という観点でしたら、
ブラウザのソース表示機能も違反ということになりますね^^;

HTML/CSSはどちらかというと公表された技術に
近いものですし、もしそれを違反ということになると、
変な話<div>を使った時点で違反・・・
なんてことにもなりかねませんしね・・・

Webの資源は一人だけのものではありませんし、
ソースなども全て違反と言うようにしては、
これからの日本の技術発展にとってはあまりよくないと思います。

むしろ、技術を公開していくようでなければ、
日本のこれからの技術発展は厳しいと思います。

今では工学などでも中国などの外国に負けてきましたし、
これも日本の持つ奢りが原因でしょうね~・・・

なんだかとても悲しいことです。

HTML/CSSは、アドオンを導入しなくてもブラウザの標準の機能で普通に見ることができますし、自分の場合はいろいろなサイトのコードは、しょっちゅう見て参考にしていますね。

もちろん、id属性だけ変えてそのまま自分のサイトに転用などということは絶対にしませんが。。。

HTML/CSSソースを見ることは、今のところは全く問題ないと思っていますね^^;

にしても、有名企業のサイトなどを見ていると、本当に技術の宝庫という感じです。今まで見てきた中で一番すごかったのは、アップルのサイトかな。

あれだけのインターフェースを実装しながら、Flashを全く使っていないあたりにWEBデザイナーの情熱やこだわりが感じられる。。。

おー

>アンタレスさん

>HTML/CSSは、アドオンを導入しなくてもブラウザの標準の機能で普通に見ることができますし、自分の場合はいろいろなサイトのコードは、しょっちゅう見て参考にしていますね。

あ~、やっぱりいいですよね~様々な技術を見れるのは
そういえば、昔のFC2共有テンプレートコンテストでも
フラッシュを使ったテンプレートがありましたね。
あれには驚きましたね~。。。

あの当時は確か今から
④年前ぐらいでしたからIE6主流の時代で
フラッシュを使ったのですからね~発想力がすごいです。

ですが、確かIE6ではフラッシュを使うと
ポップアップが表示されたような・・・気がします。

それでもトップ5に入賞したのですから、
デザインは凄く良かったと思います。

が・・・その当時のトップテンプレート制作者たちの
その後に続くお話は当時の人ぐらいにしかわからなかった
悲しいものなんですよね・・・

トップテンプレート制作者の苦労が良くわかりましたよ・・・
マナーは大切ですよね・・・

・・・っと暗くなりそうなので、ここら辺にしておきますか


>HTML/CSSソースを見ることは、今のところは全く問題ないと思っていますね^^;

このツールはソースをたくさんチェックする人にこそ
お勧めできるツールだと思っています。

ソースも見やすくなり、部位特定も容易になる・・・

海外でも有名なツールですし、
自分としては「是非」をつけたいぐらいおすすめのツールですね。


>今まで見てきた中で一番すごかったのは、アップルのサイトかな。

アップルは今見てきましたが、
まさに「シンプルイズベスト」なサイトでしたね。
今度はあれぐらいシンプルなデザインを構築したいですね。
コメントの投稿
管理者にだけ表示を許可する

トラックバックURL

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。