Chrome 콘솔이 열려 있는지 확인합니다.
Firebug가 열려 있는지 확인하기 위해 다음과 같은 작은 스크립트를 사용하고 있습니다.
if (window.console && window.console.firebug) {
//is open
};
그리고 잘 작동합니다.이제 구글 크롬의 내장 웹 개발자 콘솔이 열려 있는지 탐지할 방법을 찾기 위해 30분 동안 검색했지만 힌트를 찾을 수 없었습니다.
다음 항목:
if (window.console && window.console.chrome) {
//is open
};
작동하지 않습니다.
편집:
그래서 크롬 콘솔이 열려있는지 감지가 불가능할 것 같습니다.하지만 몇 가지 단점이 있는 "해크"가 작동합니다.
- 콘솔의 도킹을 해제하면 작동하지 않음
- 페이지 로드 시 콘솔이 열려 있으면 작동하지 않습니다.
그래서 저는 일단 Unsigned의 답을 선택할 것이지만, 만약 누군가가 멋진 아이디어를 생각해 낸다면, 그는 여전히 대답을 할 것이고, 저는 선택된 답을 변경할 것입니다!감사합니다!
역사적 맥락을 위해 이전 답변을 아래에 남깁니다.
디버거 (2022)
풀 프루프는 아니지만 다른 답변의 이 디버거 기반 접근 방식은 여전히 작동하는 것으로 보입니다.
애니메이션 프레임 요청(2019년 말)
현재 Muhammad Umer의 접근 방식은 Chrome 78에서 작동하며, 근접 이벤트와 공개 이벤트를 모두 감지할 수 있는 추가적인 이점이 있습니다.
함수 to String(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 openedregex to String(2017-2018)
원래의 질문자는 더 이상 존재하지 않는 것처럼 보이고 이것은 여전히 받아들여지는 대답이기 때문에 가시성을 위해 이 솔루션을 추가합니다.zswang의 답변에 대한 Antonin Hildebrand의 논평에 공을 돌립니다.이 솔루션은 다음과 같은 이점을 활용합니다.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 openedconsole.dll(2013)
console.profiles가 Chrome에서 제거되었습니다.이 솔루션은 더 이상 작동하지 않습니다.
프로파일러를 사용하여 Discover DevTools에서 이 솔루션을 지적해 준 Paul Irish에게 감사드립니다.
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.inner 높이(2011)
이 다른 옵션은 페이지 로드 후 도킹된 검사자가 열려 있는 것을 탐지할 수 있지만, 도킹되지 않은 검사자 또는 페이지 로드 시 검사자가 이미 열려 있는지는 탐지할 수 없습니다.또한 잘못된 긍정의 가능성도 있습니다.
window.onresize = function() {
if ((window.outerHeight - window.innerHeight) > 100) {
alert('Docked inspector was opened');
}
}크롬 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
"Element"를 인쇄할 때 Chrome 개발자 도구는 ID를 얻습니다.
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);매우 신뢰할 수 있는 해킹
기본적으로 getter on property를 설정하고 콘솔에 로그인합니다.콘솔이 열려 있을 때만 액세스할 수 있습니다.
https://jsfiddle.net/gcdfs3oo/44/
var checkStatus;
var indicator = document.querySelector('#devtool-status');
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);
indicator.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>DevTools가 열려 있을 때 감지하는 devTools-detect를 만들었습니다.
console.log('is DevTools open?', window.devtools.open);
이벤트를 들을 수도 있습니다.
window.addEventListener('devtoolschange', function (e) {
console.log('is DevTools open?', e.detail.open);
});
DevTools의 도킹을 해제하면 작동하지 않습니다.그러나 Chrome/Safari/Firefox DevTools 및 Firebug와 함께 작동합니다.
console.log(Object.defineProperties(new Error, {
message: {get() {alert('Chrome/Firefox')}},
toString: {value() {(new Error).stack.includes('toString@')&&alert('Safari')}}
}));
데모: https://jsbin.com/cateqeyono/edit?html,output
업데이트: ------
이것은 한동안 효과가 있었던 많은 훌륭한 답들이 있는 오래된 질문입니다.2022년 9월 5일 현재 최고의 답변은 @http-fong https://stackoverflow.com/a/68494829/275333 입니다.
그나저나, 제가 올린 이후로 제 답변은 여전히 똑같이 작동하고 있습니다, 항상 정확하게 만드는 것은 조금 어려울 뿐입니다.콘솔을 닫거나 연 상태에서 데모의 "수동 벤치마크" 링크를 클릭하면 항상 큰 차이가 있습니다.
----------------------
크롬 콘솔이 열렸는지 안 열렸는지 알 수 있는 방법을 찾았습니다.이것은 여전히 해킹이지만 훨씬 더 정확하고 콘솔이 도킹 해제되었는지 여부에 관계없이 작동할 것입니다.
기본적으로 콘솔을 닫은 상태에서 이 코드를 실행하면 약 100마이크로초가 소요되며 콘솔을 여는 동안 약 2배인 약 200마이크로초가 소요됩니다.
console.log(1);
console.clear();
(1밀리초 = 1000마이크로초)
저는 여기에 그것에 대해 더 많이 썼습니다.
데모 왔습니다.
솔루션에는 몇 가지 일반적인 클래스가 있습니다.
- devtools가 나타날 때 화면 크기를 감지하는 데 의존합니다(devtools/콘솔을 별도의 창으로 열면 작동하지 않습니다).
- 마우스 오른쪽 버튼 메뉴, F12, Ctrl+Shift+C 등의 devtools/콘솔을 불러올 수 있는 특정 사용자 작업을 가로채십시오.이것은 페이지에서 감지할 수 없는 브라우저 크롬에 있는 UI 메커니즘을 포함할 수 없습니다.
- 콘솔에 무언가를 기록하고 브라우저별 동작을 통해 게으르고 화려한 인쇄를 수행할 수 있습니다.역사적으로, 이것들은 그다지 신뢰할 수 없는 것처럼 보이지만, 멋지고 단순합니다.사용자가 동일한 검색 세션에서 반복적으로 작업하도록 하려면 어느 정도의 콘솔 스팸을 허용해야 합니다.
- 은 이밍휴사용다니합을과 합니다.
debugger진술.까다로운 부분은 이벤트 루프 대기열에서 장시간 실행되는 작업으로 인해 타이머가 엉망이 되지 않도록 하는 방법과 디버거 문이 실행되는 스레드의 실행을 일시 중지한다는 사실입니다.사용자가 사례별로 또는 모두 사용 안 함으로 일반 디버거 문을 비활성화할 수 있다는 문제도 있습니다.
다음은 구체적인 문제에 대한 나의 해결책입니다.debugger접근.즉, 주 스레드가 휴리스틱 타이머 사이에 긴 작업을 실행할 때 잘못된 긍정을 피합니다.debugger명령문이 주 스레드를 차단하지 못하도록 하고 디버거 명령문을 비활성화하지 못하도록 합니다.참고: 사용자가 모든 디버거 중단점을 비활성화하는 것을 막을 수 있는 방법은 없다고 생각하며, 그것이 최선일 것입니다.
작동 방식
devtools가 열려 있고 스레드가 디버깅 문을 발견하면 Chrome 브라우저가 디버깅을 시작합니다.
- 주 스레드가 웹 작업자 스레드로 메시지를 보냅니다.
- 작업자 스레드가 하트비트를 열어 응답합니다.
- 메인 스레드는 타이머를 시작하여 종료 하트비트를 예상함으로써 응답합니다.
- 스레드의 문으로 "" " " " " " " " " " " (" " " " " " " " " ( " " " " " " " 로 묶임)을 합니다.
eval사용자가 비활성화하지 못하도록 하는 문장). - devtools가 닫히면 작업자가 즉시 메인 스레드로 확인 메시지를 보내고, 메인 스레드는 devtools가 닫혔다는 결론을 내립니다.
- devtools가 열려 있으면 작업자가 디버깅 세션에 들어가고 기본 스레드는 작업자가 충분히 빨리 응답하지 않았다는 것을 알게 되어 디버거가 열려 있어야 한다는 결론을 내립니다.주 스레드는 작업자의 디버깅 세션에 의해 차단되지 않지만 이벤트 대기열의 주 스레드 앞에 있는 무거운 처리로 인해 시간 초과 응답이 차단됩니다.
저는 여기 GitHub에 레퍼런스 구현(제가 작성)과 데모를 게시했습니다.
장점
- 화면 크기 변경 탐지 접근 방식과 달리 콘솔이 별도의 창에 있을 때 작동합니다.
- 사용자 작업 가로채기 접근 방식과 달리 이는 콘솔을 불러오는 사용자 작업에 관계없이 작동합니다.
- 와는과 다르게 .
console.log접근 방식을 사용하면 메시지로 콘솔을 스팸 처리하지 않고 여러 개의 콘솔 열기 모드에서 작동할 수 있습니다. - 기본 타이머 디버거 접근 방식과 달리 탐지는 사용 중인 스레드(메인 스레드 또는 다른 작업자)로 인해 잘못된 긍정을 트리거하지 않아야 하며, 디버거 문은 메인 스레드 대신 작업자에 있으므로 메인 스레드가 차단되지 않으며, eval-debugger 문은 특정 디버거 문을 비활성화하지 않습니다.
단점
- 사용자는 모든 중단점을 비활성화할 수 있으며 이로 인해 이 탐지 방법이 비활성화됩니다.
- 내용 보안 정책을 통해 eval을 비활성화하는 사이트에서는 eval-lapped 디버거 문이 작동하지 않습니다. 이 경우 일반 디버거 문만 사용할 수 있습니다.
Chrome 89에서 새로운 방법이 작동한다는 것을 알게 되었습니다.
console.profile을 사용하여 Interval 및 function을 String으로 설정합니다.
var devtools = function() {};
devtools.toString = function() {
alert('NOPE!!')
return '-'
}
setInterval(()=>{
console.profile(devtools)
console.profileEnd(devtools)
}, 1000)
사파리에서는 작동하지 않습니다.
크롬 89 아래에서는 작동 여부를 확인할 수 없습니다.
Chrome 개발자 도구는 실제로 WebKit의 WebCore 라이브러리의 일부에 불과합니다.따라서 이 질문은 Safari, Chrome 및 기타 WebCore 소비자에게 적용됩니다.
솔루션이 존재하는 경우, WebKit 웹 검사기가 열려 있을 때와 닫혀 있을 때 DOM의 차이를 기반으로 합니다.불행하게도, 이것은 일종의 닭과 달걀 문제입니다. 왜냐하면 우리는 검사관이 문을 닫았을 때 DOM을 관찰하기 위해 검사관을 사용할 수 없기 때문입니다.
전체 DOM 트리를 덤프하기 위해 약간의 JavaScript를 작성할 수 있습니다.그런 다음 검사자가 열려 있을 때 한 번, 검사자가 닫혀 있을 때 한 번 실행합니다.DOM의 차이는 웹 검사자의 부작용일 수 있으며, 사용자가 검사 중인지 여부를 테스트하는 데 사용할 수 있습니다.
이 링크는 DOM 덤프 스크립트를 위한 좋은 시작이지만 전체를 덤프하고 싶을 것입니다.DOMWindow단순한 것이 아닌 객체document.
업데이트:
이제 방법이 있는 것 같습니다.Chrome Inspector 디텍터 확인
저는 이것에 대해 블로그 포스트를 썼습니다: 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 ?")
}
});
});
'탭' 권한으로 확장을 확인하는 까다로운 방법이 있습니다.
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){ ... })
var div = document.createElement('div');
Object.defineProperty(div,'id',{get:function(){
document.title = 'xxxxxx'
}});
setTimeout(()=>console.log(div),3000)
Muhammad Umer의 접근 방식은 저에게 효과가 있었고, 저는 React를 사용하고 있기 때문에 훅 솔루션을 만들기로 결정했습니다.
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>
);
}
이것이 리액트를 사용하는 모든 사람들에게 도움이 되길 바랍니다.이에 대해 확장을 원하는 사람이 있다면 무한 루프를 어느 시점(모든 구성 요소에서 사용하지 않기 때문에) 중지하고 콘솔을 청결하게 유지할 수 있는 방법을 찾고 싶습니다.
Javascript Detect Developer Tools 콘솔 열기
2022년 2월 2일부터 근무
- Chrome 버전 97(개발자 도구 도킹 해제/도킹/키보드 바로 가기)
- Edge 버전 97(개발자 도구 도킹 해제/도킹/키보드 바로 가기)
- FireFox 버전 96.0.03(개발자 도구)
도킹 해제됨/도크/키보드 바로 가기) - 사파리?
- FireBug 탐지(개발자 도구)
// Prevent Right Click (Optional)
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
}, true);
// DevTools Opened Script
function DevToolsOpened() {
alert("Developer Tools Opened");
}
// Detect DevTools (Chrome/Edge)
// https://stackoverflow.com/a/67148898/9498503 (SeongJun)
var devtools = function() {};
devtools.toString = function() {
DevToolsOpened();
return '-';
}
setInterval(()=>{
console.profile(devtools);
console.profileEnd(devtools);
if (console.clear) {
console.clear();
}
}, 1000);
// Detect DevTools (FireFox)
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
// Detect Resize (Chrome/Firefox/Edge Works) but (Triggers on Zoom In Chrome and Zoom Out FireFox)
window.onresize = function() {
if ((window.outerHeight - window.innerHeight) > 100 || (window.outerWidth - window.innerWidth) > 100) {
DevToolsOpened();
}
}
}
// Detect Fire Bug
if (window.console && window.console.firebug || console.assert(1) === '_firebugIgnore') {
DevToolsOpened();
};
// Detect Key Shortcuts
// https://stackoverflow.com/a/65135979/9498503 (hlorand)
window.addEventListener('keydown', function(e) {
if (
// CMD + Alt + I (Chrome, Firefox, Safari)
e.metaKey == true && e.altKey == true && e.keyCode == 73 ||
// CMD + Alt + J (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 74 ||
// CMD + Alt + C (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 67 ||
// CMD + Shift + C (Chrome)
e.metaKey == true && e.shiftKey == true && e.keyCode == 67 ||
// Ctrl + Shift + I (Chrome, Firefox, Safari, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 73 ||
// Ctrl + Shift + J (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 74 ||
// Ctrl + Shift + C (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 67 ||
// F12 (Chome, Firefox, Edge)
e.keyCode == 123 ||
// CMD + Alt + U, Ctrl + U (View source: Chrome, Firefox, Safari, Edge)
e.metaKey == true && e.altKey == true && e.keyCode == 85 ||
e.ctrlKey == true && e.keyCode == 85
) {
DevToolsOpened();
}
});브라우저의 DevTools가 열려 있으면 중단점을 비활성화하지 않는 한 'debugger;'로 표시된 중단점이 첨부됩니다.
다음은 디버거가 활성화되었는지 확인하는 코드입니다.
let workerUrl = 'data:application/javascript;base64,' + btoa(`
self.addEventListener('message', (e) => {
if(e.data==='hello'){
self.postMessage('hello');
}
debugger;
self.postMessage('');
});
`);
function checkIfDebuggerEnabled() {
return new Promise((resolve) => {
let fulfilled = false;
let worker = new Worker(workerUrl);
worker.onmessage = (e) => {
let data = e.data;
if (data === 'hello') {
setTimeout(() => {
if (!fulfilled) {
resolve(true);
worker.terminate();
}
}, 1);
} else {
fulfilled = true;
resolve(false);
worker.terminate();
}
};
worker.postMessage('hello');
});
}
checkIfDebuggerEnabled().then((result) => {
if (result) {
alert('browser DevTools is open');
}else{
alert('browser DevTools is not open, unless you have deactivated breakpoints');
}
});참고: CSP를 사용하는 경우 다음 중 하나를 추가해야 합니다.worker-src 'unsafe-inline'CSP 정책으로 이동하거나 위의 작업자 소스 코드를 CSP 허용 리소스로 이동 및 변경workerUrl그 자원으로.
또한 다음을 시도할 수 있습니다. 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);
});
만약 당신이 개발 중에 무언가를 하고 있는 개발자라면.이 Chrome 확장 버전을 확인하십시오.크롬 데브투스가 열렸거나 닫혔을 때를 감지할 수 있도록 도와줍니다.
Javascript 개발자가 현재 페이지에서 Chrome Devtools를 열거나 닫을 때 이 확장 기능을 사용하여 탐지할 수 있습니다.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
}
});
여기에 나와 있는 일부 답변은 Chrome 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);
});
Chrome/77.0.3865.75의 경우 2019 버전이 작동하지 않습니다. toString은 Inspector를 열지 않고 바로 호출됩니다.
const resultEl = document.getElementById('result')
const detector = function () {}
detector.toString = function () {
resultEl.innerText = 'Triggered'
}
console.log('%c', detector)<div id="result">Not detected</div> 패키지를 합니다.isDevToolsOpened()dev-tools-monitor 패키지의 기능으로 파이어폭스를 제외한 모든 브라우저에서 예상대로 작동합니다.
콘솔을 열 때마다 색상이 지정된 시작 메시지를 강제로 지정합니다.
// Force a colorized welcome message
// each time the console is opened.
(() => {
w = new Function()
w.toString = () => { (!this.z) ? console.log("%cWelcome to the console\n %cMaster password:\n %c window.password = ' ... ':", "color: white; font-size: 20px; background-color: blue", "color: white; font-size: 16px; background-color: red;margin 20px 0", "background: #222; color: #bada55") : this.z = true
}
console.log('%c', w)
})()이벤트 수신기를 여는 키보드 단축키에 추가하여 개발 도구를 여는 이벤트를 포착할 수 있습니다.이것은 "핵"이 아니며 100% 작동합니다.
사용자가 마우스를 사용하여 수동으로 열 때만 포착되지 않습니다.그래서 그것은 아마도 누군가에게 유용한 "부분적인 해결책"입니다.
<script>
function devToolsOpened(e){
alert("devtools opened");
// uncomment to prevent opening dev.tools:
// e.preventDefault();
}
window.addEventListener('keydown', function(e) {
if (
// CMD + Alt + I (Chrome, Firefox, Safari)
e.metaKey == true && e.altKey == true && e.keyCode == 73 ||
// CMD + Alt + J (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 74 ||
// CMD + Alt + C (Chrome)
e.metaKey == true && e.altKey == true && e.keyCode == 67 ||
// CMD + Shift + C (Chrome)
e.metaKey == true && e.shiftKey == true && e.keyCode == 67 ||
// Ctrl + Shift + I (Chrome, Firefox, Safari, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 73 ||
// Ctrl + Shift + J (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 74 ||
// Ctrl + Shift + C (Chrome, Edge)
e.ctrlKey == true && e.shiftKey == true && e.keyCode == 67 ||
// F12 (Chome, Firefox, Edge)
e.keyCode == 123 ||
// CMD + Alt + U, Ctrl + U (View source: Chrome, Firefox, Safari, Edge)
e.metaKey == true && e.altKey == true && e.keyCode == 85 ||
e.ctrlKey == true && e.keyCode == 85
){
devToolsOpened(e);
}
});
</script>
개발자 도구를 여는 바로 가기 키:
- 크롬: https://developers.google.com/web/tools/chrome-devtools/shortcuts
- 파이어폭스: https://developer.mozilla.org/hu/docs/Tools
- Safari: https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/KeyboardShortcuts/KeyboardShortcuts.html
- Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/shortcuts
타이밍 솔루션(도크 및 언도크에 사용 가능)
그것은 약간 거슬리기는 하지만 디버거 트랩만큼 많지는 않습니다.
var opened = false;
var lastTime = Date.now();
const interval = 50;
const threshold = 30;
setInterval(() => {
let delta = Date.now() - lastTime;
if (delta > interval + threshold) {
document.title = "P3nis";
opened = true;
}
lastTime = Date.now();
if (!opened) {
debugger;
}
}, interval)디버그 모드를 설정/해제하는 가장 좋은 방법은 플래그를 설정하는 것입니다.'debugMode'='off' - "로컬스토리지 -"에 저장됩니다.
localStorage.setItem('debugMode', 'off');
개발 중 브라우저의 Local Storage에서 수동으로 'on'으로 변경 -
그런 다음 코드에서 아래 조건을 사용하여 'ON' 상태일 경우 다른 작업을 수행합니다.
if(localStorage.getItem('debugMode') === 'on'){
//do something 1
}else {
//do something 2
}
언급URL : https://stackoverflow.com/questions/7798748/find-out-whether-chrome-console-is-open
'code' 카테고리의 다른 글
| 비인터랙티브 모드의 파워셸 (0) | 2023.08.11 |
|---|---|
| 선택적 문자열 확장자를 추가하는 방법은 무엇입니까? (0) | 2023.08.11 |
| ER 다이어그램이 Datagrip에 관계를 표시하지 않음 (0) | 2023.08.11 |
| MariaDB 연결이 임의로 실패하지만 계속 유지됨 (0) | 2023.08.11 |
| Oracle - 여러 개의 카운트를 하나의 쿼리로 반환 (0) | 2023.08.11 |