Используйте панель «Источники» для просмотра и редактирования ресурсов вашего веб-сайта, таких как таблицы стилей, файлы Javascript и изображения.
Обзор
Панель «Источники» позволяет делать следующее:
- Просмотр файлов .
- Отредактируйте CSS и JavaScript .
- Создавайте и сохраняйте фрагменты JavaScript , которые можно запускать на любой странице. Сниппеты похожи на букмарклеты.
- Отладка JavaScript .
- Настройте рабочую область , чтобы изменения, внесенные вами в DevTools, сохранялись в коде вашей файловой системы.
Откройте панель «Источники».
Чтобы открыть панель «Источники», выполните следующие действия:
- Откройте Инструменты разработчика .
- Откройте командное меню, нажав:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P.
- Начните вводить
sources
, выберите «Показать панель источников» и нажмите Enter .
Либо в правом верхнем углу выберите more_vert Дополнительные параметры > Дополнительные инструменты > Источники .
Просмотр файлов
Перейдите на вкладку «Страница» , чтобы просмотреть все ресурсы, загруженные страницей.
Как устроена вкладка «Страница» :
- Верхний уровень, такой как
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 в качестве редактора кода.
Чтобы начать, ознакомьтесь с разделом «Редактирование файлов с помощью рабочих пространств» .