जानें कि क्रोम कंसोल खुला है या नहीं

Question

मैं इस छोटी सी लिपि का उपयोग यह जानने के लिए कर रहा हूं कि क्या फायरबग खुला है:

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

और यह अच्छी तरह से काम करता है। अब मैं यह जानने के लिए एक रास्ता खोजने के लिए आधे घंटे की खोज कर रहा था कि क्या Google Chrome का अंतर्निहित वेब डेवलपर कंसोल खुला है, लेकिन मुझे कोई संकेत नहीं मिला।

यह:

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

काम नहीं करता है।

संपादित करें:

इसलिए ऐसा लगता है कि यह पता लगाना संभव नहीं है कि क्रोम कंसोल खुला है या नहीं। लेकिन एक " हैक " है जो कुछ कमियों के साथ काम करता है:

• कंसोल अनडॉक होने पर काम नहीं करेगा
• जब पृष्ठ लोड पर कंसोल खुला हो तो काम नहीं करेगा

इसलिए, मैं अब के लिए अनसाइनड्स जवाब चुनने जा रहा हूं, लेकिन अगर कोई 1 शानदार विचार के साथ आता है, तो वह अभी भी जवाब देने के लिए स्वागत करता है और मैं चयनित उत्तर को बदल देता हूं! धन्यवाद!

Comments

Chrome निरीक्षण तत्व का पता लगाने के लिए

— pimvdb

जवाब में समाधान काम करने लगता है, हालांकि केवल अगर कंसोल डॉक किया जाता है। यह भी काम नहीं करता है अगर कंसोल पहले से ही पेज लोड पर खुला है, जबकि फायरबग स्क्रिप्ट में यह समस्या नहीं है और हमेशा काम करता है। लेकिन मैं इसके लिए अभी जी सकता हूं! बहुत बहुत धन्यवाद @pimvdb !! मैं इस सवाल को वैसे भी खोलकर रखूंगा कि शायद फायरबग स्क्रिप्ट के समान कोई रास्ता मिल जाए, जो हमेशा काम करता है।

— r0skar

मैं एक त्रुटि को फेंकने जैसी चीजों की कोशिश कर रहा हूं और देखता हूं कि क्या .messageलुप्त होता है (जो तब होता है जब डिबगर खुला होता है क्योंकि आप संदेश देखते हैं), लेकिन दुर्भाग्य से यह तब भी होता है जब डिबगर खोला नहीं जाता है। मैं इसके लिए एक हैक जानना चाहता हूँ अगर यह मौजूद है ...

— pimvdb

@Spudley यह सवाल प्रासंगिक नहीं है कि मुझे इसकी आवश्यकता क्यों है और मैं समझाना शुरू नहीं करना चाहता। मुझे पता है कि डीबगिंग से कुछ को रोकने का कोई तरीका नहीं है, लेकिन ऐसा नहीं है जो मैं करने की कोशिश कर रहा हूं। मैं सिर्फ यह जानने की कोशिश कर रहा हूं कि कंसोल खुला है या नहीं। Thats सभी :)

— r0skar

JFYI console.profiles विधि से कंसोल एपीआई हाल ही में हटा दिया गया था src.chromium.org/viewvc/blink?view=revision&revision=151136

— loislo

Answer 1

requestAnimationFrame (2019 के अंत में)

इन पिछले उत्तरों को ऐतिहासिक संदर्भ के लिए यहाँ छोड़ कर। वर्तमान में मुहम्मद उमर का दृष्टिकोण क्रोम 78 पर काम करता है, जिसमें करीबी और खुली दोनों घटनाओं का पता लगाने का अतिरिक्त लाभ है।

समारोह में भाग लेने (2019)

इस जवाब पर Overcl9ck की टिप्पणी का श्रेय । /./खाली फ़ंक्शन ऑब्जेक्ट के साथ रेगेक्स को बदलना अभी भी काम करता है।

var devtools = function() {};
devtools.toString = function() {
  if (!this.opened) {
    alert("Opened");
  }
  this.opened = true;
}

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

regex toString (2017-2018)

चूंकि मूल प्रश्नकर्ता अब आसपास नहीं लगता है और दृश्यता के लिए इस समाधान को जोड़ते हुए यह अभी भी स्वीकृत उत्तर है। एंटोनिन हिल्डेब्रांड की ज़ावांग के उत्तर पर टिप्पणी का श्रेय जाता है । यह समाधान इस तथ्य का लाभ उठाता है कि लॉग ऑब्जेक्ट पर नहीं बुलाया जाता है जब तक कि कंसोल खुला न हो।toString()

var devtools = /./;
devtools.toString = function() {
  if (!this.opened) {
    alert("Opened");
  }
  this.opened = true;
}

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

कंसोल.प्रोफाइल (2013)

अपडेट: console.profiles क्रोम से हटा दिया गया है। यह समाधान अब काम नहीं करता है।

प्रोफ़ाइलर का उपयोग करके डिस्कवर देवटूल से इस समाधान को इंगित करने के लिए पॉल आयरिश का धन्यवाद :

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

<button onClick="showIfInspectIsOpen()">Is it open?</button>

window.innerHeight (2011)

यह अन्य विकल्प पृष्ठ लोड होने के बाद खोले गए निरीक्षक का पता लगा सकता है , लेकिन एक निरीक्षक निरीक्षक का पता लगाने में सक्षम नहीं होगा, या यदि निरीक्षक पहले ही पृष्ठ लोड पर खुला था। झूठी सकारात्मकता के लिए कुछ क्षमता भी है।

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

Comments

हो रही लेखन त्रुटि: संपत्ति 'लंबाई' isInspectOpen () में अपरिभाषित का पढ़ा नहीं जा सकता

— संदीप

एक नया सबसे अच्छा तरीका है (क्रेडिट: @ ज़्वासंग): stackoverflow.com/questions/7798748/…

— विक्की चिजवानी

'' toString (2017) '' का समाधान क्रोम में काम नहीं करता है

— रिचर्ड चान

लगता है कि क्रोम में तय किया गया है। संपादित करें। वास्तव में यह काम करता है यदि आप function() {}एक रेगेक्स के बजाय का उपयोग करते हैं

— ओवरक्लेक

@ नवीनतम Chrome 77 अद्यतन तक आपका समाधान कार्य कर रहा था। क्या आप हमें वर्कअराउंड के लिए सही दिशा में इंगित कर सकते हैं?

— अगस्टिन हॉलर

Answer 2

Chrome 65+ (2018)

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

डेमो: https://jsbin.com/cecuzeb/edit?output (अपडेट 2018-03-16 पर)

पैकेज: https://github.com/zswang/jdetects

---

"एलीमेंट" को प्रिंट करते समय क्रोम डेवलपर टूल को अपनी आईडी मिल जाएगी

var checkStatus;

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

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

एक और संस्करण (टिप्पणियों से)

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

एक नियमित चर प्रिंट करें ：

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

Comments

बहुत बढ़िया जवाब। जोड़ने वाली एक बात ... एमडीएन कहता __defineGetter__है कि पदावनत हो गया है इसलिए मैं बदल गया Object.defineProperty(element, 'id', {get:function() {checkStatus='on';}});... अभी भी काम कर रहा हूं ।

— डेनिकोव

कंसोल खुलते ही तत्व को 'रीड' कर लेगा, इसलिए आप सिर्फ एक बार प्रिंट कर सकते हैं और बस setInterval

— गेटरी

इस खोज के आधार पर मैं कम घुसपैठ विधि खोजने में सक्षम था। DevTools कंसोल पर प्रिंट करते समय फ़ंक्शंस () को फ़ंक्शंस पर कॉल करता है। तो कोई एक कस्टम फंक्शन ऑब्जेक्ट को स्ट्रींग () मेथड को ओवरराइड करके खाली स्ट्रिंग पर प्रिंट कर सकता है। इसके अतिरिक्त, आप कंसोल स्वरूपण स्ट्रिंग% c और सेट रंग का उपयोग कर सकते हैं: यह सुनिश्चित करने के लिए पारदर्शी है कि संभावित रूप से मुद्रित टेक्स्ट प्रिंट को अदृश्य के रूप में बनाया जाए। मैंने यहाँ इस तकनीक का उपयोग किया: github.com/binaryage/cljs-devtools/blob/…

— Antonin Hildebrand

वर्ष 2017 यहां। क्रोम अभी भी चीजों को लिखता है, ताकि आप इसे खोले बिना सांत्वना दे सकें। और आपका हैक अब काम नहीं करता है।

— वोटशाइन

फ़ायरफ़ॉक्स पर परीक्षण निरीक्षण तत्व (क्यू) और फायरबग के साथ निरीक्षण तत्व के साथ काम नहीं करता है

— आसिफ़ अशरफ़

Answer 3

बहुत विश्वसनीय हैक

मूल रूप से संपत्ति पर एक गेट्टर सेट करें और इसे कंसोल में लॉग इन करें। जाहिरा तौर पर बात केवल तब तक पहुँच जाती है जब कंसोल खुला होता है।

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').className  = checkStatus;
  requestAnimationFrame(check);
});

.on{
  color:limegreen;
}

.off{
  color:red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.css" integrity="sha256-DVK12s61Wqwmj3XI0zZ9MFFmnNH8puF/eRHTB4ftKwk=" crossorigin="anonymous" />

<p>
  <ul>
    <li>
      dev toolbar open: icon is <span class="on">green</span>
    </li>
    <li>
      dev toolbar closed: icon is <span class="off">red</span>
    </li>
  </ul>
</p>
<div id="devtool-status"><i class="fas fa-7x fa-power-off"></i></div>
<br/>
<p><b>Now press F12 to see if this works for your browser!</b></p>

Comments

क्रोम संस्करण 21

— महापुरूष

किस throw new Error("Dev tools checker");लिए है? क्योंकि यह इसके बिना काम करता है।

— लेजेंड्स

यह कंसोल को स्पैम करता है (जब खुला)? जो मुझे लगता है कि कुछ दिनों के बाद महत्वपूर्ण मात्रा में स्मृति खाना शुरू कर देंगे :)

— अजगर 10

एकमात्र तरीका जो

— 20.7

Answer 4

मैंने देवटूलों का पता लगाया, जो पता लगाता है कि देवटूल कब खुला है:

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

आप एक घटना भी सुन सकते हैं:

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

यह काम नहीं करता है जब DevTools undocked है। हालाँकि, Chrome / Safari / Firefox DevTools और Firebug के साथ काम करता है।

Comments

@barbushin मुझे लगता है कि आपका खुला devtool डॉक किया गया है, यह अलग विंडो का पता नहीं लगा सकता है।

— मिथिला

दुख की बात है कि इसने क्रोम github.com/sindresorhus/devtools-detect/issues/40

— laike9m के लिए

Answer 5

मुझे यह बताने का एक तरीका मिला कि क्रोम कंसोल खोला गया है या नहीं। यह अभी भी एक हैक है, लेकिन यह अधिक सटीक है और मौसम को काम करेगा कि कंसोल अनडॉक है या नहीं।

मूल रूप से बंद किए गए कंसोल के साथ इस कोड को चलाने में लगभग ~ 100 माइक्रोसेकंड लगते हैं और कंसोल को खोलने पर इसमें लगभग 200 ~ 200 माइक्रोसेकंड लगते हैं।

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

(1 मिलीसेकंड = 1000 माइक्रोसेकंड)

मैंने इसके बारे में यहाँ और लिखा है ।

डेमो यहाँ है ।

---

अपडेट करें:

@ झ्वासंग को वर्तमान सबसे अच्छा समाधान मिल गया है - उसका उत्तर देखें

Comments

यह बहुत गलत समाधान है। Google इसे -> "रेस हैज़र्ड"। धीमी या तेज कंप्यूटर और ...?

— 18C

"रेस हैज़र्ड" यहाँ से संबंधित नहीं है। कंसोल खोले जाने पर हमेशा एक सापेक्ष सुस्ती होती है।

— GuyA

सापेक्ष सुस्ती लेकिन हमेशा 100 या 200ms नहीं। इस प्रकार रेस हैज़र्ड। Btw। यदि आप एक ही समय में एक खेल खेलेंगे, तो यह "समाधान" गलत सकारात्मक परिणाम देगा।

— 18C

Answer 6

यदि आपका लक्ष्य डेवलपर टूल को जाम करना है, तो इसे आज़माएं (मुझे इसका एक और जटिल संस्करण ऐसी जगह पर मिला जहाँ JS कोड को बाधित किया गया था, यह बहुत कष्टप्रद है):

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

Comments

Chrome में उपयोगकर्ता डिबगर को सुनने को अक्षम कर सकता है।

— जैक गिफिन

Answer 7

'टैब' की अनुमति वाले एक्सटेंशन के लिए इसे जाँचने का एक कठिन तरीका है:

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

यह भी जाँच कर सकते हैं कि क्या यह आपके पृष्ठ के लिए खुला है:

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

Answer 8

मैंने इस बारे में एक ब्लॉग पोस्ट लिखा: http://nepjua.org/check-if-browser-console-is-open/

यह पता लगा सकता है कि यह डॉक किया गया है या नहीं

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 ?")
    }
  });
});

Comments

यह अच्छा है, लेकिन, यह पृष्ठ को बासी कर देगा और कोई भी संदेश तब तक नहीं दिखाया जाएगा जब तक कि उपयोगकर्ता फिर से शुरू बटन पर क्लिक नहीं करेगा। यह उपयोगकर्ता के लिए अत्यधिक घुसपैठ होगा।

— गुआ

अगला "रेस हैज़र्ड" समाधान। बहुत गलत। Btw। "डीबगर" कमांड को अक्षम किया जा सकता है।

— 18C

Answer 9

var div = document.createElement('div');
Object.defineProperty(div,'id',{get:function(){
    document.title = 'xxxxxx'
}});

setTimeout(()=>console.log(div),3000)

Comments

यह काम नहीं किया। और लिंक test onlineकाम नहीं किया।

— शमूएल

Answer 10

Chrome डेवलपर टूल वास्तव में WebKit की WebCore लाइब्रेरी का एक हिस्सा है। तो यह सवाल सफारी, क्रोम, और किसी भी वेबकोर उपभोक्ताओं पर लागू होता है।

यदि कोई समाधान मौजूद है, तो यह WebKit वेब इंस्पेक्टर के खुलने और बंद होने पर DOM में अंतर पर आधारित होगा। दुर्भाग्य से, यह एक प्रकार की चिकन और अंडे की समस्या है क्योंकि हम इंस्पेक्टर का उपयोग तब नहीं कर सकते हैं जब इंस्पेक्टर बंद हो जाता है।

आप जो करने में सक्षम हो सकते हैं वह संपूर्ण डोम ट्री को डंप करने के लिए जावास्क्रिप्ट का एक सा लिखा है। फिर इसे एक बार चलाएं जब निरीक्षक खुला हो, और एक बार जब निरीक्षक बंद हो। DOM में कोई अंतर संभवतः वेब इंस्पेक्टर का एक साइड-इफेक्ट है, और हम इसका उपयोग करने में सक्षम हो सकते हैं कि उपयोगकर्ता निरीक्षण कर रहा है या नहीं।

यह लिंक एक डोम डंपिंग स्क्रिप्ट के लिए एक अच्छी शुरुआत है, लेकिन आप पूरी DOMWindowवस्तु को डंप करना चाहेंगे , न कि केवल document।

अपडेट करें:

ऐसा लगता है कि अब ऐसा करने का एक तरीका है। Chrome इंस्पेक्टर डिटेक्टर की जाँच करें

Comments

Chrome इंस्पेक्टर डिटेक्टर अब Google क्रोम के लिए काम नहीं करता है, जैसा कि डेवलपर ने बताया है

— एंजेलो

Answer 11

इसके अलावा आप यह कोशिश कर सकते हैं: 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);
});

Comments

अच्छा काम नहीं करता है। यदि कोई उपयोगकर्ता मोबाइल डिवाइस पर है, तो वे अपने डिवाइस को 90 डिग्री चालू करते हैं, फिर स्क्रीन आकार देगा।

— जैक गिफिन

क्रोम या एफएफ पर काम नहीं करता है या 4/5/2019 तक बढ़त

— सॉलिडस्नेक

Answer 12

मुहम्मद उमर के दृष्टिकोण ने मेरे लिए काम किया, और मैं रिएक्ट का उपयोग कर रहा हूं, इसलिए मैंने हुक बनाने का फैसला किया:

const useConsoleOpen = () => {
  const [consoleOpen, setConsoleOpen] = useState(true)

  useEffect(() => {
    var checkStatus;

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

    requestAnimationFrame(function check() {
      checkStatus = false;
      console.dir(element); //Don't delete this line!
      setConsoleOpen(checkStatus)
      requestAnimationFrame(check);
    });
  }, []);

  return consoleOpen
}

नोट: जब मैं इसके साथ खिलवाड़ कर रहा था, तो यह सबसे लंबे समय तक काम नहीं करता था और मैं इसका पता नहीं लगा सका। मैंने डिलीट कर दिया था console.dir(element);जो महत्वपूर्ण है कि यह कैसे काम करता है। मैं ज्यादातर गैर-वर्णनात्मक कंसोल कार्यों को हटा देता हूं क्योंकि वे बस जगह लेते हैं और आमतौर पर फ़ंक्शन के लिए आवश्यक नहीं होते हैं, इसलिए यही मेरे लिए काम नहीं कर रहा था।

इसके प्रयेाग के लिए:

import React from 'react'

const App = () => {
  const consoleOpen = useConsoleOpen()

  return (
    <div className="App">
      <h1>{"Console is " + (consoleOpen ? "Open" : "Closed")}</h1>
    </div>
  );
}

मुझे उम्मीद है कि यह किसी को भी प्रतिक्रिया का उपयोग करने में मदद करता है। यदि कोई इस पर विस्तार करना चाहता है, तो मैं कुछ बिंदु पर अनंत लूप को रोकने में सक्षम होना चाहूंगा (क्योंकि मैं हर घटक में इसका उपयोग नहीं करता हूं) और कंसोल को साफ रखने का एक तरीका खोजने के लिए।

Answer 13

यदि आप डेवलपर हैं जो विकास के दौरान सामान कर रहे हैं। इस Chrome एक्सटेंशन को देखें। Chrome Devtoos को खोलने या बंद करने पर यह पता लगाने में आपकी सहायता करता है।

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

यह एक्सटेंशन जावास्क्रिप्ट डिवेलपर्स को यह पता लगाने में मदद करता है कि क्रोम देवताओल चालू पेज पर खुला या बंद है। जब Chrome Devtools बंद / खुलता है, तो एक्सटेंशन window.document एलिमेंट पर 'devtoolsStatusChanged' नामक एक इवेंट बढ़ाएगा।

यह उदाहरण कोड है:

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

Answer 14

यहाँ कुछ उत्तर क्रोम 65 में काम करना बंद कर देंगे। यहाँ एक टाइमिंग अटैक विकल्प है जो क्रोम में काफी मज़बूती से काम करता है, और toString()विधि की तुलना में इसे कम करना बहुत कठिन है । दुर्भाग्य से यह फ़ायरफ़ॉक्स में विश्वसनीय नहीं है।

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);

});

Answer 15

Chrome / 77.0.3865.75 के रूप में 2019 का एक संस्करण काम नहीं करता है। । इंस्पेक्टर खोलने के बिना तुरंत इनवॉइस ।

const resultEl = document.getElementById('result')
const detector = function () {}

detector.toString = function () {
	resultEl.innerText = 'Triggered'
}

console.log('%c', detector)

<div id="result">Not detected</div>