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

杉山貴章（オングス）
2008-11-07 08:00:00
  • このエントリーをはてなブックマークに追加

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

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

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

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



  
    
    

    スライドショー
    
  
  

    

      
スライドショー

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

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

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

図2 オプションメニューから表示内容を指定できる 図2 オプションメニューから表示内容を指定できる
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]