ChatGPT解决这个技术问题 Extra ChatGPT

为什么 JavaScript 只有在 IE 中打开开发者工具一次后才能工作?

IE9 错误 - JavaScript 仅在打开开发人员工具一次后才能工作。

我们的网站为用户提供免费的 pdf 下载,并且它有一个简单的“输入密码下载”功能。但是,它在 Internet Explorer 中根本不起作用。

您可以在此 example 中亲自查看。

下载通行证是“makeuseof”。在任何其他浏览器中,它都可以正常工作。在 IE 中,两个按钮都不执行任何操作。

我发现的最奇怪的事情是,如果您使用 F12 打开和关闭开发人员工具栏,它会突然开始工作。

我们已经尝试过兼容模式等,没有什么不同。

如何在 Internet Explorer 中进行这项工作?

使用跨浏览器包装:github.com/MichaelZelensky/log.js
如果您有构建步骤,一个不错的替代方法是使用 gulp-strip-debug 之类的东西。它删除了所有 console.* 方法,非常适合生产构建或在 IE 中进行测试。
对于未来的谷歌人:我有同样的症状,但在 IE11 中。好吧,原来答案与 console 无关,而是与我使用 angular 和缓存获取请求有关。有关更多信息,请参阅答案 herehere
@ChristofferLette 是的,我有同样的问题,请检查 stackoverflow.com/questions/31428126/… 代码在开发人员工具打开时是否正常工作..
像这样的问题最烦人的事情是什么?它们几乎不可能调试,因为它会在您打开开发人员控制台后立即开始工作。

S
Spudley

听起来您的 javascript 中可能有一些调试代码。

您所描述的体验是包含 console.log() 或任何其他 console 功能的典型代码。

console 对象仅在开发工具栏打开时激活。在此之前,调用控制台对象将导致它被报告为 undefined。打开工具栏后,控制台将存在(即使工具栏随后关闭),因此您的控制台调用将起作用。

有几个解决方案:

最明显的方法是检查您的代码,删除对 console 的引用。无论如何,你不应该在生产代码中留下这样的东西。

如果要保留控制台引用,可以将它们包装在 if() 语句中,或者在尝试调用之前检查控制台对象是否存在的其他条件。


是否有任何解决方法可以保留调试代码? IE 是唯一具有这种愚蠢行为的浏览器...
if(!console) {console={}; console.log = function(){};}
@Meekohi if(!console) 会导致同样的错误 - 它应该是 if(!window.console)
所以... IE 不应该实现每个新的 js 开发人员一直使用的功能,以避免惹恼一些使用脚本来修复本来应该工作的东西的开发人员...但这是不公平的为此敲击IE?你是一个非常慷慨的人斯普德利!!! :)
IE11 仍然会发生
C
Christoffer Lette

HTML5 Boilerplate 有一个很好的预制代码,用于修复控制台问题:

// 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 page 上提供了最新版本


@plus 评论中的链接不再有效。代码已下推到 src 子目录:github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
它已从 HTML5 Boilerplate repo 中删除。上一个版本是 this one
u
user3916095

这是除了 console.log 问题之外的另一个可能原因(至少在 IE11 中):

当控制台未打开时,IE 会进行非常积极的缓存,因此请确保任何 $.ajax 调用或 XMLHttpRequest 调用都将缓存设置为 false。

例如:

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

当开发者控制台打开时,缓存就不那么激进了。似乎是一个错误(或者可能是一个功能?)


这只是救了我;)谢谢!我会说这是一个错误,因为您应该在打开和关闭控制台的情况下测试和调试您的网站的条件相同。
为我工作。具体来说:stackoverflow.com/questions/13391563/…
这应该更高,因为我认为这是实际答案......在某些 IE 版本中,关于 console.log 的公认答案会引发错误,而不是导致此处描述的行为。
K
Kiquenet

在我对其进行了细微更改后,这解决了我的问题。我在我的 html 页面中添加了以下内容以解决 IE9 问题:

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

此解决方案不适用于 Windows 7 64 位上的 IE 11。
这解决了我在 Windows 7 64 位上的 IE 11 上的问题。
S
Simon Mourier

除了在接受的答案和其他人中提到的“console”使用问题之外,至少还有另一个原因是 Internet Explorer 中的页面有时只能在激活开发人员工具的情况下工作。

启用开发人员工具后,IE 并不会像在正常模式下那样真正使用其 HTTP 缓存(至少在 IE 11 中是默认的)。

这意味着如果您的网站或页面存在缓存问题(例如,如果缓存超出应有的缓存 - 这是我的情况),您将不会在 F12 模式下看到该问题。因此,如果 javascript 执行一些缓存的 AJAX 请求,它们在正常模式下可能无法正常工作,而在 F12 模式下工作正常。


有关如何禁用缓存 xmlHttpReq 请求的信息,请参阅 stackoverflow.com/questions/3984961/…
甜的。这出人意料地奏效了。我猜 Angular 的 $http 服务并没有像我想象的那样缓存 bust。
K
Kiquenet

我想这可能会有所帮助,在任何 javascript 标记之前添加它:

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

try catch 检测变量是否存在是个坏主意。它不仅速度慢,而且如果你的 try 块中有多个语句,你可能会因为不同的原因得到一个异常。不要使用这个,至少使用 if (typeof console == 'undefined')
O
Oskar S.

如果您使用的是 AngularJS 版本 1.X,您可以使用 $log 服务而不是直接使用 console.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!');
 }]);

角 2+ does not have any built-in log service


这对我有帮助,谢谢-对于其他使用打字稿的人,这是角度定义中的“ILogService”
IIRC 使用 $log 会导致日志语句的位置被遮挡,这与使用 console.log 时不同。根据我在开发过程中的经验,这不是很好。
I
Itsik Mauyhas

如果您使用 angular,即 9, 10edge,请使用:

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


V
Vilhelm

它发生在我的 IE 11 中。我正在调用 jquery .load 函数。所以我用老式的方式做了,并在 url 中放了一些东西来禁用缓存。

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

C
Community

对于 runekstodotresde 提供的解决方案,我还有另一种选择,它也避免了 Spudley 答案的评论中讨论的陷阱:

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

它有点邋遢,但另一方面它很简洁,涵盖了runeks'答案中涵盖的所有日志记录方法,并且它具有您可以随时打开 IE 控制台窗口并且日志流入的巨大优势。


g
gregsonian

我们在 Windows 7 和 Windows 10 上的 IE 11 上遇到了这个问题。我们通过打开 IE 的调试功能(IE > Internet 选项 > 高级选项卡 > 浏览 > 取消选中禁用脚本调试 (Internet Explorer))发现了问题所在。此功能通常由域管理员在我们的环境中进行检查。

问题在于我们在 JavaScript 代码中使用了 console.debug(...) 方法。开发人员(我)的假设是,如果客户端开发人员工具控制台未明确打开,我不希望编写任何内容。虽然 Chrome 和 Firefox 似乎同意这种策略,但 IE 11 却一点也不喜欢它。通过将所有 console.debug(...) 语句更改为 console.log(...) 语句,我们能够继续在客户端控制台中记录其他信息并在它打开时查看它,但对普通用户隐藏它。


p
pizzaisdavid

我提出了解决方案并解决了我的问题。看起来我放入我的 JavaScript 中的 AJAX 请求没有得到处理,因为我的页面有一些缓存问题。如果您的站点或页面有缓存问题,您将不会在开发人员/F12 模式下看到该问题。我缓存的 JavaScript AJAX 请求它可能无法按预期工作并导致执行中断,而 F12 完全没有问题。所以只需添加新参数以使缓存为假。

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

看起来 IE 特别需要将此设置为 false,以便 AJAX 和 javascript 活动运行良好。