Как мне печатать отладочные сообщения в консоли JavaScript Google Chrome?
https://stackoverflow.com/questions/217957
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Как мне печатать отладочные сообщения в консоли JavaScript Google Chrome?
Пожалуйста, обратите внимание, что консоль JavaScript - это не то же самое, что отладчик JavaScript;у них разный синтаксис AFAIK, так что Печать команда в отладчике JavaScript здесь работать не будет.В консоли JavaScript, print() отправит параметр на принтер.
Решение
Выполнение следующего кода из адресной строки браузера:
javascript: console.log(2);
успешно распечатывает сообщение в " Консоль JavaScript " в Google Chrome.
Другие советы
Продолжая идею Андру, вы можете написать сценарий, который создает консольные функции, если они не существуют:
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};
Затем используйте любое из следующего:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Эти функции будут регистрировать различные типы элементов (которые могут быть отфильтрованы на основе журнала, информации, ошибки или предупреждения) и не будут вызывать ошибки, когда консоль недоступна. Эти функции будут работать в консолях Firebug и Chrome.
Просто добавьте интересную функцию, которую многие разработчики упускают:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
Это волшебный контент % o dump , доступный для просмотра и глубокого просмотра объекта JavaScript. % s был показан только для записи.
И это тоже круто:
console.log("%s", new Error().stack);
Который дает трассировку Java-подобного стека до точки вызова new Error () (включая путь к файлу и номер строки !).
В Chrome и Firefox доступны % o и new Error (). stack !
Также для трассировки стека в Firefox:
console.trace();
As https://developer.mozilla.org/en-US / docs / Web / API / console говорит.
Счастливого взлома!
ОБНОВЛЕНИЕ . Некоторые библиотеки написаны плохими людьми, которые переопределяют объект console для своих собственных целей. Чтобы восстановить исходную консоль браузера после загрузки библиотеки, используйте:
delete console.log;
delete console.warn;
....
См. вопрос о переполнении стека Восстановление console.log () .
Просто быстрое предупреждение - если вы хотите протестировать в Internet & nbsp; Explorer, не удаляя все console.log (), вам нужно использовать Firebug Lite , иначе вы получите не совсем дружелюбные ошибки.
(Или создайте свой собственный console.log (), который просто возвращает false.)
Вот краткий скрипт, который проверяет, доступна ли консоль. Если это не так, он пытается загрузить Firebug , и если Firebug недоступен он загружает Firebug Lite. Теперь вы можете использовать console.log в любом браузере. Наслаждайтесь!
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.
}
В дополнение к ответу Делана Азабани я также хочу поделиться своим console.js , и я использую для той же цели. Я создаю консоль noop, используя массив имен функций, что, на мой взгляд, является очень удобным способом сделать это, и я позаботился об Internet Explorer, который имеет функцию console.log , но нет 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() {};
}
}
Или используйте эту функцию:
function log(message){
if (typeof console == "object") {
console.log(message);
}
}
Вот мой класс оболочки консоли. Это дает мне возможность выхода из области видимости, чтобы облегчить жизнь. Обратите внимание на использование localConsole.debug.call () , чтобы localConsole.debug выполнялся в области вызывающего класса, предоставляя доступ к его 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();
Это выводит примерно так в Firebug :
In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}
Или Chrome:
In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object
Лично я использую это, которое похоже на 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){}
}
Суть в том, что хорошей идеей является, по крайней мере, немного попрактиковаться в регистрации, а не просто вставлять console.log () прямо в код JavaScript, потому что если вы забудете об этом, и он находится на производственном сайте, он может нарушить весь код JavaScript для этой страницы.
Вы можете использовать console.log () , если у вас есть отлаженный код в редакторе программного обеспечения, который у вас есть, и вы увидите вывод, который, скорее всего, лучший для меня (Google Chrome). Просто нажмите F12 и откройте вкладку Консоль. Вы увидите результат. Удачного кодирования. :)
У меня было много проблем с проверкой разработчиками своей консоли.() инструкции.И мне действительно не нравится отладка Internet Explorer, несмотря на фантастические улучшения Internet Explorer 10 и Visual Studio 2012, и т.д.
Итак, я переопределил сам консольный объект...Я добавил флаг __localhost, который разрешает консольные инструкции только при использовании localhost.Я также добавил функции console.() в Internet Explorer (вместо этого отображается предупреждение ()).
// 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));
}
}
};
})();
Пример использования:
console.log("hello");
Chrome/Firefox:
prints hello in the console window.
Internet Explorer ( Обозреватель Интернета):
displays an alert with 'hello'.
Для тех, кто внимательно изучит код, вы откроете для себя функцию console.examine().Я создал это несколько лет назад, чтобы иметь возможность оставлять отладочный код в определенных областях продукта для устранения неполадок QA/ проблемы клиентов.Например, я бы оставил следующую строку в каком-нибудь выпущенном коде:
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}
А затем из выпущенного продукта введите следующее в консоль (или в адресную строку с префиксом "javascript:"):
top.__examine_someLabel = true;
Затем я увижу все зарегистрированные инструкции console.examine().Это было фантастической помощью много раз.
Простой Internet & nbsp; Explorer & nbsp; 7 и ниже shim , которая сохраняет нумерацию строк для других браузеров:
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
console.debug("");
При использовании этого метода печатается текст ярко-синего цвета в консоли.
Дальнейшее улучшение идей Делана и Андру (именно поэтому этот ответ является отредактированной версией); console.log, вероятно, существует, в то время как другие функции могут не существовать, поэтому по умолчанию сопоставьте с той же функцией, что и console.log ....
Вы можете написать скрипт, который создает консольные функции, если они не существуют:
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
Затем используйте любое из следующего:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Эти функции будут регистрировать различные типы элементов (которые могут быть отфильтрованы на основе журнала, информации, ошибки или предупреждения) и не будут вызывать ошибки, когда консоль недоступна. Эти функции будут работать в консолях Firebug и Chrome.
