Як змінювати і зберігати файли локально прямо з браузера за допомогою функції Workspaces?

Більшість веб-розробників звикли писати код у спеціалізованих редакторах, а потім перемикатися в браузер для перевірки результатів. Однак інструменти розробника надають можливість редагувати вихідний код прямо "на льоту" і зберігати ці зміни в реальну файлову систему вашого комп'ютера. Ця функція називається Workspaces, і вона суттєво прискорює процес верстки та відлагодження статичних файлів без необхідності постійного складання проєкту.

Для налаштування цієї можливості перейдіть на вкладку Sources в панелі розробника і виберіть підвкладку Filesystem. Натисніть на кнопку додавання папки і виберіть кореневий каталог вашого проєкту на жорсткому диску. Браузер запитає у вас дозвіл на доступ до цієї директорії, після чого ви повинні підтвердити його, натиснувши кнопку дозволу у верхній частині вікна.

Після успішного підключення папки вам потрібно буде зв'язати мережеві ресурси сторінки з локальними файлами. Натисніть правою кнопкою миші по будь-якому файлу в дереві ресурсів вкладки Page і виберіть пункт Map to file system resource. Інструменти розробника автоматично зіставлять завантажений скрипт або таблицю стилів з локальним аналогом з вашої папки.

Тепер будь-які зміни, які ви вносите в код прямо в панелі розробника, будуть миттєво записуватися у файл на вашому комп'ютері. Ви можете налаштувати автоматичне збереження, і тоді зміни з'являться і у вашій системі контролю версій. Це позбавляє від рутинного копіювання коду з консолі назад у текстовий редактор і дозволяє зосередитися на вирішенні завдань інтерфейсу.