Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h3>1. Открытие инструментов разработчика</h3>

2 <p>Чтобы открыть инструменты разработчика (DevTools) в Google Chrome, есть несколько способов:</p>

3 <ul><li><strong>С помощью клавиатуры</strong>: Нажмите Ctrl + Shift + I (или Cmd + Option + I на Mac).</li>

4 <li><strong>С помощью меню</strong>: Щелкните правой кнопкой мыши на странице и выберите пункт меню Просмотреть код (или Inspect), затем выберите вкладку Console или Sources.</li>

5 <li><strong>Через Chrome меню</strong>: Нажмите на три точки в правом верхнем углу браузера, выберите Дополнительные инструменты > Инструменты разработчика.</li>

6 </ul><h3>2. Переход на вкладку Sources</h3>

7 <p>После открытия инструментов разработчика выполните следующие шаги:</p>

8 <ul><li>Перейдите на вкладку Sources (Исходники).</li>

9 <li>Здесь вы увидите панель с деревом файлов, где находятся все загруженные скрипты и ресурсы вашего веб-приложения.</li>

10 </ul><h3>3. Установка точки останова</h3>

11 <p>Чтобы начать отладку JavaScript:</p>

12 <ul><li>Найдите файл JavaScript, который вы хотите отладить, в дереве файлов и откройте его.</li>

13 <li>Найдите нужную строку, добавьте точку останова (breakpoint). Для этого просто щелкните по номеру строки слева от кода. Точка останова будет выделена синим цветом.</li>

14 </ul><h3>4. Запуск кода</h3>

15 <p>Теперь, когда у вас установлена точка останова, вы можете запустить вашу программу.</p>

16 <ul><li>Если это веб-приложение, просто обновите страницу (F5 или Ctrl + R).</li>

17 <li>Или выполните действие, которое запускает данный JavaScript код (например, нажатие на кнопку, переход по ссылке и т.д.).</li>

18 </ul><h3>5. Отладка кода</h3>

19 <p>Когда выполнение JavaScript достигнет точки останова, код приостановится:</p>

20 <ul><li><strong>Просмотр значений переменных</strong>: В правой части окна вы можете увидеть панель Scope, где отображаются значения переменных.</li>

21 <li><strong>Консоль</strong>: Перейдите на вкладку Console, чтобы выполнить команды JavaScript в контексте текущей точки остановки.</li>

22 <li><strong>Шаги выполнения</strong>: Используйте кнопки управления отладкой:<ul><li>Resume script execution (F8) - продолжает выполнение до следующей точки останова.</li>

23 <li>Step over (F10) - шагнуть через текущую строку, обходя вызовы функций.</li>

24 <li>Step into (F11) - войти в текущую функцию и отладить её.</li>

25 <li>Step out (Shift + F11) - выйти из текущей функции.</li>

26 </ul></li>

27 </ul><h3>6. Завершение отладки</h3>

28 <p>Когда вы закончите отладку, вы можете удалить точки останова, нажав на них снова, либо нажав правой кнопкой мыши и выбрав опцию для удаления всех точек останова. После этого вы можете закрыть инструменты разработчика, нажав Ctrl + Shift + I (или Cmd + Option + I на Mac), или просто щелкнув по X в верхнем правом углу DevTools.</p>

29 <h3>7. Использование дополнительных возможностей</h3>

30 <p>Chrome DevTools предлагает много других возможностей для отладки JavaScript:</p>

31 <ul><li>Анализ стека вызовов (Call Stack) для понимания того, как вы попали в определённую точку выполнения.</li>

32 <li>Просмотр сетевых запросов на вкладке Network.</li>

33 <li>Профилирование производительности на вкладке Performance.</li>

34 <li>Использование вкладки Memory для диагностики утечек памяти или анализа использования ресурсов.</li>

35 </ul>