Firefox Firebug Webサイトの表示が遅い時のデバッグツール

業務効率up

Firefox Firebug Webサイトの表示が遅い時のデバッグツール

Webサイトにアクセスした時に「やたら表示に時間がかかるな~」と感じている方はいらっしゃいませんか?
そういときは、Firefoxブラウザの拡張機能、Firebugという機能でどれくらいの時間がかかっているかを調べることができます!

やり方↓

① 確認したいWebサイトを表示
② どこでも良いのでサイト上で「右クリック」⇒「Firebugで要素を調査」
③ 「ネット」のタブを選択すると、現在開いているサイトが表示されるまでに何秒かかっているかを表示してくれます。
また、画像の読み込みなどの表示の時間も知らせてくれるので、とても便利です!

+Webサイト表示、時間短縮のための豆知識
*外国と日本で運営しているサイトなどは画像などのリンクが外部リンクだったりします!
そういうサイトは一度表示が遅くなる傾向にあります!
また、cssや画像のリンクが切れていて表示できないまたは、エラーになっているとこれもWebサイトの表示の時間が遅くなりますのでご注意ください!

以上、マメ知識でした!?

Firebugで読みにくいJavascriptライブラリを整形して表示

Ajax
Javascript

Firebugで読みにくいJavascriptライブラリを整形して表示

jQueryとか、Google Mapとか、ライブラリを読み込む時は、改行がないミニマムバージョンで読み込みますよね。
しかし、不具合が出たりする時は、中身が読みたい!と思うこともあるはず。
ミニマムバージョンでは、可読性が低すぎて、すぐ萎えてしまいますよね。

それが、Firebugでコードフォーマットできるんです。

下記の赤マルの部分をクリックで

firebug_code_format_before.png;

ドン!

firebug_code_format_after.png;

このように、コードフォーマットされて、読みやすいJavascriptになります。

すごい!Firebugさん!!
この状態で、デバッグもできますので、役に立ちます★

Firebug 表示させるエラーの種類を変更

Ajax
Javascript

Webの開発現場においてかかせない開発ツールですが、FirefoxのプラグインFirebugは中でも秀逸だと思います。

デフォルトで利用していると、詳細なエラーは表示してくれないので、下記の方法で用途に応じて表示するエラーの種類を変更できます。

  1. Firebugコンソール画面の「コンソール」をクリック
  2. 右横の黒い三角から、下に出てくるエラーの種類を選択

firebug_ss.GIF

JavascriptをFirebugでデバッグする
Firebug 厳密なエラーを表示

Firebug 字の大きさを変更

Javascript

Firebug 字の大きさを変更

Firebug は便利ですが、インストールした直後は字がゴミのように小さすぎて、いらっとしますよね。
まるでゴミのようだ!と罵りたくなります。
さて、そんな小さい字を大きくする方法です。

  1. Firebugを立ち上げる
  2. 左上の虫さんのアイコンをクリック
  3. 「文字サイズ」をマウスオーバー→文字を大きく をクリック

Firebug 厳密なエラーを表示

Webサイト作成 TIPS
Javascript
Ajax

Firebug Javascriptの厳密なエラー(strict error)を表示

ホームページ、Webシステム作成現場においてかかせないツール、Firebug。
使いみちはいっぱいあります。

デフォルトで使用していると、Javascriptの厳密なエラーを表示してくれないので、設定を変更する必要があります。

  1. Firebugを立ち上げます。
  2. メニューから、コンソールを選択します。
  3. 「有効」になっていない場合「有効」にし、「厳密な警告」にチェックをつけます。
    • testtest — test {2012-06-25 (月) 23:26:46}