Отладка

Один из самых важных уроков, которые я усвоил в своем путешествии по программированию, заключается в том, что без твердых знаний об отладке и передового опыта вы быстро потеряетесь в море, а разочарование от неполучения желаемых результатов заставит вас хотеть выбросьте свой компьютер и, возможно, даже себя, в ближайшее окно.

Для JavaScript отладка выполняется внутри браузера, где вы можете изолировать, вызывать и запрашивать данные по своему усмотрению. Теперь, когда все это вполне возможно в окне Chrome, у меня в голове раздался ворчливый голос, говорящий, что, хотя все это хорошо, наверняка есть какой-то способ внести больше отладки в среду кодирования.

Я был рад обнаружить, что это не только возможно, но и очень просто, если вы делаете все в правильном порядке.

ЧТО ТЕБЕ ПОНАДОБИТСЯ:

Прежде чем мы начнем, вам нужно скачать несколько инструментов, если у вас их еще нет. Первый — Chrome Debugger, а второй — Browser Preview, оба, как мне кажется, были разработаны одним из руководителей команды разработчиков VSCode.

После загрузки (это можно сделать изнутри VSCode, и вы можете захотеть перезагрузить для полной мере) вы будете готовы к работе!

НАСТРОЙКА РАБОЧЕГО ПРИЛОЖЕНИЯ

Скачав все необходимые инструменты, вам теперь понадобится несколько файлов, чтобы иметь возможность запустить рабочий сервер и протестировать отладчик. Создайте папку и внутри нее создайте файлы index.js, index.html, styles.css и db.json. Последние два являются необязательными, если вы хотите заполнять данные из серверной среды и экспериментировать со стилями CSS на своей новой странице.

Примечание к вашему файлу json: вы должны убедиться, что ваши данные json являются объектом, я использовал формат:

{
    “objectName”: [{
      {object1},
      {object2}
    ]
}

Только один, о котором следует помнить, если вы копируете данные из онлайн-API для тестирования.

После создания файлов вам нужно настроить файл index.html — если вы знаете, как это сделать, пропустите эту часть. Я использую это для тестовых файлов, вы можете настроить по мере необходимости, но убедитесь, что тег сценария включен либо в заголовок (в этом случае вам нужно будет включить прослушиватель событий DOMContentLoaded в ваш файл JS), либо в нижней части вашего тела раздел.

<!DOCTYPE html>
 <html lang=”en”>
 <head>
  <meta charset=”UTF-8">
  <meta name=”viewport” content=”width=device-width, initial-  scale=1.0">
  <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
  <title>Test</title>
 </head>
 <body>
  <h1>This is a test environment</h1>
  <script src=”./index.js”></script>
 </body>
</html>

Выполнив эту часть, теперь вам нужно создать конфигурацию для вашего рабочего сервера и сеанса отладки.

РЕШЕНИЕ: Если вы хотите, чтобы ваш живой сервер отображался внутри VSCode, вам нужно открыть свои расширения (Код > Настройки > Расширения) и установить предварительный просмотр в браузере: Start-URL такой же, как адрес вашего живого сервера по умолчанию (у меня http:/ /localhost:5500).

Затем вам нужно перейти по списку расширений к Live Server Config, найти параметр использования предварительного просмотра браузера и проверить его. Это затем будет использовать ваш предварительный просмотр VSCode в качестве окна отладки.

Теперь, когда вы это сделали, вы готовы создать профиль отладки. Откройте свой проект внутри VSCode и щелкните значок отладки слева. Вверху рядом с зеленой стартовой стрелкой у вас должно быть раскрывающееся меню, выберите «Добавить конфигурацию», и откроется новая вкладка.

Вам сразу же должен быть представлен список выбора, в котором двумя верхними вариантами должны быть «Browser-Preview». Хотя я уверен, что запуск должен работать, я получаю меньше ошибок с подключением, поэтому выберите его. Если вместо этого вам предоставлены параметры на панели команд окна VSCode, просто выберите параметр «Браузер», и он создаст для вас два параметра конфигурации. Теперь вам нужно будет добавить еще одну строку перед сохранением и выходом:

В конце ключа «name»: добавьте запятую, создайте новую строку и вставьте в «webRoot»: «${workspaceFolder}». Теперь сохраните, и вы можете закрыть вкладку. Файл конфигурации теперь должен выглядеть так:

{
  “version”: “0.2.0”,
    “configurations”: [
      {
        “type”: “browser-preview”,
        “name”: “Browser Preview: Attach”,
        “request”: “attach”,
        “webRoot”: “${workspaceFolder}”
      },
      {
        “type”: “browser-preview”,
        “request”: “launch”,
        “name”: “Browser Preview: Launch”,
        “url”: “http://localhost:3000",
        “webRoot”: “${workspaceFolder}”
      }
    ]
  }

НАСТРОЙТЕ СЕРВЕР И ОТЛАДЧИК

Чтобы все заработало, сделайте следующее (это может работать в другом порядке, но это работает для меня):

Запустите свой живой сервер, нажав кнопку в правом нижнем углу окна VSCode.
Затем откройте браузер внутри VSCode.
Если у вас есть файл данных, запустите свой JSON-сервер (json-server — смотрите db.json).
Щелкните переключатель панели отладчика слева. Выберите «Предварительный просмотр в браузере: прикрепить» и начните с зеленой стрелки. Вам будет задан вопрос, какую операцию вы хотите отладить с помощью подсказки VSCode, выберите сервер, который вы только что настроили.
Теперь вы увидите элемент управления отладчиком браузера (очень похожий на те, что находятся внутри браузера Chrome).

Теперь вы готовы к отладке.

ПРАКТИКА ОТЛАДКИ

Вместо того, чтобы вводить отладчики в наш код, мы можем установить точки останова, щелкнув левой кнопкой мыши слева от номера строки. Если ваш отладчик работает, появится красный кружок и останется там, где вы щелкнули. Если он сразу превращается в серое кольцо, вы сделали что-то не так в конфиге — обычно я забыл включить webRoot внутри моего конфига. Теперь у вас есть точка отладки, и она будет вести себя точно так же, как ключевое слово отладчика. Если выделенная команда является частью настройки загрузки DOM, вы получите немедленный перерыв, и окно предварительного просмотра станет тусклым, как и следовало ожидать в Chrome, в противном случае вам нужно будет выполнить команду, чтобы заставить отладчик нажать.

После того, как ваша точка останова была активирована, щелкните консоль отладки на нижней панели VSCode, и вы можете начать печатать, как в Chrome, для опроса ваших данных, выражений и переменных.

ПРИМЕЧАНИЕ. Если вы предпочитаете использовать выражения console.log() для оценки ваших данных, ваши выходные данные также появятся в этом поле. Однако через секунду вы увидите, что вам, вероятно, не нужно будет ничего вводить (кроме, возможно, оценок тестового кода) или снова использовать console.log().

Настоящая красота отладчика терминала заключается в том, что вы можете просто выделить команды и переменные внутри терминала, чтобы увидеть, какие значения содержатся. Давайте проверим это, как только вы вставите действующую точку останова, заставьте ее нажать и наведите курсор на переменные, которые были до останова. Вы увидите всплывающее меню (вы можете уменьшить задержку его появления, если хотите через настройки), которое будет содержать все детали объекта, переменной или команды, к которым вы можете получить доступ через регулярный опрос в терминале браузера Chrome.

Теперь вы, возможно, попытались навести курсор на что-то в линии разрыва или после нее и обнаружили, что не можете получить никакой информации, потому что вы недостаточно глубоко проникли в данные, чтобы получить эту информацию. Но не волнуйтесь, Chrome и/или VSCode помогут вам. Вспомните те замечательные инструменты браузера, которые появились, когда вы запустили отладчик, вернитесь к ним и нажмите стрелку вниз.

Это переместит вас внутрь текущего блока и позволит вам получить доступ к информации внутри циклов и других выражений. Теперь, если вы наведете курсор на переменные, вы получите информацию об этом конкретном объекте в меню наведения. W0000T!

Сейчас я закончил с моей текущей строкой, я хочу знать, что находится внутри переменных, указанных в моей следующей строке. Нужно ли перемещать отладчик? Ошибка N00B. Вы просто нажимаете стрелку вверх, и она перебрасывает вас на следующую строку, в которой вы также можете использовать стрелку вниз, чтобы перейти к более сложным выражениям для их оценки.

Отлично, теперь я закончил текущий просмотр текущей итерации в моем цикле и хочу проверить, что представляет собой следующий оцениваемый объект. Теперь я использую изогнутую стрелку над точкой, чтобы перейти к следующему фрагменту данных в цикле, на который я смотрю. В зависимости от выражения вам, возможно, придется щелкнуть несколько раз, чтобы очистить текущую итерацию — вы узнаете это по расположению желтой стрелки внутри вашего кода. Если он возвращается слева от номера строки, вы вошли в следующую итерацию, и вам нужно будет войти внутрь выражения, чтобы оценить информацию об объекте.

Прохладный. Что ж, теперь я закончил это выражение и внес изменения в свой код, и я хотел бы увидеть их в действии. Щелкните стрелку с полным кругом, чтобы перезагрузить страницу тестового браузера, и мы снова готовы к работе.

Красный квадрат в конце отключит ваш текущий сеанс отладки. И вуаля, вот оно. Полная среда отладки, не выходя из удобного окна VSCode.

Отладка

Похожие вопросы