Como imprimir as mensagens de depuração na consola de JavaScript do Google Chrome?
por favor, note que a consola de JavaScript não é a mesma que o Depurador de JavaScript; eles têm sintaxes AFAIK diferentes, por isso o comando print no Depurador de JavaScript não irá funcionar aqui. Na consola de JavaScript, print()
irá enviar o parâmetro para a impressora.
15 answers
Executando o seguinte código a partir da barra de endereços do navegador:
javascript: console.log(2);
Imprime com sucesso a mensagem para a "consola JavaScript" no Google Chrome.
Melhorando a ideia do Andru, você pode escrever um script que cria funções de consola se elas não existirem:
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};
Então, use qualquer um dos seguintes:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Estas funções irão registar diferentes tipos de itens (que podem ser filtrados com base no registo, informação, erro ou aviso) e não irão causar erros quando a consola não estiver disponível. Estas funções funcionarão nos consoles Firebug e Chrome.
Basta adicionar uma funcionalidade fixe que muitos programadores sentem falta:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
Este é o conteúdo mágico de um objeto JavaScript. %s
foi mostrado apenas para um registro.
Também isto é fixe:
console.log("%s", new Error().stack);
Que dá um traço de pilha semelhante a Java ao ponto da Invocação {[[6]} (incluindo a localização do ficheiro e o número da linha !).
Ambos %o
e {[8] } estão disponíveis em cromado e Firefox!
Também para pilhas de vestígios na utilização do Firefox:
console.trace();
Como https://developer.mozilla.org/en-US/docs/Web/API/console diz.
Boa pirataria!UPDATE : algumas bibliotecas são escritas por pessoas más que redefinem o objeto console
para seus próprios propósitos. Para repor o navegador Original console
após carregar a biblioteca, use:
delete console.log;
delete console.warn;
....
Ver a questão do excesso de fluxo da pilha a restaurar consola.registo().
Apenas um aviso rápido-se você quiser testar no Internet Explorer sem remover toda a consola.log()'s, você vai precisar usar Firebug Lite ou você vai ter alguns erros não particularmente amigáveis.
(ou criar o seu próprio console.log () que apenas devolve falso.)
Aqui está um script curto que verifica se a consola está disponível. Se não estiver, Ele tenta carregar Firebug e se Firebug não estiver disponível ele carrega Firebug Lite. Agora você pode usar console.log
em qualquer navegador. Aproveite!
if (!window['console']) {
// Enable console
if (window['loadFirebugConsole']) {
window.loadFirebugConsole();
}
else {
// No console, use Firebug Lite
var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
if (F.getElementById(b))
return;
E = F[i+'NS']&&F.documentElement.namespaceURI;
E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
E[r]('id', b);
E[r]('src', I + g + T);
E[r](b, u);
(F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
E = new Image;
E[r]('src', I + L);
};
firebugLite(
document, 'createElement', 'setAttribute', 'getElementsByTagName',
'FirebugLite', '4', 'firebug-lite.js',
'releases/lite/latest/skin/xp/sprite.png',
'https://getfirebug.com/', '#startOpened');
}
}
else {
// Console is already available, no action needed.
}
Além da resposta de Delan Azabani , gosto de partilhar o meu console.js
, e uso para o mesmo propósito. Eu crio um console noop usando um array de nomes de funções, o que na minha opinião é uma maneira muito conveniente de fazer isso, e eu cuidei do Internet Explorer, que tem uma função console.log
, mas não console.debug
:
// Create a noop console object if the browser doesn't provide one...
if (!window.console){
window.console = {};
}
// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
if (!window.console.debug && typeof window.console.log !== 'undefined') {
window.console.debug = window.console.log;
}
}
// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
for (var i = 0; i < names.length; ++i){
if(!window.console[names[i]]){
window.console[names[i]] = function() {};
}
}
Ou use esta função:
function log(message){
if (typeof console == "object") {
console.log(message);
}
}
localConsole.debug.call()
para que localConsole.debug
corra no âmbito da classe chamadora, proporcionando acesso ao seu método toString
.
localConsole = {
info: function(caller, msg, args) {
if ( window.console && window.console.info ) {
var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
if (args) {
params = params.concat(args);
}
console.info.apply(console, params);
}
},
debug: function(caller, msg, args) {
if ( window.console && window.console.debug ) {
var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
if (args) {
params = params.concat(args);
}
console.debug.apply(console, params);
}
}
};
someClass = {
toString: function(){
return 'In scope of someClass';
},
someFunc: function() {
myObj = {
dr: 'zeus',
cat: 'hat'
};
localConsole.debug.call(this, 'someFunc', 'myObj: ', myObj);
}
};
someClass.someFunc();
Isto dá uma saída como esta em Firebug:
In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}
Ou Cromados:
In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object
Pessoalmente uso isto, que é semelhante ao tarek11011:
// Use a less-common namespace than just 'log'
function myLog(msg)
{
// Attempt to send a message to the console
try
{
console.log(msg);
}
// Fail gracefully if it does not exist
catch(e){}
}
O ponto principal é que é uma boa ideia pelo menos ter alguma prática de registro, além de apenas colar {[[1]} em seu código JavaScript, porque se você esquecer sobre isso, e está em um local de produção, ele pode potencialmente quebrar todo o código JavaScript para essa página.
Você poderia usar console.log()
se você tiver um código depurado em que editor de software de programação você tem e você verá o resultado provavelmente o melhor editor para mim (Google Chrome). Basta carregar em F12 e carregar na página da consola. Você verá o resultado. Feliz código. :)
// Console extensions...
(function() {
var __localhost = (document.location.host === "localhost"),
__allow_examine = true;
if (!console) {
console = {};
}
console.__log = console.log;
console.log = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__log === "function") {
console.__log(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__info = console.info;
console.info = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__info === "function") {
console.__info(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__warn = console.warn;
console.warn = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__warn === "function") {
console.__warn(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__error = console.error;
console.error = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__error === "function") {
console.__error(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__group = console.group;
console.group = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__group === "function") {
console.__group(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert("group:\r\n" + msg + "{");
}
}
};
console.__groupEnd = console.groupEnd;
console.groupEnd = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__groupEnd === "function") {
console.__groupEnd(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg + "\r\n}");
}
}
};
/// <summary>
/// Clever way to leave hundreds of debug output messages in the code,
/// but not see _everything_ when you only want to see _some_ of the
/// debugging messages.
/// </summary>
/// <remarks>
/// To enable __examine_() statements for sections/groups of code, type the
/// following in your browser's console:
/// top.__examine_ABC = true;
/// This will enable only the console.examine("ABC", ... ) statements
/// in the code.
/// </remarks>
console.examine = function() {
if (!__allow_examine) {
return;
}
if (arguments.length > 0) {
var obj = top["__examine_" + arguments[0]];
if (obj && obj === true) {
console.log(arguments.splice(0, 1));
}
}
};
})();
Exemplo de Utilização:
console.log("hello");
Cromado / Firefox:
prints hello in the console window.
Internet Explorer:
displays an alert with 'hello'.
Para aqueles que olham de perto para o código, vão descobrir a consola.função examine (). Eu criei isso anos atrás para que eu possa deixar o código de depuração em certas áreas ao redor do produto para ajudar a resolver problemas QA/problemas do cliente. Por exemplo, eu deixaria a seguinte linha em algum código lançado:
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}
E, em seguida, a partir do produto liberado, tipo o seguinte na consola (ou barra de endereço prefixada com ' javascript:'):
top.__examine_someLabel = true;
Então, vou ver toda a consola registada.examinar () declarações. Tem sido uma ajuda fantástica muitas vezes.
Simple Internet Explorer 7 and below shim that preserves line numbering for other browsers:
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
Melhorar ainda mais as ideias de Delan e Andru (razão pela qual esta resposta é uma versão editada); console.log é provável que exista enquanto as outras funções não podem, por isso tem o mapa padrão para a mesma função que console.log....
Pode escrever um programa que cria funções de consola se estas não existirem:
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || console.log; // defaults to log
console.error = console.error || console.log; // defaults to log
console.info = console.info || console.log; // defaults to log
Então, use qualquer um dos seguintes:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Estas funções irão registar diferentes tipos de itens (que podem ser filtrados com base no registo, informação, erro ou avisar) e não causará erros quando a consola não estiver disponível. Estas funções funcionarão nos consoles Firebug e Chrome.
Mesmo que esta pergunta seja antiga, e tenha boas respostas, eu quero fornecer uma atualização sobre outras capacidades de registro.
Também pode imprimir com grupos:
console.group("Main");
console.group("Feature 1");
console.log("Enabled:", true);
console.log("Public:", true);
console.groupEnd();
console.group("Feature 2");
console.log("Enabled:", false);
console.warn("Error: Requires auth");
console.groupEnd();
Que imprime:
Isto é suportado por todos os navegadores principais de acordo com esta página :