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

Кейси Баски
София Емельянова
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 в качестве редактора кода.

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