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

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

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

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

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

  
    
    

    
    
  
  

    

      
スライドショー
      

      
      
    

  
 

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

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

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

図2 オプションメニューから表示内容を指定できる