web-dev-qa-db-ja.com

なぜ開発者向けツールを開いてからJavaScriptが機能するのか IE 一度？

IE9のバグ - JavaScriptは開発者ツールを一度開いた後にのみ機能します。

このサイトでは無料のpdfダウンロードをユーザーに提供しています、そしてそれは簡単な "ダウンロードするためにパスワードを入力してください"機能を持っています。ただし、Internet Explorerではまったく機能しません。

この example で自分の目で確かめることができます。

ダウンロードパスは "makeuseof"です。他のどのブラウザでも、それはうまく働きます。 IEでは、両方のボタンは何もしません。

私が見つけた最も興味深いことは、F12で開発者用ツールバーを開いたり閉じたりすると、突然動いてしまうことです。

互換モードなどを試してみましたが、何も違いはありません。

Internet Explorerでこれを機能させる方法

javascriptinternet-explorerinternet-explorer-9
621
James Bruce

あなたのJavaScriptにデバッグコードがあるかもしれません。

あなたが説明している経験は、console.log()または他のconsole機能のいずれかを含むコードの典型です。

consoleオブジェクトは開発ツールバーが開かれたときにのみアクティブになります。それ以前は、コンソールオブジェクトを呼び出すと、undefinedとしてレポートされます。ツールバーが開かれた後、コンソールが存在するので（後でツールバーを閉じても）、コンソール呼び出しは機能します。

これにはいくつかの解決策があります。

最も明白なものはあなたのコードを通してconsoleへの参照を削除することです。とにかく、プロダクションコードにそのようなものを残してはいけません。

コンソール参照を保持したい場合は、それらをif()ステートメント、またはそれを呼び出す前にコンソールオブジェクトが存在するかどうかをチェックするその他の条件式でラップすることができます。

795
Spudley

HTML5 Boilerplate には、コンソールの問題を解決するためのNiceの既製コードがあります。

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

コメントで@プラス - が指摘したように、最新版は GitHubページで利用可能です

159
Tallmaris

console.logの問題以外に考えられる別の理由は次のとおりです（少なくともIE11では）。

コンソールが開いていないとき、IEはかなり積極的なキャッシュを行うので、$.ajaxの呼び出しまたはXMLHttpRequestの呼び出しには必ずキャッシュをfalseに設定してください。

例えば：

$.ajax({cache: false, ...})

開発者コンソールが開いているとき、キャッシュはそれほど積極的ではありません。バグのようです（あるいは機能かもしれません）。

150
user3916095

マイナーチェンジして問題は解決しました。私はIE9の問題を修正するために私のhtmlページに以下を追加しました：

<script type="text/javascript">
    // IE9 fix
    if(!window.console) {
        var console = {
            log : function(){},
            warn : function(){},
            error : function(){},
            time : function(){},
            timeEnd : function(){}
        }
    }
</script>
62
runeks

一般に認められた回答などで言及されている 'console'の使用法の問題に加えて、Internet Explorerのページがアクティブになっている開発者ツールでしか動作しない理由が少なくとももう1つあります。

開発者ツールが有効な場合、IEは通常のモードのように実際にはHTTPキャッシュを使用しません（少なくともデフォルトではIE 11）。

あなたのサイトやページがキャッシングの問題を抱えているなら（それが例えばそれがあるべきより多くをキャッシュしているなら - それは私の場合でした）、あなたはF12モードでその問題を見ないでしょう。そのため、javascriptがキャッシュされたAJAX要求を処理する場合、それらは通常モードでは期待どおりに機能せず、F12モードでは正常に機能する可能性があります。

28
Simon Mourier

Javascriptのタグの前にこれを追加してください。

try{
  console
}catch(e){
   console={}; console.log = function(){};
}
17
todotresde

AngularJSバージョン1.Xを使用している場合は、console.logを直接使用する代わりに$ logサービスを使用できます。

ロギング用のシンプルなサービス。デフォルトの実装では、メッセージをブラウザのコンソール（存在する場合）に安全に書き込みます。

https://docs.angularjs.org/api/ng/service/$log

あなたがに似たものを持っているのであれば

angular.module('logExample', [])
  .controller('LogController', ['$scope', function($scope) {
    console.log('Hello World!');
 }]);

あなたはそれを置き換えることができます

angular.module('logExample', [])
  .controller('LogController', ['$scope', '$log', function($scope, $log) {
    $log.log('Hello World!');
 }]);

Angular 2+ には組み込みのログサービスがありません 。

8
Oskar S.

angularを使用している場合、すなわち9, 10またはEdgeを使用してください。

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

cacheを完全に無効にします。

5
Itsik Mauyhas

それは私のためのIE 11で起こりました。そして私はjqueryの.load関数を呼び出していました。だから私はそれを昔ながらのやり方でやり、キャッシュを無効にするために何かをURLに入れました。

$("#divToReplaceHtml").load('@Url.Action("Action", "Controller")/' + @Model.ID + "?nocache=" + new Date().getTime());
4
Vilhelm

私は runeks と todotresde によって提供される解決策のためのさらに別の選択肢を得ました Spudley の答えで議論された落とし穴も避けます：

        try {
            console.log(message);
        } catch (e) {
        }

それは少し巧妙ですが、その一方でそれは簡潔で runeks '答えでカバーされるすべてのロギング方法をカバーします、そしてそれはあなたがいつでもIEのコンソールウィンドウを開くことができるという大きな利点がありますそして丸太が流れてくる。

2
schnatterer

Windows 7およびWindows 10のIE 11でこの問題に遭遇しました。IEのデバッグ機能をオンにすることで、問題が正確に何であるかを発見しました（IE>インターネットオプション>詳細タブ>ブラウズ>チェックを外します スクリプトのデバッグを無効にします（Internet Explorer） ）。この機能は通常、ドメイン管理者によって当社の環境内でチェックされます。

問題は、JavaScriptコード内でconsole.debug(...)メソッドを使用していたためです。開発者（私）がした仮定は、クライアントの開発者ツールのコンソールが明示的に開かれていない場合は何も書きたくないということでした。 ChromeとFirefoxはこの戦略に賛成しているようでしたが、IE 11はそれを好まなかったです。すべてのconsole.debug(...)ステートメントをconsole.log(...)ステートメントに変更することで、クライアントコンソールに追加情報を記録して開いたときにそれを表示し続けることができましたが、それ以外の場合は一般ユーザーには表示されません。

0
gregsonian

私は自分の問題を解決して修正します。ページにキャッシュの問題があるため、JavaScript内に配置したAJAX要求が処理されなかったようです。あなたのサイトやページがキャッシュの問題を抱えているなら、開発者/ F12モードではその問題を目にすることはないでしょう。私のキャッシュされたJavaScript AJAXは期待通りに動かないかもしれず、実行を中断させるF12がまったく問題ない原因となるかもしれません。そのため、キャッシュをfalseにするための新しいパラメータを追加しただけです。

$.ajax({
  cache: false,
});

IEおよびjavascriptアクティビティが正常に実行されるように、AJAXでは特にこれをfalseにする必要があります。

0
pauldx