Обзор панели «Источники»

София Емельянова
Sofia Emelianova

Используйте панель « Источники Chrome DevTools», чтобы:

Просмотр файлов

Используйте панель «Страница» , чтобы просмотреть все ресурсы, загруженные страницей.

Панель «Страница».

Как организована панель «Страница» :

  • Верхний уровень, такой как top на скриншоте выше, представляет собой HTML-фрейм . Вы найдете top на каждой странице, которую вы посещаете. top представляет собой основной фрейм документа.
  • Второй уровень, например, developers.google.com на скриншоте выше, представляет собой источник .
  • Третий уровень, четвертый уровень и т. д. представляют каталоги и ресурсы, загруженные из этого источника. Например, на скриншоте выше полный путь к ресурсу devsite-googler-buttondevelopers.google.com/_static/19aa27122b/css/devsite-googler-button .

Щелкните файл на панели «Страница» , чтобы просмотреть его содержимое на панели «Редактор» . Вы можете просмотреть любой тип файла. Для изображений вы видите предварительный просмотр изображения.

Просмотр файла на панели редактора.

Редактировать CSS и JavaScript

Используйте панель «Редактор» для редактирования CSS и JavaScript. DevTools обновляет страницу для запуска нового кода.

Редактор также помогает вам отлаживать. Например, он подчеркивает и показывает встроенные всплывающие подсказки рядом с синтаксическими ошибками и другими проблемами, такими как неудачные операторы CSS @import и url() , а также атрибуты HTML href с недопустимыми URL-адресами.

Встроенная подсказка об ошибке синтаксиса.

Если вы отредактируете background-color элемента, вы увидите, что изменение вступит в силу немедленно.

Редактирование CSS на панели редактора.

Чтобы изменения JavaScript вступили в силу, нажмите Command + S (Mac) или Control + S (Windows, Linux). DevTools не перезапускает скрипт, поэтому вступают в силу только те изменения JavaScript, которые вы вносите внутри функций. Например, обратите внимание, что console.log('A') не запускается, тогда как console.log('B') работает.

Редактирование JavaScript на панели редактора.

Если бы DevTools повторно запустил весь скрипт после внесения изменений, то текст A был бы записан в консоль .

DevTools стирает изменения CSS и JavaScript при перезагрузке страницы. См. раздел «Настройка рабочей области» , чтобы узнать, как сохранить изменения в файловой системе.

Создание, сохранение и запуск фрагментов

Сниппеты — это скрипты, которые можно запускать на любой странице. Представьте, что вы неоднократно вводите следующий код в Консоль , чтобы вставить библиотеку jQuery на страницу, чтобы вы могли запускать команды jQuery из Консоли :

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

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

Фрагмент, который вставляет библиотеку jQuery на страницу.

Чтобы запустить фрагмент :

  • Откройте файл на панели «Фрагменты» и нажмите « Выполнить» . Кнопка «Выполнить». на панели действий внизу.
  • Откройте командное меню , удалите символ > , введите ! , введите имя фрагмента и нажмите Enter.

Дополнительную информацию см. в разделе «Запуск фрагментов кода с любой страницы» .

Отладка JavaScript

Вместо того, чтобы использовать console.log() для определения того, где ваш JavaScript работает не так, рассмотрите возможность использования инструментов отладки Chrome DevTools. Общая идея состоит в том, чтобы установить точку останова, которая является намеренным местом остановки в вашем коде, а затем пошагово выполнять ваш код, по одной строке за раз.

Пауза в точке останова.

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

См. раздел «Начало работы с отладкой JavaScript» , чтобы изучить основы отладки в DevTools.

Сосредоточьтесь только на своем коде

Chrome DevTools позволяет вам сосредоточиться только на написанном вами коде, отфильтровывая шум, создаваемый платформами и инструментами сборки, которые вы используете при создании веб-приложений.

Чтобы предоставить вам современные возможности веб-отладки, DevTools делает следующее:

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

Чтобы узнать больше, см.:

Настройте рабочее пространство

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

Чтобы начать, ознакомьтесь с разделом «Редактирование файлов с помощью рабочих пространств» .