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

Кейси Баски
София Емельянова
Sofia Emelianova
GitHub

Используйте панель «Источники» для просмотра и редактирования ресурсов вашего веб-сайта, таких как таблицы стилей, файлы Javascript и изображения.

Обзор

Панель «Источники» позволяет делать следующее:

Откройте панель «Источники».

Чтобы открыть панель «Источники», выполните следующие действия:

  1. Откройте Инструменты разработчика .
  2. Откройте командное меню, нажав:
    • macOS: Command + Shift + P
    • Windows, Linux, ChromeOS: Control + Shift + P.
  3. Начните вводить 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 элемента, вы увидите, что изменение вступит в силу немедленно.

Редактирование 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 в качестве редактора кода.

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