読者です 読者をやめる 読者になる 読者になる

もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

IE開発者ツールのconsoleの罠(IE8、IE9)

Javascript

今更書くような記事でもないし、何番煎じだよって思われるかもしれない

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で使えない関数、オブジェクトがソースコードに書かれていないか調べるつもりで開発者ツールを使ってデバックしてたのに・・・

余計なことしてくれるなー・・・