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

Кейси Баски
София Емельянова
Sofia Emelianova
GitHub

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

Обзор

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 . Точный номер порта может отличаться.

    Локально размещенная демонстрационная страница открылась в Chrome.

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

  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 .

    Просмотр стилей.css в текстовом редакторе.

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

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

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

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

    Установка зеленого цвета для свойства цвета элемента h1.

    Зеленая точка Зеленая точка. рядом со 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 .

    Попытка изменить HTML из дерева DOM панели «Элементы».

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

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

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

  • Дерево узлов, которое вы видите на панели «Элементы» , представляет собой 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> по-прежнему отображает новый текст.

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

  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 для изменения CSS и отладки JavaScript .