「FireFox」タグアーカイブ

HTML、CSS、JavaScriptのデバッガツール「Firebug」のインストール手順

通常ブラウザにはF12押下でブラウザ標準の開発ツールが使用可能となりますが、今回紹介する「Firebug」は高性能なJavaScriptデバッガツールです。JavaScriptだけではなくHTMLやスタイルシートの値をリアルタイムに変更して確認したり、非同期通信状況やDOMの状態などの詳細情報確認も簡単に可能となります。

Firebugの特徴

  • Firefox専用のアドオン
  • JavaScriptのデバッグ
  • 非同期通信の状況確認
  • DOMやスタイルシートの設定状況確認

Firebugのインストール手順

  1. FireFoxを起動し、メニューの「ツール」→「アドオン」を選択します。
  2. アドオンマネージャのメニュー「アドオン入手」画面で検索ボックスへ「firebug」と入力して検索します。
  3. 検索結果に「Firebug x.xx.x」と表示されますので「インストール」ボタンを押下してインストールします。
  4. インストール終了後、デバッグしたい画面を開いてブラウザの右上に追加された「虫アイコン」をクリックすれば虫アイコンに色がついてFirebugが起動します。

Firefoxを複数バージョン共存させる方法

FireFoxで複数バージョンで動作確認したい場合のインストール方法を説明します。

1. FireFoxのインストーラ(別Ver)をダウンロード

下記手順でFireFoxのインストーラをダウンロードして下さい。

  1. FireFoxのインストーラが保管されているftpへアクセスしてインストールしたいバージョンのディレクトリを選択します。今回はVer24のESR版を選択します。
    FireFoxバージョン別保管先
  2. Windows版の「win32」を選択します。
  3. 日本語版の「ja」を選択します。
  4. インストーラ用のexeファイルを選択するとダウンロードされます。

2. FireFox(別Ver)をインストール

ダウンロードしたインストーラ(別Ver)を起動してインストールを実行します。インストールは必ず下記手順で行い、インストール直後にFireFoxは起動しないように注意して下さい。

  1. 「次へ」を選択します。
  2. 「カスタムインストール」を選択します。
  3. 「インストール先フォルダ」を変更後、「次へ」を選択します。
    ※インストール先フォルダは既存のFireFoxがインストールされているフォルダとは別のフォルダを指定して下さい。
  4. 「デスクトップ」以外のチェックは全て外して、「次へ」を選択します。
  5. 「FireFoxを既定のブラウザとして使用する」のチェックを外して「インストール」を選択します。
  6. インストール完了後、「今すぐFireFoxを起動」のチェックを外し「完了」を選択します。

3. FireFoxのプロファイルを追加

イントール直後の状態でFireFoxを起動してしまうと、既にインストールされているFireFoxのプロファイルを使用してしまうので、追加インストールしたFireFox用のプロファイルを作成します。

  1. Windowsのスタートメニューから「ファイル名を指定して実行」を選択します。
  2. 名前へ「firefox -p」と入力して「OK」を選択します。 ※反応しない場合は「firefox -createprofile firefoxX.X」と入力すればプロファイルが作成されます
  3. 「新しいプロファイルを作成」を選択します。
  4. 「次へ」を選択します。
  5. 新しいプロファイル名を入力し、「完了」を選択します。
  6. 「終了」を選択します。
  7. FireFoxのプロファイルフォルダを参照して今回追加したプロファイルフォルダが作成されている事を確認します。

4. FireFoxのショートカットファイルの作成

  1. 追加インストールしたFireFoxのフォルダ「【例】C:\Program Files (x86)\Mozilla Firefox_24」を開いて「firefox.exe」ショートカットファイルを作成します。
  2. 作成したショートカットファイルを右クリックしてプロパティを選択します。
  3. リンク先の末尾に「-p {上記3.5で作成したプロファイル名} -no-remote」を追記します。

    【例】
    「”C:\Program Files (x86)\Mozilla Firefox_24\firefox.exe”」
     ↓
    「”C:\Program Files (x86)\Mozilla Firefox_24\firefox.exe” -p firefox24 -no-remote」

後は作成したショートカットをダブルクリックしてFireFoxを起動すれば、既存インストール済のFireFoxとは別のプロファイルを使用したFireFoxが起動されます。は上記手順を繰り返せば別バージョンのFireFoxを更に増やすことも可能となります。

ネットワーク上の共有 PC へのリンクを開く場合の設定方法

HTMLのリンクからネットワーク上の共有PC(CIFS)へアクセスしたいという要望があった場合の対処方法を記載します。

HTMLリンクはfile URI形式で設定

UNCパスでは「\\common\dir\test.xls」というエクスプローラでよく見かける記述となりますが、file URIのパスでは「file://///common/dir/test.xls」という記述形式となります。このfile URI形式でHTMLではリンクを設定します。

file URIパスへのリンクが有効になるようにブラウザ毎に設定

メジャーなブラウザ(IE以外)の多くはセキュリティ的観点から、file URIのリンクをクリックしてもリンク先を表示出来ない設定となっています。これを解除するためにはブラウザ毎に対応する必要があります。

Internet Explore

 IEの場合、セキュリティ対策が甘いのか何も設定する必要はありません。

Firefox

  1. 「user.js」ファイルを作成
  2. FireFoxの場合は設定が少し面倒で、プロファイルへ許可するアドレスを追加する必要があります。その設定ファイルをJavaScriptで以下の様に記述します。

    ※”http://common.dir.co.jp”の箇所 をリンクを許可したいサーバのアドレスへ変更して下さい。複数ある場合はスペースで区切って記述します。

  3. FireFoxのプロファイルフォルダへ「user.js」ファイルを配置
  4. 配置先「%AppData%\Mozilla\Firefox\Profiles\(英数字のランダム文字列).default」
    ※既に「user.js」ファイルが存在している場合は記述を追加して下さい。

  5. FireFoxを再起動
  6. FireFoxを再起動すると「user.js」ファイルへ記述した内容が「prefs.js」(Windowsで言うレジストリのようなもの)へ追加されます。