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

杉山貴章（オングス）
2008-11-07 08:00:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】
アドビ、Photoshopの機能追加を含めCreative Cloudをアップデート
システム担当者がより楽しめる「007 スカイフォール」の見方--MI6が遭遇する手痛いピンチは、こうすれば防げた？
Javaエバンジェリストが語る「JavaOne 2012 San Francisco」の見どころ ～築き上げられる『未来のJavaの姿』～

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

　コンソールパネルでは閲覧中のページで発生したエラー／ワーニングの表示や、発行した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 オプションメニューから表示内容を指定できる
  • 新着記事
  • 特集
  • ブログ