0.debugger

Работа с отладкой в браузере

Перед началом работы

Ознакомьтесь с базовыми возможностями отладки в браузере Google Chrome. Ссылка на туториал.

Ознакомьтесь с функциональностью проекта. Ссылка на описание проекта.

Практическое задание

Целью задания является практическое ознакомление с отладкой кода. Необходимо на практике разобраться как выполняется реализованный код. Сам код доделывать не нужно. Всё готово. Необходимо только "поковырять" его и посмотреть как он работает по шагам.

• Запустите файл index.html.
• Найдите начало выполнения кода.
• Поставьте точку останова (breakpoint) внутри функции play.
• Изначально вы не остановитесь на точке останова, так как выполнение кода уже выполнилось и все действия закончились. Поэтому обновите страницу, чтобы остановится на остановленной точке.
• Переходите к следующей конструкции по шагам (на кнопку F10). Если других точек останова нет, то выполнение программы будет выполняться только по циклу.
• Затем поставьте точку останова внутри метода turn на 232 строке.
• Продолжайте такое же выполнение до момента остановки в методе turn.
• Наведите курсор на значение this.playerEnemy. Если у пользователя нет противника, то в вы увидите undefined.
• В таком случае, выполнение кода по шагам на F10 или F11 зайдёт внутрь условия на 236 строке. После выполнения условия у бойца должен появиться противник. Если выполнять на F11 с заходом внутрь функции, то можно увидеть вход в метод chooseEnemy и процесс выбора противника.
• Добавьте в панель Watch текущего воина: this.
• Из панели Watch измените скорость воина (свойство speed).
• Из панели Scope измените прочность оружия у воина (свойство durability у объекта weapon).
• В отображаемом окне уменьшите количество здоровья у выбранного противника. Выставите любое значение.
• Откройте вкладку консоль и смените оружие у противника на нож. Для этого введите this.playerEnemy.weapon = new Knife().
• Командой перехода внутрь конструкции попробуйте как можно глубже продвинуться по выполнению кода. Выполняйте код по шагам до нескольких методов внутрь, чтобы понять как заполняется Call Stack.
• Поставьте точку останова в методе isDead().
• Добавьте условие для срабатывания точки останова: воин должен быть мёртв. То есть количество его здоровья равно нулю: this.life == 0.
• Продолжите выполнение пока не остановитесь в условной точке, которую создали не предыдущем шаге.
• Убедитесь, что данный воин мёртв. Для этого в консоли введите this, разверните объёкт и убедитесь, что значение свойства life равно нулю.
• Воскресите воина, исправив ему значение жизней (двойным кликом на значении свойства измените значение).
• В панеле Breakpoints выключите все точки останова и продолжите выполнение.
• Из консоли запустите битву с другими пользователями. Для этого в консоли выполните функцию play и передайте в неё массив с персонажами, аналогично тому, как вызывается функция в коде.