Comment imprimer des messages de débogage dans la console JavaScript de Google Chrome?
https://stackoverflow.com/questions/217957
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Comment puis-je imprimer les messages de débogage dans la console JavaScript de Google Chrome?
Veuillez noter que la console JavaScript n'est pas la même que le débogueur JavaScript; Les syntaxes sont différentes pour autant que je sache. Par conséquent, la commande print de JavaScript Debugger ne fonctionnera pas ici. Dans la console JavaScript, print () enverra le paramètre à l'imprimante.
La solution
Exécution du code suivant à partir de la barre d'adresse du navigateur:
javascript: console.log(2);
imprime avec succès le message sur la " Console JavaScript " dans Google Chrome.
Autres conseils
Pour améliorer l'idée d'Andru, vous pouvez écrire un script qui crée des fonctions de console si elles n'existent pas:
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};
Utilisez ensuite l'un des éléments suivants:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Ces fonctions consignent différents types d’éléments (qui peuvent être filtrés en fonction des journaux, des informations, des erreurs ou des avertissements) et ne provoquent pas d’erreurs lorsque la console n’est pas disponible. Ces fonctions fonctionneront dans les consoles Firebug et Chrome.
Ajoutez simplement une fonctionnalité intéressante qui manque à beaucoup de développeurs:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
Il s'agit du contenu magique % o dump pouvant être cliqué et parcouru en profondeur d'un objet JavaScript. % s était affiché uniquement pour un enregistrement.
Aussi, c'est cool aussi:
console.log("%s", new Error().stack);
Ce qui donne une trace de pile de type Java au point de l'invocation new Error () (y compris le chemin d'accès au fichier et le numéro de ligne !).
Les % o et les nouveaux Error (). stack sont disponibles dans Chrome et Firefox!
Pour les traces de pile dans Firefox également, utilisez:
console.trace();
As https://developer.mozilla.org/en-US / docs / Web / API / console , indique.
Joyeux piratage!
UPDATE : certaines bibliothèques sont écrites par des personnes malveillantes qui redéfinissent l'objet console à leurs propres fins. Pour restaurer la console du navigateur d'origine après le chargement de la bibliothèque, utilisez:
delete console.log;
delete console.warn;
....
Voir la question relative au dépassement de capacité Restauration du fichier console.log () .
Juste un petit avertissement: si vous souhaitez tester Internet & Explorer sans supprimer tous les consoles.log (), vous devez utiliser Firebug Lite ou vous obtiendrez des erreurs pas très conviviales.
(Ou créez votre propre console.log () qui renvoie simplement false.)
Voici un court script qui vérifie si la console est disponible. Si ce n'est pas le cas, il essaiera de charger Firebug et si Firebug n'est pas disponible il charge Firebug Lite. Vous pouvez maintenant utiliser console.log dans n’importe quel navigateur. Profitez!
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.
}
En plus de la réponse de Delan Azabani , j'aime partager mon console.js , et je l'utilise dans le même but. Je crée une console noop en utilisant un tableau de noms de fonctions, ce qui est à mon avis un moyen très pratique de le faire, et je me suis occupé d'Internet Explorer, qui possède une fonction console.log , mais non 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 utilisez cette fonction:
function log(message){
if (typeof console == "object") {
console.log(message);
}
}
Voici ma classe de wrapper de console. Cela me donne également une possibilité de rendre la vie plus facile. Notez l'utilisation de localConsole.debug.call () pour que localConsole.debug s'exécute dans l'étendue de la classe appelante, donnant accès à son toString méthode.
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();
Cela donne la sortie comme dans 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
Personnellement, j'utilise ceci, qui est similaire à celui de 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){}
}
Le point essentiel est qu’il est judicieux d’avoir au moins une pratique de la journalisation autre que de coller console.log () dans votre code JavaScript, car si vous l’oubliez, sur un site de production, il peut potentiellement détruire tout le code JavaScript de cette page.
Vous pouvez utiliser console.log () si vous avez un code débogué dans l'éditeur de logiciel de programmation que vous avez et vous verrez le résultat probablement le meilleur éditeur pour moi (Google Chrome). Appuyez simplement sur F12 et appuyez sur l'onglet Console. Vous verrez le résultat. Bonne codage. :)
J'ai eu beaucoup de problèmes avec les développeurs lors de la vérification de leurs instructions console. (). Et je n’aime vraiment pas le débogage d’Internet Explorer, malgré les améliorations fantastiques apportées par Internet & nbsp; Explorer 10 et Visual Studio & nbsp; 2012 , etc.
Donc, j'ai remplacé l'objet console lui-même ... J'ai ajouté un drapeau __localhost qui n'autorise que les instructions de la console lorsque localhost est installé. J'ai également ajouté des fonctions console. () À Internet & Explorer (qui affiche plutôt une alerte ()).
// 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));
}
}
};
})();
Exemple d'utilisation:
console.log("hello");
Chrome / Firefox:
prints hello in the console window.
Internet Explorer:
displays an alert with 'hello'.
Pour ceux qui s'intéressent de près au code, vous découvrirez la fonction console.examine (). J'ai créé cela il y a quelques années pour pouvoir laisser du code de débogage dans certaines zones autour du produit afin de résoudre les problèmes de Assurance qualité / problèmes clients. Par exemple, je laisserais la ligne suivante dans certains codes publiés:
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}
Ensuite, à partir du produit publié, tapez ce qui suit dans la console (ou dans la barre d'adresse précédée de "javascript:"):
top.__examine_someLabel = true;
Ensuite, je verrai toutes les instructions consignées console.examine (). C'est une aide fantastique à maintes reprises.
Simple Internet & nbsp; Explorer & nbsp; 7 et ci-dessous shim qui préserve la numérotation des lignes pour les autres navigateurs:
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
console.debug("");
L’utilisation de cette méthode permet d’imprimer le texte en bleu vif dans la console.
En approfondissant les idées de Delan et Andru (c’est pourquoi cette réponse est une version modifiée); console.log est susceptible d'exister alors que les autres fonctions ne le peuvent pas. Par conséquent, utilisez la mappe par défaut avec la même fonction que console.log ....
Vous pouvez écrire un script qui crée des fonctions de console si elles n'existent pas:
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
Utilisez ensuite l'un des éléments suivants:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Ces fonctions consignent différents types d’éléments (qui peuvent être filtrés en fonction des journaux, des informations, des erreurs ou des avertissements) et ne provoquent pas d’erreurs lorsque la console n’est pas disponible. Ces fonctions fonctionneront dans les consoles Firebug et Chrome.
