Редактирование и сохранение файлов в рабочей области

Kayce Basques

Sofia Emelianova

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

Внимание: прежде чем приступить к этому уроку, вы должны знать, как:

• Используйте HTML, CSS и JavaScript для создания веб-страницы .
• Используйте DevTools для внесения основных изменений в CSS .
• Запустите локальный веб-сервер HTTP .

Обзор

Workspace позволяет сохранить изменения, внесенные вами в DevTools, в локальную копию того же файла на вашем компьютере. Например, предположим:

• У вас есть исходный код вашего сайта на рабочем столе.
• Вы запускаете локальный веб-сервер из каталога исходного кода, чтобы сайт был доступен по адресу localhost:8080 .
• У вас есть localhost:8080 открытый в Google Chrome, и вы используете DevTools для изменения CSS сайта.

Если рабочая область включена, изменения CSS, вносимые вами в DevTools, сохраняются в исходный код на вашем рабочем столе.

Ограничения

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

Сообщество DevTools работает над поддержкой возможностей, предоставляемых исходными картами, в различных средах и инструментах . Если у вас возникли проблемы при использовании рабочего пространства с выбранной вами платформой или оно заработало после некоторой пользовательской настройки, создайте ветку в списке рассылки или задайте вопрос в Stack Overflow , чтобы поделиться своими знаниями с остальным сообществом DevTools. .

Связанная функция: локальные переопределения

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

Шаг 1: Настройка

Пройдите это руководство, чтобы получить практический опыт работы с рабочей областью.

Настроить демо-версию

1. Клонируйте этот демо-репозиторий в какой-нибудь каталог на вашем компьютере. Например, в ~/Desktop .

2. Запустите локальный веб-сервер в ~/Desktop/devtools-workspace-demo . Ниже приведен пример кода для запуска SimpleHTTPServer , но вы можете использовать любой сервер, который предпочитаете.

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   В оставшейся части этого руководства этот каталог будет называться /devtools-workspace-demo .

3. Откройте вкладку в Google Chrome и перейдите на локально размещенную версию сайта. Вы сможете получить к нему доступ через URL-адрес, например localhost:8000 . Точный номер порта может отличаться.

   

Настройте инструменты разработчика

1. Откройте DevTools на локальной демонстрационной странице.

2. Перейдите в «Источники» > «Рабочая область» и настройте рабочую область в папке devtools-workspace-demo которую вы клонировали. Вы можете сделать это несколькими способами:

   • Перетащите папку в редактор источников .
   • Нажмите ссылку «Выбрать папку» и выберите папку.
   • Нажмите Добавьте папку и выберите папку.

3. В приглашении вверху нажмите «Разрешить» , чтобы предоставить DevTools разрешение на чтение и запись в каталог.

   

На вкладке «Рабочая область» рядом с index.html , script.js и styles.css теперь отображается зеленая точка. Эти зеленые точки означают, что DevTools установил соответствие между сетевыми ресурсами страницы и файлами в devtools-workspace-demo .

Шаг 2. Сохраните изменение CSS на диске.

1. Откройте /devtools-workspace-demo/styles.css в текстовом редакторе. Обратите внимание, что для свойства color элементов h1 установлено значение fuchsia .

   

2. Закройте текстовый редактор.

3. Вернувшись в DevTools, перейдите на вкладку «Элементы» .

4. Измените значение свойства color элемента <h1> на свой любимый цвет. Для этого:

   1. Щелкните элемент <h1> в дереве DOM .
   2. На панели «Стили» найдите правило CSS h1 { color: fuchsia } и измените цвет на свой любимый. В этом примере цвет установлен на зеленый.

   

   Зеленая точка рядом со styles.css:1 на панели «Стили» означает, что любые внесенные вами изменения сопоставляются с /devtools-workspace-demo/styles.css .

5. Снова откройте /devtools-workspace-demo/styles.css в текстовом редакторе. Свойству color теперь присвоен ваш любимый цвет.

6. Перезагрузите страницу. Цвет элемента <h1> по-прежнему установлен на ваш любимый цвет. Это работает, потому что когда вы внесли изменения, DevTools сохранил их на диск. А затем, когда вы перезагрузили страницу, ваш локальный сервер предоставил измененную копию файла с диска.

Шаг 3. Сохраните изменение HTML на диске.

Попробуйте изменить HTML на панели «Элементы».

Предупреждение: рабочий процесс, который вы собираетесь попробовать, не работает. Вы пробуете это сейчас, чтобы потом не тратить время на попытки выяснить, почему это не работает.

1. Откройте вкладку «Элементы» .

2. Дважды щелкните текстовое содержимое элемента h1 с надписью Workspaces Demo и замените его на I ❤️ Cake .

   

3. Откройте /devtools-workspace-demo/index.html в текстовом редакторе. Изменения, которое вы только что внесли, нет.

4. Перезагрузите страницу. Страница вернется к исходному заголовку.

Дополнительно: Почему это не работает

Примечание. В этом разделе описывается, почему рабочий процесс из раздела «Попробуйте изменить HTML на панели «Элементы»» не работает. Вы можете пропустить этот раздел, если вам не важно, почему.

• Дерево узлов, которое вы видите на панели «Элементы» , представляет собой DOM страницы.
• Чтобы отобразить страницу, браузер получает HTML-код по сети, анализирует его, а затем преобразует его в дерево узлов DOM.
• Если на странице есть JavaScript, этот JavaScript может добавлять, удалять или изменять узлы DOM. CSS также может изменить DOM через свойство content .
• Браузер в конечном итоге использует DOM, чтобы определить, какой контент он должен предоставлять пользователям браузера.
• Поэтому окончательное состояние страницы, которое видят пользователи, может сильно отличаться от HTML-кода, полученного браузером.
• Это затрудняет DevTools определение места сохранения изменений, внесенных на панели «Элементы» , поскольку на DOM влияют HTML, JavaScript и CSS.

Короче говоря, дерево DOM !== HTML.

Изменение HTML на панели «Источники»

Если вы хотите сохранить изменения в HTML-коде страницы, сделайте это на панели «Источники» .

1. Перейдите в «Источники» > «Страница» .
2. Нажмите (указатель) . Откроется HTML-код страницы.
3. Замените <h1>Workspaces Demo</h1> на <h1>I ❤️ Cake</h1> .
4. Нажмите Command + S (Mac) или Control + S (Windows, Linux, ChromeOS), чтобы сохранить изменения.

5. Перезагрузите страницу. Элемент <h1> по-прежнему отображает новый текст.

   

6. Откройте /devtools-workspace-demo/index.html . Элемент <h1> содержит новый текст.

Шаг 4. Сохраните изменение JavaScript на диске.

Панель «Источники» также является местом для внесения изменений в JavaScript. Но иногда вам необходимо получить доступ к другим панелям, таким как панель «Элементы» или панель «Консоль» , при внесении изменений на ваш сайт. Есть способ открыть панель «Источники» рядом с другими панелями.

1. Откройте вкладку «Элементы» .
2. Нажмите Command + Shift + P (Mac) или Control + Shift + P (Windows, Linux, ChromeOS). Откроется командное меню .

3. Введите QS , затем выберите «Показать быстрый источник» . В нижней части окна DevTools теперь есть вкладка «Быстрый исходный код» .

   

   На вкладке отображается содержимое index.html — последнего файла, который вы редактировали на панели «Источники» . Вкладка «Быстрый исходный код» предоставляет вам редактор из панели «Источники» , так что вы можете редактировать файлы, когда другие панели открыты.

4. Нажмите Command + P (Mac) или Control + P (Windows, Linux, ChromeOS), чтобы открыть диалоговое окно «Открыть файл» .

5. Введите script , затем выберите devtools-workspace-demo/script.js .

   

6. Обратите внимание на ссылку Edit and save files in a workspace в демо-версии. Это регулярно стилизовано.

7. Добавьте следующий код в конец файла script.js на вкладке «Быстрый исходный код» .

   document.querySelector('a').style = 'font-style:italic';
   

8. Нажмите Command + S (Mac) или Control + S (Windows, Linux, ChromeOS), чтобы сохранить изменения.

9. Перезагрузите страницу. Ссылка на странице теперь выделена курсивом.

Следующие шаги

Успех: Поздравляем! Теперь вы знаете, как сохранить в источниках изменения, внесенные вами в DevTools на локально размещенный веб-сайт.

Вы можете настроить несколько папок в рабочей области. Все такие папки перечислены в Настройки > Рабочая область .

Далее вы узнаете, как использовать DevTools для изменения CSS и отладки JavaScript .