Консоль должна быть артефактом, без которого большинство фронтенд-разработчиков не могут обходиться без ежедневной разработки и отладки. Тем не менее, консоль по-прежнему имеет много неизвестных свойств и методов, которые облегчают вам использование, в том числе некоторые скрытые ямы (console.logошибка печати объекта #feature)...
* В этой статье обсуждается консоль в инструментах разработки Chrome, другие браузеры могут иметь другую производительность, эта статья не распространяется
* Вопросы печати объектов описаны в конце этой статьи.Нажмите, чтобы прыгнуть

Попробуйте сначала!

Прежде чем мы начнем, давайте построим Марио!
Откройте консоль инструментов разработчика, скопируйте и вставьте приведенный ниже код и нажмите Enter!

!(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? null : (function() {
    var args = [],  eightBitHack = [], coordinates = ["41n8r2", "42t3wu", "449u8a", "4h4014", "4h2c4y", "4g6ia1", "4286dm", "447r6w", "4fudcv", "61z2xp", "70rmyd", "71sfq1", "6zgplp", "42spfv", "4frvnp", "61wzpd"];
    for (var row = coordinates.length; row--;) {
        var decompressedRow = parseInt(coordinates[row], 36).toString(5).split('');
        coordinates[row] = decompressedRow.splice(1, decompressedRow.length-1);
        for (var cell = coordinates[row].length; cell--;) {
            var dot = parseInt(coordinates[row][cell]);
            var color = dot === 4 ? '#ecd585' : dot === 3 ? '#e1c25b' : dot === 2 ? '#805936' : dot ? '#ec2733' : '#fff';
            args.unshift("border: 8px solid color;".replace('color', color));
            eightBitHack.unshift("%c");
        }
        eightBitHack.unshift("\n");
    }
    eightBitHack.push("%c\n\n\n", "\nIt's me, Mario!", "\nmade by %chttps://twitter.com/aristretto");
    args.push("font-weight: bold;", "font-weight: bold; color: teal;");
    args.unshift(eightBitHack.join(''));
    console.log.apply(console, args);
})();

Как видите, на консоли появляется красочный Марио.

В основном с помощью следующих команд для достижения:console.log('%c','/*css*/');

*Конечно, есть и другие методы обработки трюков, подробности см.Ссылка автора

Продвинутый консольный геймплей

Как видно из приведенного выше примера, в консоли по-прежнему есть много продвинутых способов игры, о которых мы не знаем, таких как вывод лучшего формата и использование некоторых трюков, чтобы сделать нашу отладку более эффективной.

Console API

Введите в консолиconsole.Видно, что в консоли есть много методов, которые можно вызывать, и описаний ресурсов в Интернете много, в этот раз упомянуто лишь несколько полезных API.

console.log(object[,object,...])

console.logВ дополнение к распространенной передаче результата, который необходимо вывести непосредственно в первый параметр, существуют также следующие варианты использования:

Используйте запятые для разделения, передачи нескольких параметров и вывода
При выводе каждая запятая будет автоматически заменена пробелом

console.log('Hello','world!\t','Current Time:',Date.now());
// Hello world!	Current Time: 1530694211342

Используйте вывод спецификатора, аналогичный C++.printфункция
кроме общего%s(нить),%i``%d(оба целые),%fКроме того, он также поддерживает%c(стиль),%o(элемент ДОМ),%O(объект JavaScript) вывод

console.log('Hello world!\t%s: %i','Current Time',Date.now());
console.log("normal text,%c large blue text,%c white text with black background ", "color: blue; font-size: x-large","color:white;background:black;");
console.log('%o\n%O',document,{a:1,b:2,c:3});

Вывод приведенного выше кода показан на следующем рисунке:

console.count

Запись вызовов на одной линии с одним и тем же ярлыкомcount()количество раз, доступное для некоторыхsetIntervalИли отладка, при которой событие срабатывает неоднократно.

const fn = function(name){
    console.count(name);
};
fn('Bob');      // Bob: 1
fn('John');     // John: 1
fn('Bob');      // Bob: 2
fn('Bob');      // Bob: 3

console.error console.trace

Вывести сообщение с информацией о стеке о том, где был вызван метод. Разница в том,errorустановит сообщение в неправильном стиле.

(()=>{
    const fn1 = (fn)=>{
        fn();
    };
    const fn2 = ()=>{
        console.trace('Target Not Found');
        console.error('Target Not Found');
    };
    fn1(fn2);
})();

Вывод приведенного выше кода показан на следующем рисунке:

console.time timeEnd

Запустите новый таймер с соответствующей меткой. вызов с тем же ярлыкомconsole.timeEnd(), таймер остановится, а прошедшее время отобразится в консоли. Значения таймера имеют точность до миллисекунд. перейти кtime()а такжеtimeEnd()Строки должны совпадать, иначе таймер не остановится.
Может использоваться для анализа времени, затрачиваемого на выполнение определенного фрагмента кода.

console.time('test');
for(let i = 0; i < 100000000; i++){}
console.timeEnd('test');
// 输出：
// test: 122.71923828125ms

Others

Кроме того, существует множество полезных консольных API, таких какconsole.table,console.group,console.assertЖдать. Доступно в ChromeConsole APIНайдите их использование в документации.

Command Line API

Попробуйте это в непредставленномjQueryа такжеzeptoВ консоли страницы напрямую введите$,?Что появится?

// 直接打开控制台输入
console.log($,?);
// 输出：
// ƒ $(selector, [startNode]) { [Command Line API] } ƒ ?(selector, [startNode]) { [Command Line API] }

Видно, что выходная функция содержит[Command Line API].Command Line APIпредставляет собой набор удобных функций, предоставляемых консолью, примерно включая: выбор и проверку элементов DOM, отображение данных в читаемом формате, остановку и запуск анализаторов и мониторинг событий DOM.
* Примечание 1: Этот тип API можно получить только через саму консоль, и при включении такого кода в код JS будет сообщено об ошибке.
* Примечание 2: Если метод с таким же именем был переопределен глобально, такой метод будет переопределен.

$, ?

$(selector)Эквивалентноdocument.querySelector,такой же,$(selector)Эквивалентноdocument.querySelectorAll.Command Line APIЭто просто обеспечивает более быстрый способ отладки для разработчиков.

$0-$4

$0,$1,$2,$3а также$4Команда используется в качестве исторической справки для последних пяти элементов DOM, проверенных на панели «Элементы», или последних пяти объектов кучи JavaScript, выбранных на панели «Профили».$0Возвращает последний выбранный элемент или объект JavaScript,$1Возвращает элементы или объекты, выбранные только перед самыми последними, и так далее.
Следующий результат является результатом последовательного нажатия тега html, тега заголовка и метатега на тестовой странице:

others

Кроме того, существует множество полезных API-интерфейсов командной строки, таких какcopy,debug,monitor,profileЖдать. Доступно в ChromeCommand Line APIНайдите их использование в документации.

консольная яма

Рассмотрим вывод следующего кода в консоли:

const fn = function(length){
    const o = {
        arr: [],
        key1: 'test',
        key2: 'test',
        key3: 'test',
        key4: 'test',
        key5: 'test',
        index: 0
    };
    console.log(JSON.stringify(o));
    console.log(o);
    console.log('Handling data');
    for(let i = 0; i < length; i++){
        o.arr.push(i);
    }
    o.index = length;
    console.log(JSON.stringify(o));
    console.log(o);
};
fn(5);

Нетрудно заметить, что результат вывода в консоль должен быть таким:

В этот момент, если мы расширим вторую и пятую строки, мы обнаружим очень странное явление:

Разверните вторую строку и обнаружите, что длина в arr равна 5, а значение индекса объекта на самом деле равно 5!

Проблема расчета задержки

Чтобы найти указанную выше проблему, просто наведите указатель мыши на синюю информационную отметку в конце строки, и консоль предложит следующее:
Value below was evaluated just now. #所以这不是bug是feature
Это предложение означает, что когда текущий объект расширяется, консоль вычисляет ключ-значение этого объекта, а затем передает его обратно в консоль для отображения.
При использовании консоли для печати, если консоль обнаружит, что текущее содержимое для печати является объектом, она сохранит его и сначала выведет краткий снимок Когда разработчику необходимо просмотреть подробное содержимое, нажмите, чтобы развернуть и вернуть значение в памяти .
Это известная яма консоли.Возможно, эта функция предназначена для предотвращения глубокого копирования консолью вывода больших объектов, что приводит к медленной отладке.Также может быть для облегчения просмотра свойств в цепочке прототипов, но это, несомненно, Проблемы, которых разработчики должны избегать при отладке кода.
Чтобы избежать этой проблемы с отладкой, рекомендуется использовать JSON.stringify() для отладки вывода вместо прямой печати текущего объекта.

проблема с утечкой памяти

Как упоминалось выше, при использовании Консоли для печати объекта ссылка на этот объект сохраняется. Поскольку инструменты разработчика включены в браузере по умолчанию, а поведение «разработчик должен просмотреть объект позже» установлено по умолчанию, объект, представленный в консоли, не войдет в логику GC (сборки мусора), что вызывает проблема с утечкой памяти. Чтобы избежать проблемы с утечкой памяти, необходимо отделить среду разработки от онлайн-среды и избегать операторов печати консоли в онлайн-среде.ESLintсерединаno-consoleпереключатель включен.

Ссылка и расширение

medium.com/@ADaySt вернуться к…
Developers.Google.com/Web/tools/From…
stackoverflow.com/questions/1…