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

Kayce Basques

Sofia Emelianova

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

Обзор

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

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

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

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

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

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

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

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

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

Инструменты разработчика удаляют ваши изменения 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);

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

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

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

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

Отладка JavaScript

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

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

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

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

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

Для обеспечения современных возможностей отладки веб-приложений, DevTools выполняет следующие действия:

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

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

Для получения более подробной информации см.:

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

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

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

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