В прошлой статье мы разобрали, как установить Visual Studio Code и создать первый простой проект.
Там же мы научились запускать процесс отладки и узнали, как открыть инструменты разработчика в Chrome.
Давайте откроем в Chrome наш index.html из прошлого примера и снова активируем инструменты разработчика.
Как мы помним, это можно сделать одним из следующих способов :
- Нажать функциональную клавишу F12
- Нажать комбинацию клавиш "Ctrl + Shift + I"
- Выбрать в меню "Дополнительные инструменты -> Инструменты разработчика"
Рекомендую вам использовать первый самый быстрый и простой вариант - F12.
По умолчанию панель инструментов открывается справа :
Но мы можем это изменить.
Для этого справа вверху нажмите на кнопку с тремя вертикальными точками - она между значком с шестеренкой и крестиком, закрывающим панель :
Откроется меню настроек панели, где вы сможете выбрать положение - давайте изменим его на нижнее, как показано выше.
Большинство разработчиков использует именно такое положение панели.
Рассмотрим первые три вкладки ( Elements , Console , Sources ) :
На вкладке Elements мы видим разметку текущей страницы и стили.
Переключимся на вкладку Console :
Здесь мы увидим всё, что выводит наш JavaScript код при помощи console.log() :
Здесь также выводятся некоторые служебные сообщения.
Но самое важное - здесь можно исполнять любые команды и конструкции JavaScript.
Давайте попробуем - введём "console.log('Yeah !')" :
Обратите внимание : кроме того, что вывелся наш текст, консоль также вернула нам на следующей строке 'undefined' - это значение введенного выражения. Разберемся с этим позднее.
Переключимся на вкладку Sources :
Здесь слева мы видим структуру папок нашего проекта.
Давайте найдём в структуре папок наш первый и пока единственный файл JavaScript "01.js".
Как мы помним, он находится в папке "js" :
Обратите внимание, в центральной области открылся текст нашего файла.
Если кликнуть мышкой немного левее от номера строки файла, то срока будет помечена маркером :
Маркер означает, что мы установили "точку останова" (Breakpoint) на указанной строке и выполнение кода прервется, когда дойдёт до нашей строки.
Давайте проверим - для этого нам надо обновить страницу в Chrome - сделать это можно нажав функциональную клавишу F5 или кликом на соответствующий значок в верхней панели :
Произойдет остановка выполнения и ваш экран будет выглядеть примерно так :
Если в момент остановки подвести курсор мыши к переменной somevar в коде, то хром выведет во всплывающей подсказке её значение :
Вы видите сверху над переменной somevar подсказку с текстом undefined
Это и есть значение нашей переменной somevar - "undefined", так как текущая строка кода ещё не выполнилась, и значит, переменная пока не определена.
Мы можем выполнять код пошагово - при помощи функциональной клавиши F10 или нажимая на кнопку на панели :
Нажмем F10 - выполнение перейдет на одну строку дальше, и давайте теперь ещё раз подведем курсор мыши к переменной somevar :
Как мы видим, значение переменной изменилось, и теперь она равна 5, как и было задумано.
Давайте добавим нашу переменную в панель просмотра значений переменных, для этого раскроем справа раздел Watch и кликнем на значок "плюс" справа :
введем "somevar" и увидим значение в разделе Watch :
Добавление переменных (и целых выражений) в Watch особенно полезно, когда вам необходимо в процессе отладки отследить - как меняются сразу несколько переменных.
Таким образом , мы можем при помощи инструментов разработчика Chrome :
- просматривать исходный код исполняемых файлов JavaScript
- устанавливать и убирать точки останова
- просматривать значения переменных и выражений
- осуществлять пошаговое выполнение кода
- выполнять произвольные фрагменты кода в Console
То есть мы можем выполнять полноценный процесс отладки.
Однако, иногда нам может быть удобнее выполнять отладку непосредственно в Visual Stidio Code - это ускоряет процесс исправления ошибок в коде.
Процесс отладки там очень похож на отладку в Chrome, но есть несколько важных особенностей, которые мы рассмотрим позднее.