Как изменять и сохранять файлы локально прямо из браузера с помощью функции Workspaces?

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

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

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

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