0.debugger

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

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

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

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

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

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

1. Запустите файл index.html.
2. Найдите начало выполнения кода.
3. Поставьте точку останова (breakpoint) внутри функции play.
4. Изначально вы не остановитесь на точке останова, так как код выполнился и все действия закончились. Поэтому обновите страницу, чтобы остановиться на точке.
5. Переходите к следующей конструкции по шагам (на кнопку F10). Если других точек останова нет, то программа будет выполняться только по циклу.
6. Затем поставьте точку останова внутри метода turn на 232 строке.
7. Продолжайте такое же выполнение до момента остановки в методе turn.
8. Наведите курсор на значение this.playerEnemy. Если у пользователя нет противника, то в вы увидите undefined.
9. В таком случае, выполнение кода по шагам на F10 или F11 зайдёт внутрь условия на 236 строке. После выполнения условия у бойца должен появиться противник. Если выполнять на F11 с заходом внутрь функции, то можно увидеть вход в метод chooseEnemy и процесс выбора противника.
10. Добавьте в панель Watch текущего воина: this.
11. Из панели Watch измените скорость воина (свойство speed).
12. Из панели Scope измените прочность оружия у воина (свойство durability у объекта weapon).
13. В отображаемом окне уменьшите количество здоровья у выбранного противника. Выставьте любое значение.
14. Откройте вкладку консоль и смените оружие у противника на нож. Для этого введите this.playerEnemy.weapon = new Knife().
15. Командой перехода внутрь конструкции попробуйте как можно глубже продвинуться по выполнению кода. Выполняйте код по шагам до нескольких методов внутрь, чтобы понять, как заполняется Call Stack.
16. Поставьте точку останова в методе isDead().
17. Добавьте условие для срабатывания точки останова: воин должен быть мёртв. То есть здоровье должно стать равно нулю: this.life == 0.
18. Продолжите выполнение пока не остановитесь в условной точке, которую создали не предыдущем шаге.
19. Убедитесь, что данный воин мёртв. Для этого в консоли введите this, разверните объект и убедитесь, что значение свойства life равно нулю.
20. Воскресите воина, исправив ему значение жизней. Изменить значение можно двойным кликом.
21. В панеле Breakpoints выключите все точки останова и продолжите выполнение.
22. Из консоли запустите битву с другими пользователями. Для этого в консоли выполните функцию play и передайте в неё массив с персонажами, аналогично тому, как вызывается функция в коде.