IE에서 개발자 도구를 한 번 연 후에 만 ​​JavaScript가 작동하는 이유는 무엇입니까?

IE9 버그-JavaScript는 개발자 도구를 한 번 연 후에 만 ​​작동합니다.

우리 사이트는 사용자에게 무료로 PDF를 다운로드 할 수 있으며 간단한 "암호를 입력 할 수 있습니다"기능이 있습니다. 그러나 Internet Explorer에서는 전혀 작동하지 않습니다.

이 예제 에서 직접 볼 수 있습니다 .

다운로드 패스는 "makeuseof"입니다. 다른 브라우저에서는 잘 작동합니다. IE에서는 두 버튼이 모두 작동하지 않습니다.

내가 찾은 가장 흥미로운 것은 F12로 개발자 툴바를 열고 닫으면 갑자기 작동하기 시작한다는 것입니다.

호환성 모드를 시도했지만 아무런 차이가 없습니다.

Internet Explorer에서이 작업을 어떻게 수행합니까?

자바 스크립트에 디버깅 코드가있는 것 같습니다.

설명하는 경험 console.log()은 다른 console기능 을 포함하는 일반적인 코드입니다 .

console데브 도구 모음을 열 때 개체는 활성화됩니다. 그 전에 콘솔 개체를 호출하면이 개체가로보고됩니다 undefined. 툴바를 연 후에는 툴바가 닫히더라도 콘솔이 존재하므로 콘솔 호출이 작동합니다.

이에 대한 몇 가지 해결책이 있습니다.

가장 확실한 방법은 코드를 통해 참조를 제거하는 것 console입니다. 어쨌든 프로덕션 코드에 그런 것을 두지 않아야합니다.

콘솔 참조를 유지하려면, if()명령문을 랩핑 하거나 콘솔 오브젝트를 호출하기 전에 콘솔 오브젝트가 존재하는지 확인하는 다른 조건부로 랩핑 할 수 있습니다.

HTML5 보일러 플레이트 에는 콘솔 문제 해결을 위해 미리 만들어진 멋진 코드가 있습니다.

// 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;
        }
    }
}());

댓글에서 @ plus- 지적했듯이 최신 버전은 GitHub 페이지 에서 사용할 수 있습니다

이 console.log문제 외에 다른 가능한 이유는 다음과 같습니다 (적어도 IE11에서는).

콘솔이 열려 있지 않으면 IE는 매우 적극적인 캐싱을 수행하므로 모든 $.ajax호출 또는 XMLHttpRequest캐싱이 false로 설정되어 있는지 확인하십시오 .

예를 들면 다음과 같습니다.

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

개발자 콘솔이 열려 있으면 캐싱이 덜 공격적입니다. 버그 또는 기능 일 것 같습니다.

이렇게하면 약간의 변경을 한 후에 문제가 해결되었습니다. IE9 문제를 해결하기 위해 html 페이지에 다음을 추가했습니다.

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

console허용 된 답변 및 기타에 언급 된 ' '사용 문제 외에도 Internet Explorer의 페이지가 종종 개발자 도구가 활성화 된 상태에서만 작동하는 또 다른 이유가 있습니다.

개발자 도구가 활성화되어 있으면 IE는 일반 모드 에서처럼 HTTP 캐시를 사용하지 않습니다 (적어도 IE 11에서는 기본적으로).

그것은 귀하의 사이트 또는 페이지에 캐싱 문제가있는 경우 (예를 들어 캐시보다 많은 경우 캐시하는 경우) F12 모드에서 해당 문제를 볼 수 없음을 의미합니다. 따라서 자바 스크립트가 캐시 된 AJAX 요청을 수행하는 경우 정상 모드에서는 예상대로 작동하지 않을 수 있으며 F12 모드에서는 정상적으로 작동 할 수 있습니다.

자바 스크립트 태그 앞에 이것을 추가하면 도움이 될 것 같습니다.

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

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+ 에는 기본 제공 로그 서비스가 없습니다 .

당신이 사용하는 경우 angular와 IE 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.

IE 11에서 나에게 일어난 일입니다. 그리고 jquery .load 함수를 호출했습니다. 그래서 나는 구식으로하고 캐시에 비활성화하기 위해 URL에 무언가를 넣었습니다.

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

Spudley 의 답변 에 대한 의견에서 논의 된 함정을 피하는 룬 및 todotresde 가 제공하는 솔루션에 대한 또 다른 대안 이 있습니다 .

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

그것은 약간 멍청하지만 반면에 간결하고 runeks 의 답변 에 포함 된 모든 로깅 방법을 다루며 언제든지 IE의 콘솔 창을 열 수 있고 로그가 유입된다는 큰 이점이 있습니다.

Windows 7 및 Windows 10의 IE 11에서이 문제가 발생했습니다. IE의 디버깅 기능을 켜서 (IE> 인터넷 옵션> 고급 탭> 찾아보기> 스크립트 디버깅 비활성화 선택 해제 (Internet Explorer) 문제를 정확히 발견했습니다. . 이 기능은 일반적으로 도메인 관리자가 환경 내에서 확인합니다.

console.debug(...)JavaScript 코드 내 에서 메소드 를 사용했기 때문에 문제가 발생했습니다 . 클라이언트 개발자 도구 콘솔이 명시 적으로 열리지 않은 경우 개발자 (me)가 작성한 가정은 아무것도 작성하지 않기를 원했습니다. Chrome과 Firefox는이 전략에 동의하는 것처럼 보였지만 IE 11은이 전략을 1 비트 좋아하지 않았습니다. 모든 console.debug(...)명령문을 console.log(...)명령문으로 변경 하여 클라이언트 콘솔에 추가 정보를 계속 기록하고 열려있을 때 볼 수 있지만 일반 사용자에게는 숨겨 둘 수있었습니다.

문제를 해결하고 해결했습니다. 내 페이지에 캐시 문제가있어서 JavaScript에 넣은 AJAX 요청이 처리되지 않은 것 같습니다. 사이트 나 페이지에 캐싱 문제가 있으면 개발자 / F12 모드에서 해당 문제를 볼 수 없습니다. 캐시 된 JavaScript AJAX 요청에 따라 예상대로 작동하지 않아 F12에 아무런 문제가없는 실행이 중단 될 수 있습니다. 따라서 캐시를 거짓으로 만들기 위해 새 매개 변수를 추가했습니다.

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

IE가 AJAX 및 javascript 활동이 잘 실행되도록 구체적으로 false가 필요한 것처럼 보입니다.