it-swarm-id.com

Cari tahu apakah konsol Chrome terbuka

Saya menggunakan skrip kecil ini untuk mencari tahu apakah Firebug terbuka:

if (window.console && window.console.firebug) {
    //is open
};

Dan itu bekerja dengan baik. Sekarang saya sedang mencari setengah jam untuk menemukan cara mendeteksi apakah konsol pengembang web bawaan Google Chrome terbuka, tetapi saya tidak dapat menemukan petunjuk apa pun.

Ini:

if (window.console && window.console.chrome) {
    //is open
};

tidak bekerja.

EDIT:

Jadi sepertinya tidak mungkin mendeteksi apakah konsol Chrome terbuka. Tetapi ada " hack " yang berfungsi, dengan beberapa kelemahan:

  • tidak akan berfungsi saat konsol tidak terkunci
  • tidak akan berfungsi saat konsol dibuka pada pemuatan halaman

Jadi, saya akan memilih jawaban Unsigned untuk saat ini, tetapi jika seseorang datang dengan ide yang cemerlang, dia boleh tetap menjawab dan saya mengubah jawaban yang dipilih! Terima kasih!

111
Oskar

toString (2017-2018)

Karena penanya yang asli sepertinya tidak ada lagi dan ini masih merupakan jawaban yang diterima, menambahkan solusi ini untuk visibilitas. Kredit diberikan kepada Antonin Hildebrand 's komentar on zswang ' s answer . Solusi ini mengambil keuntungan dari kenyataan bahwa toString() tidak dipanggil pada objek yang dicatat kecuali konsol terbuka.

var devtools = /./;
devtools.toString = function() {
  this.opened = true;
}

console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened

console.profiles (2013)

Perbarui:console.profiles telah dihapus dari Chrome. Solusi ini tidak lagi berfungsi.

Terima kasih kepada Paul Irish untuk menunjukkan solusi ini dari Temukan DevTools , menggunakan profiler:

function isInspectOpen()
{
    console.profile(); 
    console.profileEnd(); 
    if (console.clear) console.clear();
    return console.profiles.length > 0;
}

window.innerHeight (2011)

Opsi lain ini dapat mendeteksi inspektur yang di-dock menjadi dibuka, setelah halaman dimuat, tetapi tidak akan dapat mendeteksi inspektur yang tidak terkunci, atau jika inspektur sudah terbuka pada pemuatan halaman. Ada juga beberapa potensi positif palsu.

window.onresize = function()
{
    if ((window.outerHeight - window.innerHeight) > 100)
        alert('Docked inspector was opened');
}
64
Unsigned

Chrome 65+ (2018)

r = /./
r.toString = function () {
    document.title = '1'
}
console.log('%c', r);

demo: https://jsbin.com/cecuzeb/edit?output (Pembaruan pada 2018-03-16)

paket: https://github.com/zswang/jdetects


Saat mencetak "Elemen" alat pengembang Chrome akan mendapatkan id

var checkStatus;

var element = document.createElement('any');
element.__defineGetter__('id', function() {
    checkStatus = 'on';
});

setInterval(function() {
    checkStatus = 'off';
    console.log(element);
    console.clear();
}, 1000);

Versi lain (dari komentar)

var element = new Image();
Object.defineProperty(element, 'id', {
  get: function () {
    /* TODO */
    alert('囧');
  }
});
console.log('%cHello', element);

Cetak variabel biasa:

var r = /./;
r.toString = function() {
  document.title = 'on';
};
console.log(r);
109
zswang

Saya membuat devtools-detect yang mendeteksi ketika DevTools terbuka:

console.log('is DevTools open?', window.devtools.open);

Anda juga dapat mendengarkan acara:

window.addEventListener('devtoolschange', function (e) {
    console.log('is DevTools open?', e.detail.open);
});

Itu tidak berfungsi saat DevTools tidak terkunci. Namun, berfungsi dengan Chrome/Safari/Firefox DevTools dan Firebug.

20
Sindre Sorhus

Saya menemukan cara untuk mengetahui apakah Konsol Chrome dibuka atau tidak . Ini masih berupa peretasan tetapi cara ini lebih akurat dan akan bekerja jika cuaca tidak terkunci atau tidak.

Pada dasarnya menjalankan kode ini dengan konsol tertutup membutuhkan sekitar ~ 100 mikrodetik dan saat konsol dibuka dibutuhkan sekitar dua kali lipat ~ 200 mikrodetik.

console.log(1);
console.clear();

(1 milidetik = 1000 mikrodetik)

Saya sudah menulis lebih banyak tentangnya di sini .

Demo adalah sini .


Perbarui:

@ zswang telah menemukan solusi terbaik saat ini - lihat jawabannya

13
guya

Jika tujuan Anda adalah untuk memacet alat pengembang, coba ini (saya menemukan versi yang lebih rumit dari itu di tempat kode JS dikaburkan, itu sangat menjengkelkan):

setTimeout(function() {while (true) {eval("debugger");}}, 0);
7
Robert Moore

Saya menemukan metode baru:

var b=new Blob()
Object.defineProperty(b,'size',{get(){
    alert('The devtool was opened!')
}})
setTimeout(function(){console.log(b)},3000)

tes online

5
huiting Chen

Ada cara rumit untuk memeriksanya untuk ekstensi dengan izin 'tab':

chrome.tabs.query({url:'chrome-devtools://*/*'}, function(tabs){
    if (tabs.length > 0){
        //devtools is open
    }
});

Anda juga dapat memeriksa apakah terbuka untuk halaman Anda:

chrome.tabs.query({
    url: 'chrome-devtools://*/*',
    title: '*example.com/your/page*'
}, function(tabs){ ... })
3
norlin

Saya menulis posting blog tentang ini: http://nepjua.org/check-if-browser-console-is-open/

Itu dapat mendeteksi apakah itu merapat atau tidak

function isConsoleOpen() {  
  var startTime = new Date();
  debugger;
  var endTime = new Date();

  return endTime - startTime > 100;
}

$(function() {
  $(window).resize(function() {
    if(isConsoleOpen()) {
        alert("You're one sneaky dude, aren't you ?")
    }
  });
});
3
nepjua

Alat pengembang Chrome benar-benar hanya bagian dari perpustakaan WebCore WebKit. Jadi pertanyaan ini berlaku untuk Safari, Chrome, dan konsumen WebCore lainnya.

Jika ada solusi, itu akan didasarkan pada perbedaan dalam DOM ketika inspektur web WebKit terbuka dan ketika ditutup. Sayangnya, ini semacam masalah ayam dan telur karena kita tidak bisa menggunakan inspektur untuk mengamati DOM ketika inspektur ditutup.

Apa yang mungkin dapat Anda lakukan adalah menulis sedikit JavaScript untuk membuang seluruh pohon DOM. Kemudian jalankan sekali ketika inspektur terbuka, dan sekali ketika inspektur ditutup. Setiap perbedaan dalam DOM mungkin merupakan efek samping dari inspektur web, dan kami mungkin dapat menggunakannya untuk menguji apakah pengguna memeriksa atau tidak.

Tautan ini adalah awal yang baik untuk skrip dumping DOM, tetapi Anda ingin membuang seluruh objek DOMWindow, bukan hanya document.

Perbarui:

Sepertinya ada cara untuk melakukan ini sekarang. Lihat Detektor Inspektur Chrome

2
pepsi

Retas yang sangat andal

Pada dasarnya atur getter pada properti dan login di konsol. Tampaknya hal itu dapat diakses hanya ketika konsol terbuka. 

https://jsfiddle.net/gcdfs3oo/44/

var checkStatus;

var element = new Image();
Object.defineProperty(element, 'id', {
  get:function() {
    checkStatus='on';
    throw new Error("Dev tools checker");
  }
});

requestAnimationFrame(function check() {
    checkStatus = 'off';
    console.dir(element);
    document.querySelector('#devtool-status').innerHTML = checkStatus;
    requestAnimationFrame(check);
});
2
Muhammad Umer

Anda juga dapat mencoba ini: https://github.com/sindresorhus/devtools-detect

// check if it's open
console.log('is DevTools open?', window.devtools.open);
// check it's orientation, null if not open
console.log('and DevTools orientation?', window.devtools.orientation);

// get notified when it's opened/closed or orientation changes
window.addEventListener('devtoolschange', function (e) {
    console.log('is DevTools open?', e.detail.open);
    console.log('and DevTools orientation?', e.detail.orientation);
});
1
Vladimir Ishenko

Jika Anda adalah pengembang yang melakukan hal-hal selama pengembangan. Lihat ekstensi Chrome ini. Ini membantu Anda mendeteksi kapan Chrome Devtoos dibuka atau ditutup.

https://chrome.google.com/webstore/detail/devtools-status-detector/pmbbjdhohceladenbdjjoejcanjijoaa?authuser=1

Ekstensi ini membantu pengembang Javascript mendeteksi ketika Chrome Devtools dibuka atau ditutup pada halaman saat ini . Ketika Chrome Devtools ditutup/dibuka, ekstensi akan memunculkan acara bernama 'devtoolsStatusChanged' pada elemen window.document. 

Ini adalah contoh kode:

 function addEventListener(el, eventName, handler) {
    if (el.addEventListener) {
        el.addEventListener(eventName, handler);
    } else {
        el.attachEvent('on' + eventName,
            function() {
                handler.call(el);
            });
    }
}


// Add an event listener.
addEventListener(document, 'devtoolsStatusChanged', function(e) {
    if (e.detail === 'OPENED') {
        // Your code when Devtools opens
    } else {
        // Your code when Devtools Closed
    }
});
0
vothaison

Beberapa jawaban di sini akan berhenti bekerja di Chrome 65. Inilah alternatif serangan waktu yang bekerja cukup andal di Chrome, dan jauh lebih sulit untuk dimitigasi daripada metode toString(). Sayangnya itu tidak dapat diandalkan di Firefox.

addEventListener("load", () => {

var baseline_measurements = [];
var measurements = 20;
var warmup_runs = 3;

const status = document.documentElement.appendChild(document.createTextNode("DevTools are closed"));
const junk = document.documentElement.insertBefore(document.createElement("div"), document.body);
junk.style.display = "none";
const junk_filler = new Array(1000).join("junk");
const fill_junk = () => {
  var i = 10000;
  while (i--) {
    junk.appendChild(document.createTextNode(junk_filler));
  }
};
const measure = () => {
    if (measurements) {
    const baseline_start = performance.now();
    fill_junk();
    baseline_measurements.Push(performance.now() - baseline_start);
    junk.textContent = "";
    measurements--;
    setTimeout(measure, 0);
  } else {
    baseline_measurements = baseline_measurements.slice(warmup_runs); // exclude unoptimized runs
    const baseline = baseline_measurements.reduce((sum, el) => sum + el, 0) / baseline_measurements.length;

    setInterval(() => {
      const start = performance.now();
      fill_junk();
      const time = performance.now() - start;
      // in actual usage you would also check document.hasFocus()
      // as background tabs are throttled and get false positives
      status.data = "DevTools are " + (time > 1.77 * baseline ? "open" : "closed");
      junk.textContent = "";
    }, 1000);
  }
};

setTimeout(measure, 300);

});
0
Eli Grey