Firebugでできること: ソースコードのエラー解析

杉山貴章(オングス)
2008-11-07 08:00:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

コンソールでエラーの場所を特定する

 コンソールパネルでは閲覧中のページで発生したエラー/ワーニングの表示や、発行したXMLHttpRequestの表示、コマンドラインからのJavaScriptコードの実行、JavaScriptのプロファイリングなどを行うことができる。またコンソールAPIと呼ばれる独自のAPIを持っており、ウェブページ側からFirebugで提供される機能を利用することも可能だ。

 ここでは簡単なJavaScriptを含むHTMLファイルを表示させ、結果を見てみることにする。HTMLファイルはリスト1のようなものを用意した。これはボタンをクリックすると表示する写真が切り替わる、シンプルなスライドショーである。ただし、1ヵ所だけタイプミスを含んでいる。

リスト1 firebug-sample.html - 簡単なスライドショーの例(ただしタイプミスあり)



  
    
    

    スライドショー
    
  
  

    

スライドショー


 これをFirefoxで表示し、Firebugのコンソールを開きながらボタンをクリックすると、図1のようにエラーが表示される。これを見ればどこでエラーが発生しているのかを一目で把握することができる。ファイルへのリンクをクリックすると、スクリプトパネルが開いてソースコード上でエラーの発生箇所を確認できる。

図1 16行目のif文がおかしいと言われている 図1 16行目のif文がおかしいと言われている

 コンソールに表示する内容は[オプション]メニューより指定可能だ。JavaScriptだけでなくXMLやCSSのエラー、ファンクションのスタックトレースなども表示することができる。

図2 オプションメニューから表示内容を指定できる 図2 オプションメニューから表示内容を指定できる
  • 新着記事
  • 特集
  • ブログ