こんにちは、さち です。
私は、趣味でウェブサイト制作をするのですが
その時に便利なのがウェブブラウサの「開発ツール」です。
Firefox で開発ツールを使うには
アドオン「Firebug」を使う方法と
Firefox の標準機能を使う方法があります。
ただ、この2つは「console.log」の表示の仕様が異なり
困ってしまいました…。
Firefox で使える2つの「コンソール」
Firefox には「Firebug」というアドオンがあります。
Web制作に非常に役立つアドオンで
過去にはこのためだけに Firefox を使っていた人もいるほど。
アドオンを導入している場合は「F12」キーで呼び出せます。
しかし、最近の Firefox には標準で「開発ツール」が搭載されています。
機能的にも Firebug と遜色なくこちらをメインに使う人も増えているようです。
「Ctrl + Shift + I」キーで呼び出せます。
この記事では、分かりやすいように
Firebug のコンソールを「Firebug コンソール」
Firefox 開発ツール のコンソールを「Firefox Web コンソール」
と呼ぶことにします。
この2つのコンソール
どちらを使うかは好みの問題だと思っていたのですが
どうも仕様が異なるようです。
Firebug と Firefox で「console.log」の結果が違う
サンプル用に JavaScript を書きました。
初期値を設定して「console.log」で出力。
値を書き換えて、もう一度「console.log」で出力します。
//初期値作成
var string = 'xxx';
var number = 111;
var object = {a: 'aaa', b: 999};
//中身チェック1
console.log('--- check 1 ---');
console.log('string: ' + string);
console.log('number: ' + number);
console.log(object);
//変更
string = 'yyy';
number += 111 ;
object.a = 'bbb';
object.b -= 111 ;
//中身チェック2
console.log('--- check 2 ---');
console.log('string: ' + string);
console.log('number: ' + number);
console.log(object);
このコードを 、2つのコンソールで実行すると次のようになります。
青色部分（JavaScript 10行目）の結果が異なります。
「Firebug コンソール」は
console.log が実行された瞬間の「object」の内容を表示しています。
「Firefox Web コンソール」は
全コードを実行した後の最終的な「object」の内容を表示しています。
ただ、この現象が起こるのはオブジェクトの時で
普通の引数では起こりません（JavaScript 8, 9行）。
「console.dir」でも同様の現象が起こります。
どうしてこうなった。
私は Firebug の仕様が好みなので
Firefox の方も変更できなかと思い調べてみたのですが
そのような情報にたどり着くことができませんでした。
解決方法があるから誰も触れないのかしら？
もしかして、この現象が起きているのは自分だけなのかしら？
よく分かりません…。
「Firefox 開発ツール」をメインに使っているので
正直、「Firefox Web コンソール」だけで済ませたいのですが
この console の仕様が原因でかなわない状態です。
解決方法をご存知の方は教えていただけたら嬉しいです。
よろしくお願いします。
【関連記事】
コメント