online - javascript console chrome
Descubre si la consola de Chrome está abierta (12)
toString (2017-2018)
Dado que el asker original ya no parece estar cerca y esta sigue siendo la respuesta aceptada, agregando esta solución para la visibilidad. El crédito va al comment Antonin Hildebrand sobre la answer zswang . Esta solución aprovecha el hecho de que toString() no se invoca en los objetos registrados a menos que la consola esté abierta.
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)
Actualización: console.profiles se ha eliminado de Chrome. Esta solución ya no funciona.
Gracias a Paul Irish por señalar esta solución de Discover DevTools , utilizando el generador de perfiles:
function isInspectOpen()
{
console.profile();
console.profileEnd();
if (console.clear) console.clear();
return console.profiles.length > 0;
}
window.innerHeight (2011)
Esta otra opción puede detectar que el inspector acoplado se abra, después de cargar la página, pero no podrá detectar un inspector desacoplado, o si el inspector ya estaba abierto en la carga de la página. También existe cierto potencial de falsos positivos.
window.onresize = function()
{
if ((window.outerHeight - window.innerHeight) > 100)
alert(''Docked inspector was opened'');
}
Estoy usando este pequeño script para averiguar si Firebug está abierto:
if (window.console && window.console.firebug) {
//is open
};
Y funciona bien Ahora estaba buscando media hora para encontrar una forma de detectar si la consola de desarrollador web incorporada de Google Chrome está abierta, pero no pude encontrar ninguna pista.
Esta:
if (window.console && window.console.chrome) {
//is open
};
no funciona
EDITAR:
Parece que no es posible detectar si la consola de Chrome está abierta. Pero hay un " hack " que funciona, con algunos inconvenientes:
- no funcionará cuando la consola esté desacoplada
- no funcionará cuando la consola esté abierta en la carga de la página
Por lo tanto, voy a elegir la respuesta de Unsigned por ahora, pero si a alguien1 se le ocurre una idea brillante, ¡es bienvenido para responder y cambiar la respuesta seleccionada! ¡Gracias!
Algunas respuestas aquí dejarán de funcionar en Chrome 65. Aquí hay una alternativa de ataque de tiempo que funciona bastante confiablemente en Chrome, y es mucho más difícil de mitigar que el método toString() . Desafortunadamente no es tan confiable en 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);
});
Chrome 65+ (2018)
r = /./
r.toString = function () {
document.title = ''1''
}
console.log(''%c'', r);
demo: https://jsbin.com/cecuzeb/edit?output (Actualización al 2018-03-16)
paquete: https://github.com/zswang/jdetects
Al imprimir "Element", las herramientas de desarrollo de Chrome obtendrán su id.
var checkStatus;
var element = document.createElement(''any'');
element.__defineGetter__(''id'', function() {
checkStatus = ''on'';
});
setInterval(function() {
checkStatus = ''off'';
console.log(element);
console.clear();
}, 1000);
Otra versión (de los comentarios)
var element = new Image();
Object.defineProperty(element, ''id'', {
get: function () {
/* TODO */
alert(''囧'');
}
});
console.log(''%cHello'', element);
Imprime una variable regular:
var r = /./;
r.toString = function() {
document.title = ''on'';
};
console.log(r);
Encontré una manera de saber si la consola de Chrome está abierta o no. Todavía es un truco, pero es mucho más preciso y funcionará cuando la consola esté desacoplada o no.
Básicamente ejecutar este código con la consola cerrada toma aproximadamente ~ 100 microsegundos y mientras la consola se abre, tarda aproximadamente el doble de ~ 200 microsegundos.
console.log(1);
console.clear();
(1 milisegundo = 1000 microsegundos)
He escrito más sobre esto here .
Demo está here .
Actualizar:
@zswang ha encontrado la mejor solución actual: compruebe su respuesta
Escribí una publicación en el blog sobre esto: http://nepjua.org/check-if-browser-console-is-open/
Puede detectar si está atracado o desacoplado
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 ?")
}
});
});
Hay una forma complicada de verificar las extensiones con el permiso ''pestañas'':
chrome.tabs.query({url:''chrome-devtools://*/*''}, function(tabs){
if (tabs.length > 0){
//devtools is open
}
});
También puedes verificar si se abre para tu página:
chrome.tabs.query({
url: ''chrome-devtools://*/*'',
title: ''*example.com/your/page*''
}, function(tabs){ ... })
Las herramientas para desarrolladores de Chrome son solo una parte de la biblioteca WebCore de WebKit. Entonces, esta pregunta se aplica a Safari, Chrome y cualquier otro consumidor de WebCore.
Si existe una solución, se basará en una diferencia en el DOM cuando el inspector web WebKit esté abierto y cuando esté cerrado. Desafortunadamente, este es un tipo de problema de huevo y gallina porque no podemos usar el inspector para observar el DOM cuando el inspector está cerrado.
Lo que puede hacer es escribir un poco de JavaScript para volcar todo el árbol DOM. Luego ejecútelo una vez cuando el inspector esté abierto, y una vez cuando el inspector esté cerrado. Cualquier diferencia en el DOM es probablemente un efecto secundario del inspector web, y podemos usarlo para probar si el usuario está inspeccionando o no.
Este link es un buen comienzo para una secuencia de comandos de dumping DOM, pero querrá volcar todo el objeto DOMWindow , no solo el document .
Actualizar:
Parece que hay una manera de hacer esto ahora. Echa un vistazo al Detector de Inspector de Chrome
Muy confiable hack
Básicamente establecer un getter en la propiedad e iniciar sesión en la consola. Aparentemente solo se accede a la cosa cuando la consola está abierta.
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);
});
Si son desarrolladores que están haciendo cosas durante el desarrollo. Mira esta extensión de Chrome. Te ayuda a detectar cuándo Chrome Devtoos se abre o se cierra.
Esta extensión ayuda a los desarrolladores de Javascript a detectar cuándo Chrome Devtools está abierto o cerrado en la página actual. Cuando Chrome Devtools se cierra / abre, la extensión generará un evento llamado ''devtoolsStatusChanged'' en el elemento window.document.
Este es un código de ejemplo:
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
}
});
Si su objetivo es bloquear las herramientas de desarrollo, intente esto (encontré una versión más complicada en un lugar donde el código JS estaba ofuscado, es muy molesto):
setTimeout(function() {while (true) {eval("debugger");}}, 0);
También puedes probar esto: 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);
});
devtools-detect que detecta cuando DevTools está abierto:
console.log(''is DevTools open?'', window.devtools.open);
También puedes escuchar un evento:
window.addEventListener(''devtoolschange'', function (e) {
console.log(''is DevTools open?'', e.detail.open);
});
No funciona cuando DevTools está desacoplado. Sin embargo, funciona con Chrome / Safari / Firefox DevTools y Firebug.