Como faço para imprimir mensagens de depuração no Google Chrome JavaScript Console?
https://stackoverflow.com/questions/217957
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Como faço para imprimir mensagens de depuração no Google Chrome JavaScript Console?
Por favor note que o Console de JavaScript não é o mesmo que o depurador JavaScript; eles têm diferentes sintaxes AFAIK, de modo que o print comando em JavaScript Debugger não vai funcionar aqui. No Console JavaScript, print() irá enviar o parâmetro para a impressora.
Solução
A execução seguinte código na barra de endereços do navegador:
javascript: console.log(2);
imprime com sucesso mensagem para o "Console JavaScript" no Google Chrome.
Outras dicas
A melhoria na idéia de Andru, você pode escrever um script que cria funções do console se não existir:
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};
Em seguida, use qualquer um dos seguintes:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Estas funções irá registrar diferentes tipos de itens (que podem ser filtradas com base no registro, informação, erro ou avisar) e não irá causar erros ao console não está disponível. Essas funções irão trabalhar no Firebug e Chrome consoles.
Basta adicionar um recurso interessante que um monte de desenvolvedores perder:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
Este é o despejo %o mágica clicável e deep-navegável o conteúdo de um objeto JavaScript. %s foi mostrado apenas para um registro.
Além disso, este é legal também:
console.log("%s", new Error().stack);
O que dá um Java-like pilha de rastreamento para o ponto da invocação new Error() (incluindo caminho para o arquivo e número de linha !).
Ambos %o e new Error().stack estão disponíveis no Chrome e Firefox!
Também para rastreamentos de pilha em uso Firefox:
console.trace();
Como https://developer.mozilla.org/en-US / docs / web / API / console diz.
Happy Hacker!
Atualizar : Algumas bibliotecas são escritos por pessoas más que redefinem o objeto console para seus próprios propósitos. Para restaurar o console navegador original depois de carregamento da biblioteca, use:
delete console.log;
delete console.warn;
....
questão See Stack Overflow console.log Restaurar () .
Apenas um aviso rápida - se você quiser teste no Internet Explorer sem remover todos console.log () 's, você vai precisar usar Firebug Lite ou você vai ter alguns erros não particularmente amigável.
(ou criar o seu próprio console.log () que apenas retorna false.)
Aqui está um pequeno script que verifica se o console está disponível. Se não for, ele tenta carregar Firebug e se Firebug não está disponível ele carrega Firebug Lite. Agora você pode usar console.log em qualquer browser. Divirta-se!
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 de Delan Azabani resposta , eu gostaria de compartilhar minha console.js, e eu uso para o mesmo fim. Eu criar um console noop usando uma matriz de nomes de funções, o que na minha opinião é uma maneira muito conveniente para fazer isso, e eu cuidava 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);
}
}
Aqui está a minha consola invólucro classe. Isso me dá saída âmbito, bem como para tornar a vida mais fácil. Observe o uso de localConsole.debug.call() modo que localConsole.debug é executado no escopo da classe chamando, oferecendo acesso a 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 assim em Firebug :
In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}
Ou Chrome:
In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object
Pessoalmente eu uso isso, que é semelhante ao tarek11011 de:
// 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 idéia para pelo menos ter alguma prática de registrar que não seja apenas furando console.log() para a direita em seu código JavaScript, porque se você esquecer isso, e é em um local de produção, que pode potencialmente quebrar tudo do código JavaScript para essa página.
Você pode usar console.log() se você tem um código depurado no que editor de software de programação que você tem e você vai ver o resultado muito provavelmente o melhor editor para mim (Google Chrome). basta pressionar F12 e pressione a guia Console. Você vai ver o resultado. Feliz codificação. :)
Eu tive um monte de problemas com os desenvolvedores de verificação em seu console. () Declarações. E, eu realmente não gosto de depuração Internet Explorer, apesar das melhorias fantásticas de Internet Explorer 10 Visual Studio 2012 , etc.
Então, eu tenho substituído o próprio objeto de console ... Eu adicionei uma bandeira __localhost que só permite declarações de console quando em localhost. Eu também acrescentou console. () Para Internet Explorer (que exibe um alerta () em vez).
// 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 uso:
console.log("hello");
Chrome / Firefox:
prints hello in the console window.
Internet Explorer:
displays an alert with 'hello'.
Para aqueles que olhar atentamente para o código, você vai descobrir a função console.examine (). Eu criei isso anos atrás para que eu possa sair código de depuração em determinadas áreas em torno do produto para ajudar a solucionar QA / cliente. Por exemplo, eu deixaria a seguinte linha em algum código liberado:
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}
E, em seguida, a partir do produto liberado, digite o seguinte no console (ou barra de endereço com o prefixo 'javascript:'):
top.__examine_someLabel = true;
Então, vou ver todo o console.examine registrada () declarações. Tem sido uma ajuda fantástica muitas vezes.
Internet Explorer 7 e abaixo calço que preserva linha numeração para outros navegadores:
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
console.debug("");
Usando este método imprime o texto em uma cor azul brilhante no console.
Melhorar ainda mais nas idéias de Delan e Andru (que é por isso que 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 console.log ....
Você pode escrever um script que cria funções do console se não existir:
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
Em seguida, use qualquer um dos seguintes:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Estas funções irá registrar diferentes tipos de itens (que podem ser filtradas com base no registro, informação, erro ou avisar) e não irá causar erros ao console não está disponível. Essas funções irão trabalhar no Firebug e Chrome consoles.
