Автор оригинала: FreeCodeCamp Community Member.
Swagat Kumar Swain
Chrome поставляется со встроенными инструментами разработчика. Это поставляется с широким спектром функций, таких как элементы, сеть и безопасность. Сегодня мы сосредоточимся на 100% на его консоли JavaScript.
Когда я начал кодирование, я использовал только консоль JavaScript для регистрации значений, таких как ответы с сервера, или значение переменных. Но со временем и с помощью учебных пособий я обнаружил, что консоль может сделать больше, чем я когда-либо представлял.
Вот полезные вещи, которые вы можете сделать с этим. Если вы читаете это в Chrome (или любому другому браузеру) на рабочем столе, вы даже можете открыть инструменты разработчика и попробовать их сразу.
1. Выберите DOM-элементы
Если вы знакомы с jQuery, вы знаете, насколько важно селекторы $ (‘. Class’) и $ («ID»). Они выбирают элементы DOM в зависимости от класса или идентификатора, связанного с ними.
Но когда у вас нет доступа к jQuery в DOM, вы все равно можете сделать то же самое в консоли разработчиков.
$ («Tagname») $ («.Class») $ («# ID») и $ (‘. Class #id’) эквивалентны документу. queryselector (”). Это возвращает первый элемент в DOM, который соответствует селектору.
Вы можете использовать $$ («Tagname») или $$ (‘CALL’) – обратите внимание на двойные знаки доллара – выбрать все элементы DOM в зависимости от конкретного селектора. Это также ставит их в массив. Вы можете снова выйти вперед и выбрать определенный элемент среди них, указав положение этого элемента в массиве.
Например, $$ (‘. ClassName’) даст вам все элементы, которые имеют классное значение класса и $$ (‘. ClassName’) [0] и $$ (‘. ClassName’) [1] даст вам первый и второй элемент соответственно.
2. Преобразуйте свой браузер в редактор
Сколько раз вам интересуется, можете ли вы редактировать текст в самом браузере? Ответ – да, вы можете преобразовать свой браузер в текстовый редактор. Вы можете добавить текст и удалить текст из любого места в доме.
Вам не нужно проверять элемент и больше редактировать HTML. Вместо этого перейдите в консоль разработчиков и введите следующее:
document.body.contentEditable=true
Это сделает контент редактируемым. Теперь вы можете редактировать практически все и все в доме.
3. Найти события, связанные с элементом в доме
При отладке вам необходимо заинтересовать поиск слушателей событий, связанных с элементом в доме. Консоль разработчиков облегчает их найти.
GetEventListeners ($ (‘Selector’)) возвращает массив объектов который содержит все события, связанные с этим элементом. Вы можете расширить объект Для просмотра событий:
Чтобы найти слушателя для определенного события, вы можете сделать что-то вроде этого:
getEventListeners($('selector')).eventName[0].listener Это отобразит слушатель связано с определенным событием. Здесь EventName [0] – это массив, который перечисляет все события определенного события. Например:
getEventListeners($('firstName')).click[0].listener … Понадобится слушатель, связанный с событием Click элемента с ID ‘FirstName’.
4. Монитор событий
Если вы хотите отслеживать события, связанные с определенным элементом в DOM, пока они выполняются, вы также можете в консоли. Есть разные команды, которые вы можете использовать для мониторинга некоторых или всех этих событий:
- Monitorevents ($ (‘Selector’)) будет следить за всеми событиями, связанными с элементом с вашим селектором, затем зарегистрируйте их в консоли, как только они уволится. Например, Monitorevents ($ (‘# FirstName’)) будет регистрировать все события, связанные с элементом с идентификатором «Имя».
- Monitorevents ($ (‘Selector’), «EventName») будет регистрировать определенное событие, связанное с элементом. Вы можете пройти имя события в качестве аргумента функции. Это будет регистрировать только определенное событие, связанное с определенным элементом. Например, Monitorevents ($ (‘# FirstName’), ‘click’) войдет все события щелчка, связанные с элементом с идентификатором id-name ‘.
- Monitorevents ($ (‘Selector’), [‘Eventname1’, ‘Eventname3’, ….]) Будет журнал несколько событий в зависимости от ваших собственных требований. Вместо того, чтобы пройти одно имя события в качестве аргумента, пройдите массив строк, которые содержат все события. Например, Monitorevents ($ (‘# FirstName’), [«Щелкнуть», «Фокус»]) будет регистрировать событие Click и Focus Events, связанные с элементом с идентификатором id-name ‘.
- Unonitorevents ($ (‘selector’)))): Это прекратит мониторинг и регистрацию событий в консоли.
5. Найти время выполнения блока кода
Консоль JavaScript имеет существенную функцию под названием Console.time («Labelname»), которая принимает имя метки в качестве аргумента, затем запускает таймер. Существует еще одна важная функция, называемая Console.Timeend («Labelname»), которая также принимает имя метки и заканчивается таймером, связанным с этой конкретной меткой.
Например:
console.time('myTime'); //Starts the timer with label - myTimeconsole.timeEnd('myTime'); //Ends the timer with Label - myTime//Output: myTime:123.00 msПриведенные выше две строки кода дают нам время, взятое от начала таймера для окончания таймера.
Мы можем улучшить это, чтобы рассчитать время, предпринимаемое для выполнения блока кода.
Например, скажем, я хочу найти время, сделанное для выполнения петли. Я могу поделать это:
console.time('myTime'); //Starts the timer with label - myTimefor(var i=0; i < 100000; i++){ 2+4+5;}console.timeEnd('mytime'); //Ends the timer with Label - myTime//Output - myTime:12345.00 ms6. Организуйте значения переменной в таблицу
Допустим, у нас есть массив объектов, которые выглядят следующим образом:
var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]Когда мы вводим имя переменной в консоль, он дает нам значения в виде массива объектов. Это очень полезно. Вы можете расширить объекты и увидеть значения.
Но это становится трудно понять, когда свойства увеличиваются. Следовательно, чтобы получить четкое представление переменной, мы можем отобразить их в таблице.
Console.table (varialblename) представляет переменную и все его свойства в табличной структуре. Вот что это выглядит как:
7. Осмотрите элемент в доме
Вы можете напрямую осматривать элемент из консоли:
- Осмотрите ($ (‘selector’)). Осмотрите элемент, который соответствует селектору и отвезуте на вкладку «Элементы» в инструментах разработчиков Chrome. Например, проверка ($ (‘# FirstName’)) будет проверять элемент с идентификатором «Имя имя» и осматривать ($ (‘A’) [3]) проведет 4-й анкерный элемент, который у вас есть в вашем доме.
- $ 0, 1, 1, $ 2 и т. Д. Может помочь вам схватить недавно осмотренные элементы. Например, $ 0 дает вам последний элемент DOM, в то время как 1 доллар дает вам второй последний элемент проверки DOM.
8. Перечислите свойства элемента
Если вы хотите перечислить все свойства элемента, вы можете сделать это непосредственно с консоли.
dir ($ (‘selector’)) Возвращает объект со всеми свойствами, связанными со своим элементом DOM. Вы можете расширить их, чтобы просмотреть их более подробно.
9. Получить значение вашего последнего результата
Вы можете использовать консоль в качестве калькулятора. И когда вы это делаете, вам может понадобиться следить за одним расчетом со вторым. Вот как получить результат предыдущего расчета из памяти:
$_
Вот что это выглядит как:
2+3+49 //- The Answer of the SUM is 9$_9 // Gives the last Result$_ * $_81 // As the last Result was 9Math.sqrt($_)9 // As the last Result was 81$_9 // As the Last Result is 9
10. Очистить консоль и память
Если вы хотите очистить консоль и его память, просто введите:
clear()
Затем нажмите Enter. Это все, что есть к этому.
Это всего лишь несколько примеров того, что вы можете сделать с помощью консоли JavaScript Chrome. Я надеюсь, что эти советы делают вашу жизнь немного легче.
Спасибо за прочтение. Если вам понравилось этот пост, пожалуйста, не стесняйтесь рекомендовать его другим людям здесь, на носителе, ударяя кнопку сердца ниже. Вы можете найти больше обо мне или следовать за мной на Twitter и вот на Средний Отказ
Оригинал: “https://www.freecodecamp.org/news/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329/”