IEで開発者ツールが使えない場合の対処法

※この記事はWindows7+Internet Explorer10で検証しています。

IEには「開発者ツール」と言うデバッグツールが実装されているのですが、下記画像のように「開発者ツール」がグレーアウトされ、使用できない状態になっている場合があります。

開発者ツールがグレーアウトされているこれは「開発者ツール」が使用できない設定になっているためです。その設定を変更することで「開発者ツール」を使用できるようになります。IEを終了してから下記設定を行います。

1. スタートボタンをクリックし「プログラムとファイルの検索」に「gpedit.msc」と入力

gpedit.mscを機動

2. ローカルグループポリシーエディタを開きます。

ローカルグループポリシーエディタ

3.「管理者テンプレート」→「Windowsコンポーネント」→「Internet Explorer」→「ツールバー」を開く

ローカルグループポリシーエディタ

4.「開発者ツールを無効にする」をダブルクリックして設定ウィンドウを開く
チェックを「無効」から「未構成」または「無効」に変更

開発者ツールを無効にする これでIEを起動するとグレーアウトされていた「開発者ツール」がクリックできるようになります。もちろんF12キーでも開発者ツールにアクセスすることがデキるようになります。開発者ツールが使えるようになった状態

Internet Explorerでイントラサイトを見た時に互換表示になってしまう理由

前エントリーのとおり(IEに互換表示をさせないX-UA-Compatibleの指定)でIEに互換表示をさせないようにしていたのですが、開発中のサイトがどうしても互換表示されてしまい困っていました。
「なぜ?」と調べていたら、開発環境が内部ネットワークだったために互換表示になっていたようです。
Internet Explorerにはイントラネット サイトを常に互換表示で表示するという、まったくありがたくない設定がありまして、これが有効になっていたようです。

この設定を解除するにはメニューバーから「ツール」→「互換表示設定」を選びます。

Internet Explorerツールバー

 

開いた「互換表示設定」ウィンドウの内にある「イントラネット サイトを互換表示で表示する」のチェックを外します。

Internet Explorer「互換表示設定」

これでイントラサイトでの強制互換表示を回避することができます。
※本設定はIE10で検証しています。

企業内のWebツールでは未だにIE6推奨なんてのがあったりするので、この設定があるのだと思いますが、そんな優しさはこの際いらないんじゃないかと…。

ちなみにMicrosoftは互換表示を非推奨にしているようです。
ドキュメント モードの非推奨

IEに互換表示をさせないX-UA-Compatibleの指定

IEはバージョンごとに表示方法(レンダリング)がガッツリ変わると言う、とてもやっかいなブラウザです。
また、各バージョンごとに下位バージョンの表示方法を再現できたり、互換表示なる表示方法があったりと、ありがた迷惑この上ない機能が搭載されています。

このサイトのトップページをIE10で表示すると・・・

IEの互換表示アイコン

アドレスバーに紙が破けたようなアイコンが表示されます。そしてこのアイコンをクリックすると互換表示に切り替わり、再レンダリングがはじまります。
box-shadow、background-sizeなどのCSSが効かなくなってしまいました。

また同じアイコンをクリックすれば互換表示が通常表示に戻ります。もし通常表示に戻さなかったか場合、IEは設定を覚えてしまい、再度同じURLにアクセスすると、また互換表示になってしまいます。IEを終了して再起動しても戻りません。

新バージョンのIEを使用しているユーザーに対してわざわざ互換表示をさせたい、と言うこともないと思うので、この紙が破けたようなアイコンが表示されないのが一番です。

アイコンを出さないようにするには以下のコードheader内にを記述します。

 

上記コードはcssやjsなどの外部のファイルへのリンクが記述されている箇所より前に記述します。
外部のファイルの読み込みがあるとそこで表示モードが決定してしまうからだそうです。
contentのIE=edgeは使用しているIEの最新バージョンの標準モードを表しています。IE10の場合はIE10のレンダリングモードで、IE9を使用している場合はIE9のレンダリングモードで表示されます。
chrome=1はIEのプラグイン、Google Chrome Frameがインストールされている場合、Google Chrome Frameを使用して表示する、と言う意味になります。

contentには他にも以下のような設定があります。

IE=8

IE8のレンダリングモードで表示。

IE=7

IE7のレンダリングモードで表示

IE=7;IE=9などの複数指定

複数指定した場合は使用可能な最上位のバージョンが使用される。

上記の場合、IE8でアクセスした場合はIE7が、IE9、IE10でアクセスした場合はIE9のレンダリングモードで表示される。

IE=EmulateIE8

IE8として動作し、状況によってIE8標準、またはQuirksモードで表示

IE=EmulateIE7

IE7として動作し、状況によってIE7標準、またはQuirksモードで表示

※EmulateIE8、EmulateIE7は以下の条件に当てはまるとQuirksモードで表示されます。

  • DOCTYPE宣言がされていない
  • HTML3.0以前の構文で書かれている
  • HTML4.0 Transitional 、もしくはFramesetでDOCTYPE宣言内にURLを含んでいない

 

IEのバージョンを固定して表示したい場合は少ないと思うので、基本的にcontentにはIE=edge,chrome=1を指定すればよいと思います。

[tmkm-amazon asin=’B0161YPC42′][/tmkm-amazon]