Home-theater-designers
Консоль веб-браузера - один из наиболее широко используемых инструментов для отладки интерфейсных приложений. Консольный API предоставляет разработчикам возможность устранять ошибки и регистрировать сообщения.
console.log () это, вероятно, наиболее часто используемый метод в API консоли, но есть и другие методы, которые вы можете использовать в своем рабочем процессе. В этом руководстве показаны различные методы консоли веб-браузера, которые можно использовать для улучшения рабочего процесса отладки.
Почему важна регистрация?
Вход в консоль веб-браузера - один из лучших методов отладки интерфейсных приложений или приложений на основе JavaScript.
По теме: 6 фреймворков JavaScript, которые стоит изучить
Большинство современных веб-браузеров поддерживают Console API, что делает его легко доступным для разработчиков. Объект console отвечает за предоставление доступа к консоли отладки браузера. Реализация может отличаться в разных браузерах, но большинство методов будут работать во всех современных браузерах.
Кончик : Консоль вашего браузера может запускать весь код, обсуждаемый в этом руководстве. Нажмите F12 на клавиатуре, чтобы открыть инструменты разработчика браузера в Chrome или Firefox.
Сообщения строки журнала
Один из наиболее распространенных консольных методов - console.log () . Он просто выводит строковое сообщение или какое-либо значение в веб-консоль. Для простых значений или строковых сообщений console.log () метод, вероятно, лучший вариант для использования.
крутые вещи, которые можно сделать с терминалом
Чтобы вывести Привет, мир сообщение, вы можете использовать следующее.
console.log(`Hello World`); Еще одна особенность console.log () Метод - это возможность распечатать вывод элементов DOM или структуры части веб-сайта, например, для вывода структуры элемента body и всего, что внутри него, использовать следующее.
console.log(document.body) Результатом является коллекция элементов DOM в виде HTML-дерева.
Регистрация интерактивных объектов JavaScript
В console.dir () используется для регистрации интерактивных свойств объектов JavaScript. Например, вы можете использовать его для просмотра элементов DOM на веб-странице.
Типичный выход console.dir () Метод состоит из всех свойств указанного объекта JavaScript в формате JSON. Используйте метод ниже, чтобы распечатать свойства всех элементов в теле HTML-страницы:
console.dir(document.body) Оценка выражений
Возможно, вы знакомы с методами assert из модульного тестирования - ну, console.assert () метод работает аналогичным образом. Использовать console.assert () метод оценки выражения или условия.
Когда метод assert не работает, консоль выводит сообщение об ошибке; в противном случае он ничего не печатает. Используйте приведенный ниже код, чтобы определить, превышает ли возраст человека 18 лет:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); Вышеупомянутое утверждение не выполняется, и соответственно печатается сообщение об ошибке.
Запись данных в таблицы
Использовать console.table () способ отображения данных в табличном формате. Хорошие кандидаты для отображения в табличной форме включают массивы или объектные данные.
Примечание : Некоторые браузеры, такие как Firefox, имеют максимальный лимит в 1000 строк, которые могут отображаться с console.table () метод.
Предположим, у вас есть следующий массив автомобильных объектов:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Вы можете отобразить массив выше в таблице, используя следующий метод:
console.table(cars); Регистрация сообщений по категориям
Сообщения консоли веб-браузера в основном делятся на три группы: ошибка, предупреждение и информация.
Ошибки
Чтобы специально выводить сообщения об ошибках на консоль, используя console.error () сообщения об ошибках отображаются красным шрифтом.
console.error('error message'); Предупреждения
Для печати предупреждений используйте следующее. Как и в большинстве сценариев, предупреждающие сообщения отображаются оранжевым цветом:
console.warn('warning message');Информация
Чтобы распечатать общую информацию на консоли, используйте console.info () метод:
console.info('general info message') Если правильно распределить сообщения по категориям, их легко фильтровать или находить в консоли браузера.
Ход программы отслеживания
Использовать console.trace () для печати трассировки стека потока или выполнения программы. Это очень полезная функция для отладки, поскольку она выводит порядок, в котором функции выполняются в вашей программе.
Чтобы увидеть console.trace () в действии, вы можете создать три функции (как показано ниже) и поместить трассировку стека в одну из функций.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}В консоли браузера вызовите или активируйте functionOne () и вы получите трассировку стека вызовов функций, напечатанную в порядке «последний пришел - первый ушел» (LIFO), потому что это стек.
Сроки выполнения программы
Чтобы определить, сколько времени требуется для выполнения операции в вашей программе, вы можете использовать console.time () метод. console.time () обычно используется вместе с console.timeEnd () метод, в котором последний используется для завершения таймера.
У вас может быть до 10 000 таймеров, работающих на каждой веб-странице, что подчеркивает важность правильной маркировки ваших таймеров.
Чтобы определить время, за которое цикл for перебирает числа от 1 до 50 000, можно использовать таймер следующим образом.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Подсчет
В console.count () используется для отслеживания количества вызовов функции или некоторого фрагмента кода в программе. Например, мы можем отслеживать количество выполнений цикла for следующим образом:
for(i=0; i<4; i++ ){
console.count();
}Группировка сообщений журнала
Как и метод таймера, console.group () , а также console.groupEnd () методы обычно используются парами.
Групповой метод помогает лучше организовать сообщения журнала. Например, мы можем создать группу предупреждающих сообщений с метками «предупреждения» следующим образом.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Два сообщения в группе предупреждений визуально распределены по категориям, как показано в выходных данных ниже.
Очистка консоли
И последнее, но не менее важное: вот несколько способов очистки сообщений журнала в консоли браузера.
Использовать console.clear () метод следующим образом.
console.clear() Вы также можете очистить консоль браузера с помощью сочетаний клавиш браузера.
Гугл Хром : Ctrl + L
Fire Fox : Ctrl + Shift + L
Максимальное использование консоли браузера
В этом руководстве показаны некоторые из различных доступных методов консоли веб-браузера, которые помогут вам отлаживать интерфейсные приложения. Консольный API очень легкий, простой в освоении и широко поддерживается в большинстве современных браузеров.
приложение для скачивания музыки для Android 2016 бесплатно
Сделайте валидацию CAPTCHA в своем следующем проекте и проверьте свои новые навыки отладки!
Делиться Делиться Твитнуть Эл. адрес Создайте форму проверки CAPTCHA с использованием HTML, CSS и JavaScriptЗащитите свои сайты с помощью проверки CAPTCHA.
Читать далее Похожие темы- Программирование
- Веб-разработка
- JavaScript
Мвиза занимается разработкой программного обеспечения по профессии и много пишет о Linux и интерфейсном программировании. Некоторые из его интересов включают историю, экономику, политику и архитектуру предприятий.
Ещё от Mwiza KumwendaПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться