Comment puis-je imprimer les messages de débogage dans la console Google Chrome JavaScript?
Comment puis-je imprimer les messages de débogage dans la console Google Chrome JavaScript?
Veuillez noter que la console JavaScript n'est pas la même chose que le débogueur JavaScript; Les syntaxes sont différentes pour autant que je sache. Par conséquent, la commande print dans le débogueur JavaScript ne fonctionnera pas ici. Dans la console JavaScript, print() enverra le paramètre à l'imprimante.
Exécution du code suivant à partir de la barre d’adresse du navigateur:
javascript: console.log (2);
imprime avec succès le message à la "console JavaScript" dans Google Chrome.
En améliorant 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(){};
Ensuite, utilisez l’un des éléments suivants:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Ces fonctions consigneront différents types d’éléments (qui peuvent être filtrés en fonction du journal, des informations, des erreurs ou des avertissements) et ne causeront pas d’erreurs si 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);
Ceci est le contenu magique %o dump cliquable et pouvant être 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 du fichier et le numéro de ligne !).
%o et new Error().stack sont tous deux disponibles dans Chrome et Firefox!
Également pour les traces de pile dans Firefox, utilisez:
console.trace();
Comme https://developer.mozilla.org/en-US/docs/Web/API/console dit.
Bonne piratage!
UPDATE: Certaines bibliothèques sont écrites par de mauvaises personnes, ce qui redéfinit l'objet console à leurs propres fins. Pour restaurer le navigateur d'origine console après avoir chargé la bibliothèque, utilisez:
delete console.log;
delete console.warn;
....
Voir la question relative au dépassement de capacité restauration de console.log ().
Voici un court script qui vérifie si la console est disponible. Si ce n'est pas le cas, il essaie 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. Prendre plaisir!
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.
}
Juste un petit avertissement - si vous voulez tester dans Internet Explorer sans supprimer tous les consoles.log (), vous devrez utiliser Firebug Lite ou vous obtiendrez des erreurs pas très amicales.
(Ou créez votre propre console.log () qui ne retourne que false.)
En plus de réponse de Delan Azabani , j'aime partager mon console.js et je l'utilise aux mêmes fins. 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 a une fonction console.log, mais pas 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 wrapper de la 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 à sa méthode 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();
Cela donne une 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){}
}
L’essentiel est que c’est une bonne idée d’avoir au moins une pratique d’enregistrement autre que de coller console.log() directement dans votre code JavaScript, car si vous l’oubliez, et que cela se trouve sur un site de production, cela tout le code JavaScript pour 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 déboguer Internet Explorer, malgré les améliorations fantastiques de Internet Explorer 1 et Visual Studio 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 regardent attentivement le code, vous découvrirez la fonction console.examine (). J'ai créé cela il y a quelques années afin de pouvoir laisser du code de débogage dans certaines zones autour du produit afin de faciliter le dépannage de QA /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 vais voir toutes les instructions consignées console.examine (). Cela a été une aide fantastique à plusieurs reprises.
Simple Internet Explorer 7 et inférieur 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("");
Cette méthode permet d’imprimer le texte en bleu vif dans la console.
Améliorer 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, réglez la carte par défaut sur 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
Ensuite, utilisez l’un des éléments suivants:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Ces fonctions consigneront différents types d’éléments (qui peuvent être filtrés en fonction du journal, des informations, des erreurs ou des avertissements) et ne causeront pas d’erreurs si la console n’est pas disponible. Ces fonctions fonctionneront dans les consoles Firebug et Chrome.