これでできる! クロスブラウザJavaScript入門

第2回 完全版:ブラウザとデバッグ環境

この記事を読むのに必要な時間:およそ 7 分

Firefoxのデバッグ環境

Firefoxの旧バージョンは,Firefox 旧バージョンのダウンロードから入手可能です。ただし,こちらは現在Mozillaがサポートしているバージョン限定で,Firefox 2は入手できませんし,Firefox 3.0.xのサポートも3月末で終了するため入手できなくなります。もしどうしてもより古いバージョンが必要な場合はMozilla の FTP サーバからダウンロードすることができます。

Firefoxは特殊なことをせずとも,インストール時にカスタムインストールを選び,インストールするフォルダを分ければ各バージョンをインストールすることができます。ただし,そのままでは異なるバージョンを同時に起動することができません。同時に複数のバージョンを使いたい場合は,起動オプションで -no-remote -p をつけて起動する必要があります。-pはプロファイルを指定するオプションで,プロファイル名を省略した場合,図2のようなプロファイルの選択画面が現れます。

図2 Firefoxのプロファイル

図2 Firefoxのプロファイル

プロファイルの新規作成で,そのバージョン用のプロファイルを作成し,そのプロファイルを選択して起動します。次回以降は先程の -p の後にプロファイル名を指定すれば図2の画面を省略して起動することができます。あらかじめショートカットを作成しておくとよいでしょう。

ショートカットのリンク先の例

"…\app\firefox.exe" -no-remote -p "firefox2.0.0.20"

なお,-no-remoteオプションではFirefox3.6を2つ起動するといった,ひとつのバージョンを複数のプロファイルにわけて起動することも可能です。ただし,すべてのFirefoxがno-remoteで立ち上がっていると関連付けからFirefoxを開く際にもう一つFirefoxが起動してしまうので,メインとするプロファイルを決めてno-remoteなしで起動しておくとよいでしょう。

Firebug

FirefoxでのJavaScriptのデバッグといえば,もちろんFirebugです。FirebugはHTML/CSSの解析・リアルタイム編集,コンソールでのJavaScriptの実行やステップ実行,変数やオブジェクトの中身の解析,ネットワークのログ取得にヘッダの解析,JavaScriptの実行をプロファイリング,といったことが可能な非常に高機能なデバッグ専用拡張です。さらに,Firecookie(Firebug上でCookieを監視・編集できるようにする拡張)や,YSlow(Yahoo!製のウェブサイトのパフォーマンス改善点を診断する拡張)のようなFirebugを拡張する拡張によって多彩な機能を追加することも可能です。ほかのブラウザのデバッグ環境も充実しつつある昨今ですが,このFirebugが統合的なデバッグ環境の草分けであり,デファクトスタンダードといえるツールです。

図3 Firebugのコンソール

図3 Firebugのコンソール

図3のように,複数行のJavaScriptをその場で実行する(Ctrl+Enter)こともできるので,Firebug上でJavaScriptのスニペットを書き,ある程度形になったらエディタでまとめるという方法は筆者お薦めの開発スタイルです。

ただし,Firebug自体にバグがあることも少なくなく,またFirefoxのアップデートで動かなくなるといったことも多いので,最新のバージョンをgetfirebug.comのDownloadsでチェックしておくとよいかもしれません。こちらでは関連拡張も紹介されています。

また,少し古い記事ですがFirefox 3とFirebugで始めるJavaScript開発という特集記事もあります。基本的な使い方は変わっていないので参考になるかと思います。

Safariのデバッグ環境

Safariの旧バージョンはApple - Support - Downloadsから入手できます(パスにen_USが含まれていますが,中身は日本語にも対応しているようで,ja_JPにしてダウンロードしても同じファイルのようです⁠⁠。しかし,残念ながらSafariは複数のバージョンをインストールする方法が(公式には)用意されていません。非公式でMulti-Safariを使用すれば一つのMacに複数のバージョンのSafariを動かすことができます。なお,OS XのバージョンによってSafariのバージョンも変化しますが,基本的には OS X 10.5 でSafari 3以降を検証環境とすればよいでしょう。もしSafari 2をサポートする場合は,OS X 10.4環境を用意する必要があります。

Web Inspector

Safariには,Firebugにも劣らないほど高機能なデバッガであるWeb Inspectorが標準で搭載されています。FirebugでできることのほとんどをWeb Inspectorもサポートしています。プロファイルの精度が高く,Web Storageなどにも対応していたりとFirebugよりも高機能なところも多々あります。詳しい使い方はWeb Inspector Update.ja - WebKitや,Web Inspector Redesign.ja - WebKitを参照してください。

Windows版Safari

Windows版のSafariは,特にサポートする必要はありませんが,動作確認用としてはそれなりに重宝します。ただ,最近は同じWebKitエンジンを搭載したChromeがあるので,Windows版Safariの出番はほとんどないかもしれません。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/