IE開発者ツールのconsoleの罠(IE8、IE9)
今更書くような記事でもないし、何番煎じだよって思われるかもしれない
Javascriptをガリガリ使用するWEBアプリケーションを作っていて、「IE8で動かないんだけど・・・」と問い合わせが
IE8の実機がないため、IE11の開発者ツールでIE8をエミュレートして現象を確認しようとしても現象が再現しない・・・
仕方ないので、電話対応しながら現象が出た環境のブラウザのコンソールのキャプチャを送って頂いた
エラーが起きていた箇所では、「console.log」で動作確認用のログを出力している箇所で、
「consoleオブジェクトが見つからないよ」って怒られていた
そんな・・・馬鹿な・・・
嫌な予感
「IE8 console」で調べてみたら、いっぱい出てきた
IE8、9では、console(Console Debugging API)が無いため動作しない。しかし、IE11のエミュレートされたIE8では問題なく動作する
コミット前やリリース前にconsoleを探して消すのは面倒臭い。
またIE11では使えて、IE10では使えないメソッドがある。
複数人でコーディングしていると「気をつけて」では回避できないし、ライブラリの中で「console」を使用している可能性があった。
なので、メソッドが定義されていればそのまま、無ければ空のオブジェクト・関数で上書きするようにした。
以下の処理を先頭に書いておく。
(function(window) { 'use strict'; // IE8,9ではそもそもconsoleが存在しない。 // consoleオブジェクトがない場合は、空のオブジェクトで定義する。 window.console = window.console || {}; var console = window.console; // IE11の時点のconsoleオブジェクトメソッドを列挙 // https://msdn.microsoft.com/ja-jp/library/hh772169(v=vs.85).aspx // 古いIEで存在しない場合は、空のfunctionで再定義する。 console.assert = console.assert || function() {}; console.clear = console.clear || function() {}; console.count = console.count || function() {}; console.debug = console.debug || function() {}; console.dir = console.dir || function() {}; console.dirxml = console.dirxml || function() {}; console.error = console.error || function() {}; console.group = console.group || function() {}; console.groupCollapsed = console.groupCollapsed || function() {}; console.groupEnd = console.groupEnd || function() {}; console.info = console.info || function() {}; console.log = console.log || function() {}; console.msIsIndependentlyComposed = console.msIsIndependentlyComposed || function() {}; console.profile = console.profile || function() {}; console.profileEnd = console.profileEnd || function() {}; console.time = console.time || function() {}; console.timeEnd = console.timeEnd || function() {}; console.trace = console.trace || function() {}; console.warn = console.warn || function() {}; })(window);
完全には再現できないとはいえ、IE8、9で使えない関数、オブジェクトがソースコードに書かれていないか調べるつもりで開発者ツールを使ってデバックしてたのに・・・
余計なことしてくれるなー・・・