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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

Если бы 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 на страницу.

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

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

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

Отладка JavaScript

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

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

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

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

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

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

• Разделяет созданный и развернутый код . Чтобы помочь вам быстрее найти код, панель «Источники» отделяет созданный вами код от связанного и минимизированного кода.
• Игнорирует известный сторонний код :
  • Панель «Источники» скрывает такие источники из дерева файлов на панели «Страница» .
  • Консоль скрывает такие кадры из трассировки стека .
  • Меню «Открыть файл» скрывает такие файлы из результатов поиска .

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

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

• Современная веб-отладка в Chrome DevTools
• Практический пример: улучшение угловой отладки с помощью DevTools

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

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

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