Команды отладки Javascript — вы можете использовать только Console.log()?
Объект Console обеспечивает доступ к консоли браузера (например, веб-консоли Firefox). В разных браузерах он работает по-разному, но вот некоторые особенности интерфейса, предоставляемые Metropolis.
Доступ к объекту Console можно получить в любом глобальном объекте, таком как Window, WorkerGlobalScope, а также в специальных определениях, предоставленных через инструментальные средства свойств.
Он определяется браузером как Window.Console и может также вызываться простой консолью.
Наиболее распространенным методом являетсяConsole.log(), это вывод в консоли. Когда я впервые начал изучать интерфейс, я увидел, что все его используют.Console.log(), почти не виделConsoleдругое использование , этоConsoleНеужели другого применения нет? После проверкиConsoleОн по-прежнему очень мощный, а почему он редко используется, его можно удалить, потому что он использовался. запишите это здесьConsoleдругие виды использования .
Примечание: потому чтоОбъект Console обеспечивает доступ к консоли браузера.Поэтому поддержка и представление в разных браузерах может быть разным, но только наши разработчики могут видеть содержимое отладки, поэтому достаточно убедиться, что среда разработки может использовать эти методы.Chromeвышеуказанный эффект.
Вывод классификации
Вывод разных категорий информации
console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('错误信息');групповой вывод
использоватьConsole.group()а такжеConsole.groupEnd()Содержимое группы пакетов.
также можно использоватьConsole.groupCollapsed()заменитьConsole.group()Создание свернутых групп.
console.group('第一个组');
console.log("1-1");
console.log("1-2");
console.log("1-3");
console.groupEnd();
console.group('第二个组');
console.log("2-1");
console.log("2-2");
console.log("2-3");
console.groupEnd();Console.group()также может быть вложенным
console.group('第一个组');
console.group("1-1");
console.group("1-1-1");
console.log('内容');
console.groupEnd();
console.groupEnd();
console.group("1-2");
console.log('内容');
console.log('内容');
console.log('内容');
console.groupEnd();
console.groupEnd();
console.groupCollapsed('第二个组');
console.group("2-1");
console.groupEnd();
console.group("2-2");
console.groupEnd();
console.groupEnd();Табличный вывод
использоватьconsole.table()Входящий объект или массив можно вывести в виде таблицы. Подходит для аккуратно расположенных элементов
var Obj = {
Obj1: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj2: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj3: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj4: {
a: "aaa",
b: "bbb",
c: "ccc"
}
}
console.table(Obj);
var Arr = [
["aa","bb","cc"],
["dd","ee","ff"],
["gg","hh","ii"],
]
console.table(Arr);Просмотр объектов
использоватьConsole.dir()Отображает все свойства и методы объекта
в ChromeConsole.dir()а такжеConsole.log()тот же эффект
var CodeDeer = {
nema: 'CodeDeer',
blog: 'www.xluos.com',
}
console.log("console.dir(CodeDeer)");
console.dir(CodeDeer);
console.log("console.log(CodeDeer)");
console.log(CodeDeer);
Просмотр узлов
использоватьConsole.dirxml()Отображает все свойства и методы объекта
в ChromeConsole.dirxml()а такжеConsole.log()тот же эффект
Информация об узле логотипа домашней страницы Baidu
Условный вывод
использоватьconsole.assert(), может выполнять условный вывод.
- Когда первый параметр или возвращаемое значение истинно, не выводить содержимое.
- Когда первый параметр или возвращаемое значение ложно, выведите следующее содержимое и создайте исключение
console.assert(true, "你永远看不见我");
console.assert((function() { return true;})(), "你永远看不见我");
console.assert(false, "你看得见我");
console.assert((function() { return false;})(), "你看得见我");
выходной счет
использоватьConsole.count()Вывод содержимого и количество вызовов
(function () {
for(var i = 0; i < 3; i++){
console.count("运行次数：");
}
})()Отследить стек вызовов
использоватьConsole.trace()Чтобы отслеживать процесс вызываемой функции, в сложных проектах очень много процессов вызова, используйте эту команду, чтобы помочь вам разобраться.
function add(a, b) {
console.trace("Add function");
return a + b;
}
function add3(a, b) {
return add2(a, b);
}
function add2(a, b) {
return add1(a, b);
}
function add1(a, b) {
return add(a, b);
}
var x = add3(1, 1);Функция синхронизации
использоватьConsole.time()а такжеConsole.timeEnd()Оберните фрагмент кода, который необходимо синхронизировать, и выведите событие, которое запускает код.
-
Console.time()Параметры в уникальны как идентификатор таймера. -
Console.timeEnd()параметр, чтобы завершить таймер для этого идентификатора и вернуть прошедшее время в миллисекундах. - Одновременно работает до 10 000 таймеров.
console.time("Chrome中循环1000次的时间");
for(var i = 0; i < 1000; i++)
{
}
console.timeEnd("Chrome中循环1000次的时间");
анализ производительности
использоватьConsole.profile()а такжеConsole.profile()Выполните анализ производительности и проверьте время, затрачиваемое каждой частью кода, но я не нашел, где просмотреть отчеты об анализе, сгенерированные этими двумя методами, в инструменте отладки, который поставляется с Chrome. Должны потребоваться другие инструменты отладки.
Конкретная ссылка здесь:
www.oschina.net/transl...
Забавный Console.log()
Наконец, давайте представим мощныйConsole.log(), Этот метод имеет множество применений (использование других методов вывода, таких как error() и т. д., может использоваться со ссылкой на log()).
1. Оперативный вывод
Добавьте оперативную информацию перед выходными объектами и переменными, чтобы повысить узнаваемость
var ans = 12345;
console.log("这是临时变量ans的值：",ans);2. Форматированный вывод
| Заполнитель | имея в виду |
|---|---|
| %s | строковый вывод |
| %d or %i | Целочисленный вывод |
| %f | вывод с плавающей запятой |
| %o | Выводить объекты javascript, которые могут быть целыми числами, строками и данными JSON. |
Пример:
var arr = ["小明", "小红"];
console.log("欢迎%s和%s两位新同学",arr[0],arr[1]);
console.log("圆周率整数部分：%d，带上小数是：%f",3.1415,3.1415);3. Пользовательский стиль
использовать%cОпределите стиль для содержимого печати и добавьте его перед выходной информацией.%c, а затем стандартный стиль CSS, вы можете добавить стили к выходной информации
console.log("%cMy stylish message", "color: red; font-style: italic");
console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');Суммировать
Есть много применений Console, некоторые из которых очень практичны в процессе отладки, что может сэкономить много времени. Я, конечно, знаю, что отлаживать лучше с брейкпойнтами, но "метод printf" тоже очень полезен для мелких задач (смешная мордашка).