Chrome DevTools

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

Рабочая область DevTools

Скачть DevTools

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

На снимке экрана ниже, показан пример использования рабочей области в действии. Календарь сайта был загружен через localhost, а в панели отображена локальная файловая система с учетом корневой папки сайта. Изменения, вносимые в файлы в этой папке, сохранятся на диск. В скриншоте ниже, некоторые не сохраненные изменения были внесены в Calendar.css, поэтому рядом с названием файла символ «*».

Инструмент для Chrome: DevTools
Изменения, вносимые в файлы в этой папке, сохранятся на диск

Что бы сохранить изменения на диск, требуется нажатие сочетания клавиш Ctrl+S или Command+S.

Обратите внимание, что:

  • изменения из панели в элементах DOM не сохраняются.
  • только стили, определенные во внешнем файле CSS могут быть изменены. Изменения element.style или встроенные стили не сохраняется на диск. Если у вас есть встроенные стили, они могут быть изменены из панели источников.
  • Стили изменённые из панели, сохраняются немедленно; для этого нужно нажать Ctrl+S или Command+S.
Елемент рабочей группы
Сохранить изменения на диск.
к меню ↑

Добавление папки рабочего пространства

Существует два способа, использовать рабочею область: создания локального содержимого папки, доступную для DevTools, и отображение этой папки по адресу URL.

Что бы добавить новую папку рабочего пространства:

  1. В DevTools, нажмите кнопку Settings  чтобы открыть настройки DevTools.
  2. Нажмите кнопку Workspace.
  3. Нажмите кнопку Add Folder.
  4. Перейдите к папке, содержащей ваши исходные файлы проекта и нажмите кнопку Select.
  5. При появлении запроса нажмите кнопку Allow чтобы разрешить расширению DevTools полный доступ к папке.

Новая рабочая папка вместе с источниками, загруженных через localhost будет отображается на панели. Теперь вы можете в реальном времени редактировать файлы в вашей рабочей папке, все изменения будут сохраняться на диск.

Новая папка рабочего пространства
Новая папка рабочего пространства
к меню ↑

Отображение папки по URL

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

Карта рабочей папки, по URL:

  1. В панели, щелкните правой кнопкой мыши или Control+щелчок на имя файла в рабочей папке.
  2. Выберите Map to Network Resource.
Выбор сетевого ресурса
Выбор сетевого ресурса текущей загруженной страницы
  1. Перезагрузить страницу в браузере Chrome.

Панель теперь должна показать содержимое вашего сайта локальной папки рабочего пространства, а не источников localhost, смотрите снимок.

Содержимое вашего сайта
Содержимое сайта локальной папки рабочего пространства

Если вы по-прежнему видите источник localhost, обновите страницу в браузере Chrome.

Существует два способа связать сетевую папку и рабочую папку:

  • Щелкните правой кнопкой мыши (или Control+щелчок) на сетевой ресурс и выберите Map to File System Resource..
  • Вручную добавить сопоставления, во вкладке рабочей области DevTools, диалоговое окно с настройками.
к меню ↑

Отладка scss (эксперимент)

Редактировать из панели в реальном времени файлы Sass (.scss), а также просмотр результатов без необходимости выходить из DevTools или обновлять страницу. При редактировании элементов, Sass с генерирует файл CSS, панели отображает ссылку на .scss файл, а не с генерируемый файл .css.

Отладка файлов Sass
Редактировать из панели в реальном времени файлы Sass

Нажав на ссылку, в панели откроется окно (редактора) файлов SCSS. Вы можете внести любые изменения, которые вы хотите.

Окно (редактора) файлов SCSS
Окно (редактора) файлов SCSS

При сохранении изменений в файле SCSS (в DevTools или в другом месте), SCSS компилятор заново создает файлы CSS. Затем DevTools перезагружает вновь созданный файл CSS.

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

gem install sass -v '>=3.3.0alpha' --pre

Вам также потребуется включить функция отладки SCSS в DevTools:

  1. Откройте about:flags в Chrome.
  2. Включить Enable Developer Tools experiments..
  3. Перезапустите браузер Chrome.
  4. Откройте параметры DevTools и нажмите кнопку Experiments.
  5. ВключитьSupport for Sass (илиSass stylesheet debugging, в зависимости от версии браузера, который вы используете).

Когда SCSS установлен, запустите компилятор SCSS, и наблюдайте за изменениями в вашем исходном файле SCSS и создание карты исходных файлов для каждого с генерированного файла CSS, например:

sass --watch --sourcemap sass/styles.scss:styles.css

Если вы используете Компас, обратите внимание, что Компас не поддерживает экспериментальную версию SCSS, и вы не сможете использовать отладку SCSS с Компасом.

к меню ↑

Заключение

В этой статье иллюстрации работы расширения для браузера Chrome, инструменты DevTools для отладки кода на локальном сервере с возможностью сохранения результатов на диск. А также экспериментальная отладка кодов SCSS.