Браузер Chrome имеет встроенный набор инструментов, которые невероятно полезны, когда вы пытаетесь понять, что произошло с вашим кодом. В этом сообщении блога я расскажу о теме, сосредоточившись на некоторых наиболее полезных функциях этого инструмента и на том, как ими воспользоваться.
Прежде всего, как мы вообще получим доступ к инструментам?
Есть несколько вариантов доступа к DevTools после открытия браузера Chrome:
* щелкните правой кнопкой мыши страницу и выберите ‹проверить› в раскрывающемся меню. (хорошо, если вы хотите проверить определенный элемент в DOM)
* в верхнем главном меню выберите Вид => Разработчик => Консоль JavaScript
* управление + команда + j
Первый вариант приведет вас к интерфейсу элемента в DevTools, и именно с него мы начнем:
Элементы:
Эта часть DevTool очень полезна, когда дело доходит до всего, что связано с DOM. Вы сможете редактировать и проверять каждый узел в DOM. Вы можете не только видеть это, но и вносить изменения прямо здесь и сразу же видеть изменения. Также, если вы хотите проверить определенный узел в DOM, вы можете открыть инструмент «Элементы» на этом конкретном узле. В браузере щелкните правой кнопкой мыши интересующую вас часть страницы и выберите пункт «Проверить» в раскрывающемся меню…
На этом примере изображения вы можете увидеть ‹Click me!›, что вы увидите, когда откроете эту страницу в своем браузере. Светло-голубое выделение над ним связано с тем, что я щелкнул его правой кнопкой мыши и выбрал «проверить» в раскрывающемся меню. Это открывает DevTools в инструменте Elements и с той частью DOM, которая представляет то, что я щелкнул.
В левой части экрана, где элементы подчеркнуты синим цветом, находится область, в которой вы можете видеть весь DOM и видеть древовидную структуру, то есть вы можете видеть родительский узел и каждый связанный с ним дочерний элемент. Если вы хотите внести изменения в любой элемент в DOM, все, что вам нужно сделать, это дважды щелкнуть по нему, и вы вносите изменения, затем просто нажмите Enter, и ваши изменения будут применены. другой вариант, который даст вам еще больше возможностей, — щелкнув правой кнопкой мыши элемент, появится раскрывающееся меню с возможностями добавления или редактирования атрибутов, а также редактирования в виде HTML, вы также можете изменить место строки, щелкнув и перетащив ее в новое местоположение.
В правой части страницы у вас есть представление вашего CSS на вкладке «Стили». Здесь вы можете редактировать и видеть, как изменения происходят прямо в браузере. Когда вы нажимаете на элемент слева, справа отобразится соответствующий CSS для этого элемента. DevTools структурирует страницу таким образом, что вы можете видеть все правила CSS, относящиеся к любому активному элементу, даже если в вашем коде они сохранены в разных файлах. Здесь вы можете включать и отключать свойства, редактировать правила для классов, псевдоклассов и связывать все это напрямую с исходным кодом CSS. Допустим, какое-то правило CSS портит вашу страницу. Если щелкнуть любое правило на вкладке «Стили», конкретное правило, которое вы щелкнули, будет отключено. Допустим, вы хотите изменить значение, просто дважды щелкните по нему, и вы сможете его отредактировать. Если вы хотите добавить селектор, в самом правом верхнем углу этой вкладки есть знак плюса, щелкните его и добавьте любой новый селектор на свою страницу. Также вы можете видеть в режиме реального времени изменения на экране, что упрощает отладку.
Консоль:
Консоль — это место, где мы будем отлаживать и играть с частью JavaScript вашего приложения, здесь вы можете взаимодействовать с представлением и сценарием вашего приложения, а также запускать команды JavaScript и просматривать выходные данные, которые регистрируются. Если вы хотите открыть DevTools прямо на консоли, просто нажмите control + command + j, и браузер откроет его для вас. Для начала, если есть какие-либо проблемы с вашим приложением в отношении кода JavaScript, который вы написали. Консоль покажет его вам красивыми красными буквами и даже даст вам файл и строку, где находится этот код. Если вы нажмете на ошибку, DevTools перенесет вас на исходную страницу, мы поговорим об этом подробнее далее, а пока я хочу немного рассказать о возможностях консоли:
В этом примере вы можете увидеть несколько простых строк кода JavaScript. Допустим, вы только что узнали о новом методе, который вы можете использовать в своих массивах, например, в приведенном выше коде я инициирую массив, а затем нажимаю клавишу ввода. Теперь область моей консоли имеет доступ к массиву ‹a›, и я могу проверить его длину, введя его и нажав клавишу ввода. Вы также можете изменить значение массива, как вы можете видеть после использования карты. В этой заметке, когда вы вводите имя переменной, консоль выводит его для вас. Серая стрелка в начале строки — это возвращаемое консолью значение, когда я запрашивал ‹newA›, если щелкнуть, откроются строки ниже этого, и, как вы можете видеть, это даст вам много ценной информации об этой конкретной переменной. Одна из самых ценных вещей в консоли — это когда вы работаете над своим кодом и хотите проверить, что такое точный тип значения или каковы ключи в вашем объекте, или любой другой вопрос о некоторых данных.
Источник:
Sorce действительно полезен, когда вы начинаете заниматься отладкой кода JavaScript.
Когда вы откроете раздел «Источники» в DevTools, вы сможете увидеть в нем весь свой код. В качестве примера у меня есть одно решение проблемы пузырьковой сортировки. Вы можете редактировать этот код так же, как в текстовом редакторе, но одна из лучших особенностей Sources — это то, что вы можете видеть, как ваш код выполняется строка за строкой. На картинке выше, если вы посмотрите на строки 35 и 36, синяя метка на числе и оператор debugger делают одно и то же, и я просто использую оба, чтобы вы могли видеть, но на самом деле вы бы выберите один или другой, нет большой разницы, просто предпочтение, чтобы написать оператор, вы можете сделать это в своем коде или прямо здесь, на вкладке Источники, а что касается синей метки, просто нажмите на строку, и это линия будет выбрана. Теперь самое интересное — это то, что они могут сделать, так что давайте углубимся в это. Оба они говорят интерпретатору остановиться, как только он доберется до этой конкретной строки, и оттуда вы можете использовать кнопки в правом верхнем углу, вы можете видеть каждый шаг, который делает ваш интерпретатор, и все значения, которые изменяются или свяжите и сохраните вашим интерпретатором.
После того, как вы укажете, где вы хотите начать, этот процесс обновит страницу, и символ паузы (первый в правом верхнем углу) станет синим и будет выглядеть как символ воспроизведения. Здесь вы должны щелкнуть, если хотите остановить пошаговый процесс и покончить с ним. Теперь прямо рядом с символом паузы находится полукруглая стрелка, которая будет перемещаться по следующему вызову функции, что означает, что интерпретатор перейдет к следующему биту кода, и в этот момент вы будете иметь доступ ко всем значениям, на которые ссылается шаг. Если вы хотите увидеть каждую часть вызова функции, вы используете стрелку вниз или кнопку «Далее» в строке, которая будет считывать каждый отдельный элемент по одному и представлять его значение для вас. Теперь предположим, что вы вошли в функцию, которая вас интересовала в первой итерации, но не в течение следующих 20 раз, когда цикл выполняется, после проверки этой итерации вы хотите перейти к следующему, что вам нужно отлаживать, вы должны использовать последнюю кнопку со стрелкой вверх и выйти из этой функции и перейти к следующей вещи в очереди.
Возможности DevTools безграничны, и это всего лишь небольшое введение в некоторые части, которые я считаю фундаментальными для всех. Надеюсь, это было полезно!