Узнайте, как отлаживать свой JavaScript с помощью Google Chrome

  1. Использование Google Chrome для отладки
  2. заключение
  3. Полезные ссылки
  4. Узнайте больше о мобильном;)

Отладка или отладка данного кода - это следование пошаговому выполнению определенного фрагмента кода.

В этой статье мы уделим особое внимание отладке на клиентских языках , в частности JavaScript. Для тех, кто не знает, что означает клиентская сторона, это термин, который определяет, что язык работает на «клиентской стороне», в отличие от PHP или ASP, например, которые на стороне сервера, то есть работают на «стороне сервера».

Но как вы можете отлаживать приложение, которое работает на клиентском компьютере? Ответ прост, в браузере. Недостаток очевиден: если вы можете отлаживать JavaScript через браузер, клиент также может, т. Е. Клиент на другом компьютере в другой части мира, также может получить доступ к системе и отладить файлы JavaScript. Риск этого будет зависеть от того, как реализован ваш код.

Примечательно, что язык JavaScript является вспомогательным языком и вопросы безопасности приложений (базы данных, управления профилями и т. д.) должны быть реализованы на основном языке (PHP, ASP и т. д.), в противном случае вы будете уязвимы и, следовательно, подвержены хакерским атакам. ,

Используйте его только для реализации процедур, требующих динамизма и ответов в реальном времени.

Использование Google Chrome для отладки

Ради личного выбора и простоты использования (главным образом потому, что инструменты отладки уже встроены), мы будем использовать Google Chrome для отладки js (JavaScript) файлов. Вы можете использовать Firefox или любой другой браузер, который поддерживает эту функцию, не стесняйтесь.

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

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

Пойдем на практику:

  1. Открыв Google Chrome на странице «Система» или «Сайт», нажмите F12, чтобы открыть консоль браузера. Отладка или отладка данного кода - это следование пошаговому выполнению определенного фрагмента кода Рисунок 1 Консоль Google Chrome
  2. Нажмите на первый значок в левом нижнем углу, где вы увидите подсказку «Разблокировать в отдельном окне». Это значок, который выглядит как окно поверх другого окна. Это откроет консоль в окне для лучшей обработки. Рисунок 2 Консоль в отдельном окне
  3. Открыв Консоль в новом окне, мы можем увидеть множество вкладок, каждая из которых имеет определенную функцию, но для этого урока мы изучим только вкладку Источники, где вы увидите файлы JavaScript. Вот почему вы должны разделить их в отдельном файле (как упомянуто выше), чтобы он был указан среди Источников. Обратите внимание на изображение ниже, что файл main.js был выбран. Рисунок 3 Выбор файла main.js
  4. Теперь давайте выберем строку и щелкнем по ее нумерации, поэтому мы будем вставлять точку останова, то есть точку останова на этой строке. Каждый раз, когда браузер пытается прочитать эту конкретную строку, он останавливает выполнение и поток переходит к отладчику.

    Ниже приведена функция, в которой был выполнен тест, где передаются два параметра.

    Рисунок 4  Вставка точки останова Рисунок 4 Вставка точки останова

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

  5. После того, как мы отметим линию, мы будем запускать систему до тех пор, пока не будет вызвана эта функция, поэтому будет активирована точка останова. На изображении ниже вы можете видеть, что функция была вызвана и выполнение процедуры было прервано для отладки. На правой стороне панели вы можете отслеживать значения переменных, часы и так далее. Рисунок 5 Использование отладчика и просмотр значения переменных

    Просто чтобы быть понятным, часы похожи на «наблюдатели», которые показывают вам значение данной переменной по всему сценарию, т.е. если вы объявили целое число в начале кода и через 4000 строк, вы хотите увидеть его значение, просто посмотри на свои часы.

    Чтобы добавить наблюдение к любой переменной, просто выберите переменную (во время отладки, то есть во время работы отладчика), щелкните правой кнопкой мыши, затем «Добавить к просмотру».

  6. Если вы нажмете F8, отладчик «перейдет» к следующей точке останова, а если ее нет, весь сценарий будет запущен без отладки, как если бы отладка была отменена. Нажав F10, вы перейдете к следующей строке. Если есть какая-либо функция или метод, он просто переходит без ввода метода, если вы хотите ввести метод, вы должны использовать ярлык F11.

заключение

Использование отладки в клиентских языках , таких как JavaScript, все еще мало изучено, но очень полезно. Этот пришел для того, чтобы ускорить процесс разработки и тестирования. Независимо от браузера цель здесь состоит в том, чтобы показать, что это уже возможно, и что отладка приложений с помощью «alert» уже ушла в прошлое.

Когда мы говорим о JavaScript, мы обобщаем, но если вы видите на рисунке 5, становится ясно, что мы отлаживаем код, написанный на JQuery , который, тем не менее, JavaScript. Это открывает ряд возможностей, так как возможностей для отладки очень много.

«Жизнь без проблем не стоит того, чтобы жить». - Сократ

Полезные ссылки

  • Скачать Google Chrome : Загрузить Google Chrome
  • Javascript : Официальный сайт JavaScript
  • Официальный сайт PHP : PHP (рекурсивная аббревиатура для PHP: Препроцессор гипертекста) - это широко используемый язык сценариев с открытым исходным кодом, который особенно хорошо подходит для веб-разработки и может быть встроен в HTML.

Узнайте больше о мобильном;)

  • Учебник JavaScript :

    В этой статье мы рассмотрим, как использовать код JavaScript в наших веб-приложениях и на веб-сайтах. У нас будет введение в этот замечательный язык, который растет в веб-разработке.

  • Подготовка среды для программирования на PHP :

    В этом курсе мы узнаем, как подготовить среду программирования для PHP. Для этого мы установим веб-сервер (Apache), интерпретатор PHP и базу данных MariaDB (MySQL). Все эти компоненты будут установлены вместе через XAMPP.

  • Отладка вашего кода с помощью Google Chrome :

    Вот как использовать инструмент Google Debug в ваших интересах.

Но как вы можете отлаживать приложение, которое работает на клиентском компьютере?