¿Por qué JavaScript solo funciona después de abrir las herramientas de desarrollador en IE una vez?


638

Error de IE9: JavaScript solo funciona después de abrir las herramientas de desarrollador una vez.

Nuestro sitio ofrece descargas de pdf gratuitas a los usuarios, y tiene una función simple de "ingresar contraseña para descargar". Sin embargo, no funciona en absoluto en Internet Explorer.

Puedes verlo por ti mismo en este ejemplo .

El pase de descarga es "makeuseof". En cualquier otro navegador, funciona bien. En IE, ambos botones no hacen nada.

Lo más curioso que he encontrado es que si abres y cierras la barra de herramientas del desarrollador con F12, de repente todo comienza a funcionar.

Hemos probado el modo de compatibilidad y tal, nada hace la diferencia.

¿Cómo hago que esto funcione en Internet Explorer?


3
use el contenedor cruzado del navegador: github.com/MichaelZelensky/log.js
Michael Zelensky

1
Una buena alternativa, si tiene un paso de compilación, es usar algo como gulp-strip-debug. Elimina todos los console.*métodos, ideales para compilaciones de producción o pruebas en IE.
conocidoasilya

15
Para futuros googlers: tuve los mismos síntomas, pero en IE11. Bueno, resultó que la respuesta no estaba relacionada con console, sino con mi uso de solicitudes angulares y de almacenamiento en caché. Vea las respuestas aquí y aquí para más.
Christoffer Lette

@ChristofferLette Sí, tengo el mismo problema, compruebe que stackoverflow.com/questions/31428126/… el código funciona correctamente cuando se abren las herramientas de los desarrolladores ...
Pranav Bilurkar

66
¿Lo más molesto de problemas como este? Son casi imposibles de depurar porque comienza a funcionar tan pronto como abres la consola del desarrollador.
jlewkovich

Respuestas:


815

Parece que podría tener algún código de depuración en su javascript.

La experiencia que está describiendo es típica del código que contiene console.log()o cualquiera de las otras consolefunciones.

los console objeto solo se activa cuando se abre la barra de herramientas de desarrollo. Antes de eso, llamar al objeto de consola dará como resultado que se informe como undefined. Después de abrir la barra de herramientas, la consola existirá (incluso si la barra de herramientas se cierra posteriormente), por lo que las llamadas a la consola funcionarán.

Hay algunas soluciones a esto:

La más obvia es revisar su código eliminando referencias a console . No deberías dejar cosas así en el código de producción de todos modos.

Si desea mantener las referencias de la consola, puede envolverlas en una if()declaración o en algún otro condicional que verifique si el objeto de la consola existe antes de intentar llamarlo.


8
¿Hay alguna solución para dejar el código de depuración? IE es el único navegador con este comportamiento
estúpido

94
if(!console) {console={}; console.log = function(){};}
Meekohi

80
@Meekohi if(!console)causará el mismo error - debería leerif(!window.console)
mindplay.dk

99
así que ... IE no debería implementar una función que cada nuevo desarrollador js usa todo el tiempo, para evitar molestar a algunos desarrolladores que usaron un script para arreglar lo que debería haber funcionado en primer lugar ... pero es injusto para golpear a IE por eso? Eres una persona muy generosa Spudley !!! :)
Jordan Davis

77
Todavía sucede con IE11
Michael

162

HTML5 Boilerplate tiene un buen código prefabricado para solucionar problemas de consola:

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

Como @ plus señaló en los comentarios, la última versión está disponible en su página de GitHub


99
El enlace en el comentario de @plus ya no es válido. El código se ha introducido en un srcsubdirectorio: github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
Christoffer Lette

153

Aquí hay otra posible razón además del console.logproblema (al menos en IE11):

Cuando la consola no está abierta, IE realiza un almacenamiento en caché bastante agresivo, así que asegúrese de que cualquier $.ajaxllamada o XMLHttpRequestllamada tenga el almacenamiento en caché establecido en falso.

Por ejemplo:

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

Cuando la consola del desarrollador está abierta, el almacenamiento en caché es menos agresivo. Parece ser un error (¿o tal vez una característica?)


99
Esto me salvó;) ¡Gracias! Diría que es un error, ya que debería tener las mismas condiciones para probar y depurar su sitio web con la consola abierta y cerrada.
Chnoch

Trabajó para mi. Específicamente: stackoverflow.com/questions/13391563/…
user1062589

2
esto debería ser mayor, ya que creo que es la respuesta real ... la respuesta aceptada con respecto a console.log en alguna versión de IE arrojará un error, no causó el comportamiento descrito aquí.
Migs

63

Esto resolvió mi problema después de que le hice un cambio menor. Agregué lo siguiente en mi página html para solucionar el problema de IE9:

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

1
Esta solución no funciona en IE 11 en Windows 7 de 64 bits.
Vikram

1
Esto resolvió mi problema en IE 11 en Windows 7 de 64 bits.
zonyang

29

Además del ' console' problema de uso mencionado en la respuesta aceptada y otras, hay al menos otra razón por la cual a veces las páginas en Internet Explorer funcionan solo con las herramientas de desarrollador activadas.

Cuando Developer Tools está habilitado, IE realmente no usa su caché HTTP (al menos por defecto en IE 11) como lo hace en modo normal.

Significa que si su sitio o página tiene un problema de almacenamiento en caché (si almacena más de lo que debería, por ejemplo, ese fue mi caso), no verá ese problema en el modo F12. Entonces, si javascript realiza algunas solicitudes AJAX almacenadas en caché, es posible que no funcionen como se esperaba en el modo normal y que funcionen bien en el modo F12.


1
Consulte stackoverflow.com/questions/3984961/… para saber cómo deshabilitar el almacenamiento en caché de las solicitudes xmlHttpReq.
Michael Ross

1
Dulce. Esto sorprendentemente funcionó. Supongo que el servicio $ http de Angular no almacena el busto en caché como pensé que lo haría.

17

Supongo que esto podría ayudar, agregando esto antes de cualquier etiqueta de javascript:

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

11
try catchdetectar que existe una variable es una mala idea. No solo es lento, sino que si tiene más de una declaración en su bloque try, podría obtener una excepción por un motivo diferente. No use esto, al menos useif (typeof console == 'undefined')
Juan Mendes

8

Si está utilizando AngularJS versión 1.X, podría utilizar el servicio $ log en lugar de utilizar console.log directamente.

Servicio simple para iniciar sesión. La implementación predeterminada escribe de forma segura el mensaje en la consola del navegador (si está presente).

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

Entonces, si tienes algo similar a

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

puedes reemplazarlo con

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

Angular 2+ no tiene ningún servicio de registro incorporado .


esto me ayudó, gracias, para cualquier otra persona que usa mecanografiado, este es el "ILogService" en las definiciones angulares
DannykPowell

IIRC usando $ log hace que la ubicación de la declaración de registro se oscurezca, a diferencia de cuando se usa console.log. No es tan bueno por mi experiencia durante el desarrollo.
JesseDahl

5

Si está usando angulary es decir, 9, 10o edgeusa:

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';
}]);

Para desactivar por completo cache.


4

Sucedió en IE 11 para mí. Y estaba llamando a la función jquery .load. Así que lo hice a la antigua usanza y puse algo en la url para deshabilitar el almacenamiento en caché.

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

2

Obtuve otra alternativa para las soluciones ofrecidas por runeks y todotresde que también evita las trampas discutidas en los comentarios a la respuesta de Spudley :

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

Es un poco desaliñado pero, por otro lado, es conciso y cubre todos los métodos de registro cubiertos en la respuesta de runeks y tiene la gran ventaja de que puede abrir la ventana de la consola de IE en cualquier momento y los registros vienen fluyendo.


0

Nos encontramos con este problema en IE 11 en Windows 7 y Windows 10. Descubrimos cuál era exactamente el problema al activar las capacidades de depuración para IE (IE> Opciones de Internet> pestaña Avanzado> Navegación> Desmarcar Desactivar depuración de scripts (Internet Explorer) ). Los administradores de dominio normalmente verifican esta característica en nuestro entorno.

El problema era porque estábamos usando el console.debug(...)método dentro de nuestro código JavaScript. La suposición hecha por el desarrollador (yo) era que no quería que se escribiera nada si la consola de Developer Tools del cliente no estaba abierta explícitamente. Si bien Chrome y Firefox parecían estar de acuerdo con esta estrategia, a IE 11 no le gustó nada. Al cambiar todas las console.debug(...)declaraciones por console.log(...)declaraciones, pudimos continuar registrando información adicional en la consola del cliente y verla cuando estaba abierta, pero de lo contrario mantenerla oculta para el usuario típico.


0

Puse la resolución y solucioné mi problema. Parece que la solicitud de AJAX que puse dentro de mi JavaScript no se estaba procesando porque mi página tenía algún problema de caché. si su sitio o página tiene un problema de almacenamiento en caché, no verá ese problema en el modo desarrolladores / F12. mi JavaScript AJAX en caché solicita que no funcione como se esperaba y que la ejecución se rompa, lo que F12 no tiene ningún problema. Así que solo agregué un nuevo parámetro para hacer que el caché sea falso.

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

Parece que IE necesita específicamente que esto sea falso para que la actividad de AJAX y JavaScript se ejecute bien.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.