В предыдущем уроке, уроке 6, мы рассмотрели все о переменных, именах переменных, назначении переменных и типах значений, а также многое другое. Урок 6 можно найти по следующей ссылке ниже.
В уроке 6 также были затронуты некоторые методы отладки и устранения неполадок, где мы показали, где в вашем браузере можно найти инструменты разработчика, помогающие при отладке. Также в уроке 5 мы представили оповещения как еще одну форму отладки и техники проверки ошибок. Теперь в Уроке 7 мы подробнее рассмотрим отладку вашего кода, обязательно ознакомьтесь с Уроком 6, если вы еще этого не сделали, так как он показывает вам с картинками, как получить доступ к инструментам разработчика в браузере Google Chrome и к консоли в инструментах разработчика. .
ОТЛАДКА ОШИБОК / Устранение неполадок
Мы должны быть полностью осведомлены о том, что ошибки кодирования неизбежно случаются, часто называемые ошибками, и, к сожалению, никакой спрей от ошибок не будет работать с этими ошибками в вашем коде. 🤣 Кодирование подвержено ошибкам, но пользователи по умолчанию не видят ошибок в браузере. Если в скрипте что-то пойдет не так, мы не увидим, что сломалось/не работает, и не сможем это исправить. Поэтому нам нужно использовать другие методы, чтобы найти и исправить ошибки.
Как видно из последнего урока — урока 6, использование инструментов разработчика может помочь увидеть ошибки и получить много другой полезной информации о ваших скриптах. Инструменты разработчика встроены в браузеры и имеют множество функций.
Большинство разработчиков склоняются к использованию браузеров Google Chrome или Mozilla Firefox для разработки, потому что эти браузеры имеют лучшие инструменты разработчика. Другие браузеры также предоставляют инструменты разработчика, иногда со своими специальными функциями, но не такие продвинутые, как Chrome или Firefox. Поэтому у большинства разработчиков есть любимый браузер, и они переключаются на другие чаще для проверки совместимости и только в том случае, если проблема связана с конкретным браузером.
В дополнение к деталям урока 6, ярлык для открытия инструментов разработчика в Google Chrome можно получить с помощью ярлыка:
Нажмите F12 на компьютерах с Windows или нажмите клавиши Command Option J на Mac.
Когда в инструментах разработчика вкладка «Консоль» используется для отладки, приведенный выше ярлык открывается с вкладкой «Консоль» в инструментах разработчика по умолчанию, что удобно. Вы также можете пройти через пункты меню, чтобы попасть туда, как показано в Уроке 6. Ниже приведено изображение из этого урока, показывающее, как найти Инструменты разработчика в Google Chrome.
При поиске ошибок и использовании окна консоли инструментов разработчика вы увидите сообщения об ошибках, выделенные красным цветом, с описанием. Справа от сведений об ошибке находится интерактивная ссылка на исходный файл с номером строки, в которой произошла ошибка.
В окне консоли инструментов разработчика команды JavaScript также можно вводить и тестировать прямо в консоли, поскольку в ней есть интерактивная командная строка, которая может запускать фрагменты кода. Чтобы вставить несколько строк кода, нажимайте Shift+Enter в конце каждой строки кода.
Способ доступа к консоли и инструментам разработчика в каждом браузере различается. Большинство браузеров могут использовать F12 (на компьютерах с Windows) для открытия инструментов разработчика. Однако, если это не сработает, вы можете выполнить поиск в Интернете о том, как получить доступ к консоли разработчика с помощью имени браузера, который вы используете, чтобы узнать, как получить доступ к этому удобному инструменту.
Внешний вид инструментов разработчика в каждом браузере очень похож, и как только вы узнаете, как использовать эти инструменты, вы сможете легко переключиться на другой. Обратите внимание, что в браузере Safari (доступном на компьютерах Mac, не поддерживаемом Windows/Linux) доступ к инструментам разработчика немного отличается. В Safari вам необходимо сначала включить меню «Разработка», открыв меню «Настройки», а затем перейдя на панель «Дополнительно», где внизу необходимо установить флажок «Показать меню разработки» в строке меню. Клавиши Command Option C могут переключаться в окно консоли. Может появиться новый пункт верхнего меню под названием «Разработка», в котором есть много команд и опций.
Инструменты разработчика, доступные в браузерах, позволяют просматривать ошибки, запускать команды, проверять переменные и многое другое.
В своем коде вы можете выполнять отладку/устранение неполадок с помощью кода console.log() для тестирования кода с помощью консоли инструментов разработчика браузера. Вы можете ввести пример кода console.log с инструкциями в круглых/квадратных скобках, которые вы хотите протестировать, и они появятся в окне консоли. Важно удалить или закомментировать код console.log() после завершения разработки.
Другой инструмент отладки/устранения неполадок можно найти в редакторе IDE/кода, в зависимости от того, что вы используете. В Visual Studio Code есть пункт меню терминала, помогающий в отладке с окном, которое обычно появляется в нижней части экрана. Было бы лучше, если бы вы обратились к документации редактора кода, который вы используете, чтобы увидеть, какие функции отладки у них есть.
ПРЕДУПРЕЖДЕНИЯ
Как уже обсуждалось в Уроке 5, вы можете создавать оповещения, которые выводят всплывающее окно в браузере, используя в качестве примера следующий код:
‹script› alert("Привет. Я JavaScript!" ); ‹/скрипт›
Некоторые люди используют оповещения для тестирования и отладки; эти сценарии предупреждений являются примером оператора.
ЗАЯВЛЕНИЯ
В коде JavaScript используется множество операторов, и каждый оператор может выполнять базовую операцию, как показано в приведенном выше коде предупреждений. Выполняя множество инструкций, вы можете решать сложные задачи. Каждое утверждение пишется в отдельной строке и лучше всего завершается точкой с запятой.
Операторы — это синтаксические конструкции/фрагменты кода и команды, используемые для выполнения действий. Вы можете иметь столько операторов в своем коде, сколько хотите; Операторы обычно разделяются точкой с запятой ;, и каждый оператор начинается с новой строки для удобства чтения.
Точка с запятой может быть опущена в большинстве случаев, когда существует разрыв строки, и хотя новая строка может обычно подразумевать точку с запятой, это не означает всегда! Бывают случаи, когда новая строка не означает точку с запятой, и поэтому рекомендуется ставить точки с запятой, чтобы сохранить единообразие кода и избежать ошибок, когда точки с запятой требуются и могут быть пропущены.
Рекомендации
Некоторые полезные ресурсы, в том числе те, которые используются в качестве справочных материалов для этой статьи, включают:
Эти ресурсы (со ссылками на их веб-сайты) предлагают более глубокое погружение в JavaScript, а также в другие языки, включая HTML, CSS и другие, чтобы помочь вам в вашем путешествии по кодированию в веб-разработку. Они также покажут вам программирование на практике с информацией и упражнениями, которые помогут вам на этом пути. © Салли М.
Надеюсь, вам понравился этот урок по устранению неполадок и отладке JavaScript, а также вы узнали новую информацию. У вас должна быть четкая картина:
- Отладка с помощью инструментов разработчика и других инструментов
- Заявления и многое другое.
Ждем вас на следующем уроке — уроке 8, чтобы узнать больше об основах JavaScript. Урок 8 можно найти по ссылке ниже.
© Салли М. — Все тексты и изображения в этой истории принадлежат Автору — Салли М. (если не указано иное). Это письмо подпадает под действие Закона об авторском праве. Салли М. — Автор, потратила много времени на написание этой статьи. Автор добавил этот текст из-за нарушения авторских прав людьми, использующими Medium. Последнее обновление этой статьи: 16 августа 2022 г.
Если вам нравятся эти уроки, обратите внимание, что вы можете пожертвовать учителю и кормлению/кофе писателя, чтобы продолжить эти уроки и другие замечательные произведения. Ознакомьтесь с подробным описанием 'Поощрение автора' ниже.
