Mengapa JavaScript hanya berfungsi setelah membuka alat pengembang di IE satu kali?

638

Bug IE9 - JavaScript hanya berfungsi setelah membuka alat pengembang satu kali.

Situs kami menawarkan unduhan pdf gratis kepada pengguna, dan memiliki fungsi sederhana "memasukkan kata sandi untuk mengunduh". Namun, itu tidak berfungsi sama sekali di Internet Explorer.

Anda dapat melihatnya sendiri dalam contoh ini .

Pass unduhan adalah "makeuseof". Di peramban lain, itu berfungsi dengan baik. Di IE, kedua tombol tidak melakukan apa-apa.

Hal paling aneh yang saya temukan adalah bahwa jika Anda membuka dan menutup bilah alat pengembang dengan F12, semuanya tiba-tiba mulai berfungsi.

Kami telah mencoba mode kompatibilitas dan semacamnya, tidak ada yang membuat perbedaan.

Bagaimana cara membuat ini berfungsi di Internet Explorer?

James Bruce
sumber
3
gunakan pembungkus lintas-browser: github.com/MichaelZelensky/log.js
Michael Zelensky
1
Alternatif yang baik, jika Anda memiliki langkah membangun, adalah menggunakan sesuatu seperti gulp-strip-debug. Ini menghapus semua console.*metode, bagus untuk membangun produksi, atau pengujian di IE.
knownasilya
15
Untuk googler masa depan: Saya memiliki gejala yang sama, tetapi di IE11. Yah, ternyata jawabannya tidak terkait dengan console, tetapi untuk penggunaan sudut dan caching dari permintaan saya. Lihat jawaban di sini dan di sini untuk lebih lanjut.
Christoffer Lette
@ChristofferLette Ya, saya memiliki masalah yang sama silakan periksa stackoverflow.com/questions/31428126/… kode berfungsi dengan baik ketika alat pengembang dibuka ..
Pranav Bilurkar
5
Hal paling menyebalkan tentang masalah seperti ini? Mereka hampir tidak mungkin untuk di-debug karena mulai berfungsi segera setelah Anda membuka konsol pengembang.
jlewkovich

Jawaban:

815

Sepertinya Anda mungkin memiliki beberapa kode debug di javascript Anda.

Pengalaman yang Anda gambarkan adalah khas kode yang berisi console.log()atau consolefungsi lainnya .

The consoleobjek hanya aktif ketika Toolbar Dev dibuka. Sebelum itu, memanggil objek konsol akan membuatnya dilaporkan sebagai undefined. Setelah bilah alat dibuka, konsol akan ada (bahkan jika bilah alat ditutup kemudian), maka panggilan konsol Anda kemudian akan berfungsi.

Ada beberapa solusi untuk ini:

Yang paling jelas adalah melalui kode Anda menghapus referensi console. Anda seharusnya tidak meninggalkan barang-barang seperti itu dalam kode produksi.

Jika Anda ingin menyimpan referensi konsol, Anda bisa membungkusnya dalam sebuah if()pernyataan, atau persyaratan lain yang memeriksa apakah objek konsol ada sebelum mencoba menyebutnya.

Spudley
sumber
8
Apakah ada solusi untuk meninggalkan kode debug? IE adalah satu-satunya browser dengan perilaku gila ini ...
Meekohi
94
if(!console) {console={}; console.log = function(){};}
Meekohi
79
@Meekohi if(!console)akan menyebabkan kesalahan yang sama - seharusnya dibacaif(!window.console)
mindplay.dk
9
jadi ... IE seharusnya tidak mengimplementasikan fitur yang setiap js dev baru gunakan setiap saat, untuk menghindari beberapa dev yang menggunakan skrip untuk memperbaiki hal yang seharusnya bisa berfungsi ... tapi itu tidak adil untuk mengetuk IE untuk itu? Anda adalah orang yang sangat dermawan Spudley !!! :)
Jordan Davis
7
Masih terjadi dengan IE11
Michael
162

HTML5 Boilerplate memiliki kode pra-dibuat yang bagus untuk memperbaiki masalah konsol:

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

Seperti @ plus- menunjuk dalam komentar, versi terbaru tersedia di halaman GitHub mereka

Tallmaris
sumber
8
Tautan dalam komentar @plus tidak lagi valid. Kode telah didorong ke dalam srcsubdirektori: github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
Christoffer Lette
153

Berikut adalah kemungkinan alasan lain selain console.logmasalah (setidaknya di IE11):

Ketika konsol tidak terbuka, IE melakukan caching yang cukup agresif, jadi pastikan bahwa semua $.ajaxpanggilan atau XMLHttpRequestcaching disetel ke false.

Sebagai contoh:

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

Saat konsol pengembang terbuka, caching kurang agresif. Tampaknya menjadi bug (atau mungkin fitur?)

pengguna3916095
sumber
9
Ini baru saja menyelamatkan saya;) Terima kasih! Saya katakan itu bug karena Anda harus memiliki kondisi yang sama untuk menguji dan men-debug situs web Anda dengan konsol buka dan tutup.
Chnoch
Bekerja untukku. Khususnya: stackoverflow.com/questions/13391563/…
user1062589
2
ini harus lebih tinggi karena saya pikir adalah jawaban yang sebenarnya ... jawaban yang diterima sehubungan dengan console.log dalam beberapa versi IE akan menimbulkan kesalahan, bukan karena perilaku yang dijelaskan di sini.
Migs
63

Ini menyelesaikan masalah saya setelah saya melakukan sedikit perubahan. Saya menambahkan berikut ini di halaman html saya untuk memperbaiki masalah IE9:

<script type="text/javascript">
    // IE9 fix
    if(!window.console) {
        var console = {
            log : function(){},
            warn : function(){},
            error : function(){},
            time : function(){},
            timeEnd : function(){}
        }
    }
</script>
runeks
sumber
1
Solusi ini tidak berfungsi pada IE 11 pada Windows 7 64-bit.
Vikram
1
Ini memecahkan masalah saya pada IE 11 pada Windows 7 64-bit.
zonyang
29

Selain consolemasalah penggunaan yang disebutkan dalam jawaban yang diterima dan yang lain, setidaknya ada alasan lain mengapa kadang-kadang halaman di Internet Explorer hanya berfungsi dengan alat pengembang yang diaktifkan.

Ketika Alat Pengembang diaktifkan, IE tidak benar-benar menggunakan cache HTTP-nya (setidaknya secara default di IE 11) seperti dalam mode normal.

Itu berarti jika situs atau halaman Anda memiliki masalah caching (jika cache lebih dari yang seharusnya misalnya - itu adalah kasus saya), Anda tidak akan melihat masalah itu dalam mode F12. Jadi jika javascript melakukan beberapa permintaan AJAX yang di-cache, mereka mungkin tidak berfungsi seperti yang diharapkan dalam mode normal, dan berfungsi dengan baik dalam mode F12.

Simon Mourier
sumber
1
Lihat stackoverflow.com/questions/3984961/… untuk cara menonaktifkan caching permintaan xmlHttpReq.
Michael Ross
1
Manis. Ini secara mengejutkan berhasil. Saya kira layanan $ http Angular tidak melakukan cache bust seperti yang saya kira.
17

Saya kira ini bisa membantu, menambahkan ini sebelum tag javascript:

try{
  console
}catch(e){
   console={}; console.log = function(){};
}
todotresde
sumber
11
try catchuntuk mendeteksi bahwa suatu variabel ada adalah ide yang buruk. Tidak hanya lambat, tetapi jika Anda memiliki lebih dari satu pernyataan di blok percobaan, Anda bisa mendapatkan pengecualian untuk alasan yang berbeda. Jangan gunakan ini, paling tidak gunakanif (typeof console == 'undefined')
Juan Mendes
8

Jika Anda menggunakan AngularJS versi 1.X Anda bisa menggunakan layanan $ log alih-alih menggunakan console.log secara langsung.

Layanan sederhana untuk logging. Implementasi default dengan aman menulis pesan ke konsol browser (jika ada).

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

Jadi, jika Anda memiliki sesuatu yang mirip

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

Anda bisa menggantinya dengan

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

Angular 2+ tidak memiliki layanan log bawaan .

Oskar S.
sumber
ini membantu saya, terima kasih- untuk siapa pun yang menggunakan naskah, ini adalah "ILogService" dalam definisi sudut
DannykPowell
IIRC menggunakan $ log menyebabkan lokasi pernyataan log dikaburkan, tidak seperti saat menggunakan console.log. Tidak terlalu bagus dari pengalaman saya selama pengembangan.
JesseDahl
5

Jika Anda menggunakan angulardan yaitu 9, 10atau edgemenggunakan:

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

Untuk sepenuhnya menonaktifkan cache.

Itsik Mauyhas
sumber
4

Itu terjadi di IE 11 untuk saya. Dan saya menelepon fungsi jquery .load. Jadi saya melakukannya dengan cara lama dan memasukkan sesuatu ke url untuk menonaktifkan cache.

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

Saya mendapatkan alternatif lain untuk solusi yang ditawarkan oleh runeks dan todotresde yang juga menghindari perangkap yang dibahas dalam komentar untuk jawaban Spudley :

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

Agak berantakan tetapi di sisi lain ringkas dan mencakup semua metode logging yang tercakup dalam jawaban runeks dan memiliki keuntungan besar bahwa Anda dapat membuka jendela konsol IE kapan saja dan log masuk mengalir.

pemalas
sumber
0

Kami mengalami masalah ini pada IE 11 pada Windows 7 dan Windows 10. Kami menemukan apa sebenarnya masalahnya dengan mengaktifkan kemampuan debugging untuk IE (IE> Internet Options> tab Advanced> Browsing> Hapus centang Nonaktifkan debugging skrip (Internet Explorer) ). Fitur ini biasanya diperiksa di dalam lingkungan kami oleh admin domain.

Masalahnya adalah karena kami menggunakan console.debug(...)metode dalam kode JavaScript kami. Asumsi yang dibuat oleh pengembang (saya) adalah saya tidak ingin apa pun ditulis jika konsol Alat Pengembang klien tidak terbuka secara eksplisit. Sementara Chrome dan Firefox tampaknya setuju dengan strategi ini, IE 11 tidak menyukainya sedikit pun. Dengan mengubah semua console.debug(...)pernyataan menjadi console.log(...)pernyataan, kami dapat terus mencatat informasi tambahan di konsol klien dan melihatnya saat dibuka, tetapi selain itu tetap tersembunyi dari pengguna biasa.

gregsonian
sumber
0

Saya menempatkan resolusi dan memperbaiki masalah saya. Sepertinya permintaan AJAX yang saya masukkan ke dalam JavaScript saya tidak diproses karena halaman saya mengalami masalah cache. jika situs atau halaman Anda memiliki masalah caching Anda tidak akan melihat masalah itu dalam mode pengembang / F12. JavaScript AJAX cache saya meminta itu mungkin tidak berfungsi seperti yang diharapkan dan menyebabkan eksekusi rusak yang F12 tidak memiliki masalah sama sekali. Jadi baru saja menambahkan parameter baru untuk membuat cache salah.

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

Sepertinya IE secara khusus membutuhkan ini menjadi salah agar aktivitas AJAX dan javascript berjalan dengan baik.

pauldx
sumber