Боевой javascript с более высокой скоростью и большей эффективностью
Знакомство с инструментом делает его более полезным в работе. Несмотря на слухи о том, что JavaScript сложно отлаживать, баги и баги можно устранить за очень короткое время, если освоить несколько приемов.
В статье перечислены 14 советов по отладке, о которых вы могли не знать., но, возможно, вам придется иметь это в виду, когда вам в следующий раз понадобится отладить код JavaScript!
посмотрим вместе
Большинство навыков применимы к Chrome Console и Firefox, хотя есть много других инструментов отладки, но большинство также применяются.
1. debugger
Кромеconsole.log, debuggerЭто наши любимые, быстрые и грязные инструменты отладки. После выполнения кода Chrome автоматически остановится при выполнении. Вы даже можете обернуть его в условие, чтобы запускать его только при необходимости.
if (thisThing) {
debugger;
}
2. Отображать объекты в таблице
Иногда есть сложный набор объектов, на которые нужно смотреть. в состоянии пройтиconsole.logПросмотр и прокрутка или использованиеconsole.tableРазверните проще, чтобы увидеть, что обрабатывается!
var animals = [
{ animal: 'Horse', name: 'Henry', age: 43 },
{ animal: 'Dog', name: 'Fred', age: 13 },
{ animal: 'Cat', name: 'Frodo', age: 18 }
];
console.table(animals);
выход:
Установка эмуляторов разных мобильных устройств на рабочий стол — это здорово, но на самом деле это неосуществимо. Как изменить размер окна? Chrome предоставляет все необходимое. Перейти в консоль и нажать«Переключить режим устройства»кнопка. Смотри, как меняется окно!
4. Как быстро найти DOM-элемент
Элемент маркера в панели элементов DOM и используйте его в консоли. Chrome Console сохранит выбор истории последних пяти элементов, окончательный выбор первого элемента отмечен$0, второй выбранный элемент$1,Так далее и тому подобное.
Если вы выберете следующие теги в порядке «элемент-4», «элемент-3», «элемент-2», «элемент-1», «элемент-0», вы можете получить доступ к узлам DOM в консоли:
5. Используйтеconsole.time()а такжеconsole.timeEnd()тестовая петля
Полезно знать, когда выполняется какой-то код, особенно при отладке медленных циклов. Вы даже можете настроить несколько таймеров, передав методу разные параметры. Давайте посмотрим, как это работает:
console.time('Timer1');
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd('Timer1');
Запуск дает следующие результаты:
6. Получите трассировку стека функции
Использование фреймворка JavaScript потребует большого количества кода.
Создавайте представления и запускайте события, и, наконец, вы хотите понять процесс вызова функций.
Поскольку JavaScript — не очень структурированный язык, иногда бывает трудно понять, когда что-то происходит. JavaScript можно легко отладить с помощью console.trace (просто проследите в консоли).
Представьте, что вы хотите просмотреть строку 24carПример Вызов функцииfuncZВся трассировка стека:
var car;
var func1 = function() {
func2();
}
var func2 = function() {
func4();
}
var func3 = function() {
}
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
this.funcZ = function() {
console.trace(‘trace car’)
}
}
func1();
Строка 24 выведет:
можно увидетьfunc1передачаfunc2,func2передачаfunc4.Func4создалCarэкземпляр, а затем вызвать функциюcar.funcX,Так далее и тому подобное.
Это полезно, даже если вы думаете, что ваш код написан очень хорошо. Предположим, вы хотите улучшить свой код. Получите информацию о трассировке и всех задействованных функциях, каждую из которых можно щелкнуть, чтобы переключаться между ними. Это как дать вам список выбора стеков вызовов.
7. Отформатируйте код перед отладкой JavaScript
Иногда код не пройдет в производстве, но ваши исходные карты не развернуты в производстве.не бояться. Chrome может форматировать ваши файлы JavaScript. Отформатированный код не так полезен, как настоящий код, но, по крайней мере, вы можете видеть, что происходит. Щелкните в средстве просмотра исходного кода в консоли Chrome.{}кнопка.
8. Быстро найти функцию для отладки
Предположим, вы хотите разбить точку в функции. Два наиболее распространенных способа:
- Найдите строку в консоли и добавьте точку останова
- добавить в код
debugger
В обоих решениях вам нужно щелкнуть файл, чтобы отладить определенную строку.
Использование точек останова консоли может быть менее распространенным. использовать в консолиdebug(funcName), код остановится, когда будет достигнута переданная функция.
console.debug函数不是同一个东西。 )
var func1 = function() {
func2();
};
var Car = function() {
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
}
var car = new Car();
debug(car.funcY)При звонкеcar.funcYостановится в режиме отладки:
9. Блокируйте нерелевантный код
Теперь мы часто вводим в наше приложение несколько библиотек или фреймворков. Большинство из них хорошо протестированы и относительно свободны от ошибок. Однако отладчик по-прежнему заходит в файлы, не связанные с задачей отладки. Решение состоит в том, чтобы заблокировать сценарии, которые не нуждаются в отладке. Конечно, вы можете включить свои собственные скрипты.Подробнее об отладке несвязанного кода читайте в этом посте (https://raygun.com/blog/javascript-debugging-with-black-box/).
10. Найдите фокус в сложном процессе отладки
При более сложной отладке нам иногда нужно вывести много строк. Что можно сделать, так это сохранить хорошо структурированный вывод и использовать больше консольных функций, например,console.log, console.debug, console.warn, console.info, console.errorи т.п. Затем вы можете быстро просматривать в консоли. Но иногда некоторая отладочная информация JavaScript не то, что вам нужно. Теперь вы можете самостоятельно украсить отладочную информацию. При отладке JavaScript вы можете использовать CSS и настроить информацию о консоли:
console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}
console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}
console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);
выход:
Например:
существуетconsole.log(), вы можете использовать%sустановить строку,%iустановить номера,%cУстановка пользовательских стилей и многое другое, а также многое другоеconsole.log()Инструкции.如果使用的是单页应用框架，可以为视图（view）消息创建一个样式，为模型（models），集合（collections），控制器（controllers）等创建另一个样式。也许还可以像wlog，clog和mlog一样发挥想象力！
11. Соблюдайте специфические вызовы и параметры функции
В консоли Chrome можно наблюдать определенные функции. При каждом вызове функции выводятся переданные аргументы.
var func1 = function(x, y, z) {
//....
};
выход:
Это хороший способ увидеть параметры, переданные в функцию. Однако было бы лучше, если бы консоль давала нам подсказку о количестве параметров. В приведенном выше примере функция func1 ожидает 3 аргумента, но передает только 2. Если вы не обрабатываете этот параметр в своем коде, вы, скорее всего, ошибетесь.
12. Быстрый доступ к элементам в консоли
querySelectorБолее быстрый способ - использовать знак доллара,$('css-selector')вернет первое вхождение селектора CSS.?('css-selector')Все совпадения будут возвращены. Если вы используете элемент несколько раз, вы можете сохранить его как переменную.
13. Почтальон великолепен (но Firefox быстрее)
Многие разработчики используют, чтобы увидеть запрос Postman AJAX. Почтальон действительно хорошо. Но открывает новое окно, напишите объект запроса, а затем проверьте их снова, это очень неприятно.
Иногда браузер проще в использовании.
Когда вы используете браузер, чтобы увидеть, запрашивает ли страница аутентификации пароль, не беспокойтесь о cookie-файлах аутентификации. Давайте посмотрим, как отредактировать в Firefox и повторно отправить запрос.
Откройте консоль и перейдите на вкладку сети. Щелкните правой кнопкой мыши нужный запрос и выберите «Изменить и отправить повторно». Теперь вы можете изменить все, что захотите. Измените заголовок и отредактируйте параметры, затем нажмите Отправить повторно.
Ниже я делаю два запроса с разными свойствами:
14. Прерывание смены узла
ДОМ интересная штука. Иногда это меняется, и вы не знаете, почему. Однако при отладке JavaScript Chrome может приостановить работу при изменении элементов DOM. Вы даже можете следить за его свойствами. В консоли Chrome щелкните элемент правой кнопкой мыши и выберите «Прерывание» в настройках: