предисловие
Я считаю, что большинство фронтенд-студентов используют для разработки браузер Chrome.console.logКроме того, метод отладки, предоставляемый панелью управления инструментами разработчика Chrome ~
Сначала введите в адресной строке:about:blankСоздайте пустую страницу и откройте консоль~
Начать демонстрацию работы~ (предупреждение о нескольких изображениях! ~~
О консоли
Что касается объекта консоли, на самом деле он предоставляет очень богатый API, вы можете сами проверить документацию~
О панели управления консоли
Следующие примеры методов существуют только на панели консоли консоли Chrome. Написание JavaScript невозможно!
$семья
$_
Возвращает последнее выполненное значение~
Хотя это очень похоже на командную строку!!, но $_ не будет выполнять выражение снова, как показано на следующем рисунке:
Если предыдущее значение не сохранено в переменной, вы можете временно получить доступ к ~ через этот метод (почему временный, потому что при выполнении следующего выражения $_ обновился)
$0 - $4
Пять команд $0, $1, $2, $3 и $4 эквивалентны пяти последним выбранным ссылкам на панели «Элементы». Например, я случайным образом щелкнул пять узлов DOM на веб-сайте Nuggets на панели «Элементы». На временной шкале 4 доллара были первыми, на которые я нажал. А $0 — мой пятый и последний клик. Используйте этот метод для быстрой отладки выбранного узла на панели консоли!
Чтобы добавить, есть немного похожее на обычное сопоставление ~ как показано ниже
function replacer(match, $1, $2, $3, $4, $5) {
return [$1, $2, $3, $4, $5].join(' - ');
}
const str = 'abc12345#$*%[hello]{world}'
.replace(/([^\d]*)(\d*)([^\w]*)(\[.*\])(\{.*\})/, replacer);
console.log(str); // abc - 12345 - #$*% - [hello] - {world}
$
похожий наdocument.querySelector(). Но менее известным должен быть второй его параметр. Указывает, с какого узла следует начать выбор. Особенно полезно, когда вы хотите иногда уменьшить диапазон!
P.S. сигнатура функции$(selector, [startNode]).
?
похожий наdocument.querySelectorAll(), может относиться к тому же, что и выше.
P.S. сигнатура функции?(selector, [startNode])
$x
Поиск узлов на основе выражений XPath. Следующий пример рисунка:
Найдите все узлы с атрибутами href в самородках, а затем просмотрите и отфильтруйте узлы, содержащие http или https~
Конечно, создается впечатление, что в настоящее время в большинстве случаев используется непосредственно$,?Может быть покрыт, может быть, в особых случаях$xбыло бы полезно. Студенты, которым это нужно, могут узнать об этом ~
Правила выражений XPath могут относиться к:Привет, я 3schools.com/xml/xpath_ это ...
P.S. сигнатура функции$x(selector, [startNode])
Метод инструмента API
Следующие методы также существуют только на панели «Консоль» консоли Chrome, учащиеся, обратите внимание~
keys/values
См. имя. функция похожа наObject.keys,Object.values
monitor/unmonitor
Служебный метод для наблюдения за вызовами функций. При вызове функции ее имя и параметры могут быть выведены синхронно.
Когда вам больше не нужно наблюдать за функцией, вызовите unmonitor, чтобы отменить ее.
А вот анонимные функции работать не будут, потому что нельзя получить имя.
monitorEvents/unmonitorEvents
Вы можете наблюдать за событиями объекта~
Вы также можете одновременно наблюдать за несколькими событиями объекта~
Аналогичным образом используйте unmonitorEvents для отмены наблюдений. Вышеупомянутое семейство $ удобнее использовать вместе
P.S. Сигнатура функции:monitorEvents(object[, events])
copy
Быстро скопировать объект как строковое представление в буфер обмена~
getEventListeners
Получить все прослушиватели событий, зарегистрированные в объекте ~
На самом деле, есть встроенные методы, такие как проверка, отладка/отладка и т. д. Вы можете искать самостоятельно, что очень полезно~ Я не буду представлять их здесь по одному~
Об отладке точек останова
Отладка точки останова очень важна. Раньше мы могли добавлять отладчик непосредственно в код, а затем обновлять браузер для отладки. На самом деле, помимо этого метода, существует множество других точек останова.
DOM breakpoint
На панели «Элементы» щелкните узел правой кнопкой мыши, чтобы вызвать меню, добавьте соответствующую точку останова DOM и отслеживайте изменение поддерева, изменение атрибута и удаление узла указанного узла.
Source breakpoint
Иногда нет необходимости добавлять отладчик в исходный код. Вы можете выполнять отладку, добавляя точки останова непосредственно на панели «Источник». Обратите внимание на маленькие синие стрелки на номерах строк на изображении ниже!
Conditional breakpoint
Условные точки останова. Точка останова сработает только при выполнении условия. Обратите внимание на маленькие оранжевые стрелки на номерах строк на изображении ниже!
Кроме того, есть различные инструменты, предоставляемые Chrome, такие как черный ящик и точка останова XHR (выборка).Рекомендуется, чтобы студенты узнали об этом больше, возможно, это может сыграть большую роль в критические времена~
Советы
Если вы не можете найти соответствующую команду, вы можете использовать сочетание клавиш Ctrl + Shift + P в консоли. В MacOS это Command + Shift + P (то же самое, что и редактор). Быстрый поиск нужного инструмента панели управления~
резюме
На самом деле, я долгое время использовал только console.log и простой отладчик для отладки веб-приложений, иногда, когда я сталкиваюсь со сложными проблемами, трудно быстро найти проблему из-за отсутствия методов отладки, что снижает эффективность работы. . Поэтому считается, что в таких случаях изучение способов отладки может оказать большую помощь в работе!
Наконец, учащиеся могут добавлять или исправлять эти методы инструментов отладки~
Конечно, я не очень польщен, если это поможет всем~