Редактирование файлов с помощью рабочих областей

Примечание

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

Внимание!

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

Обзор

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

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

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

Ограничения

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

Рабочие области не работают с этими платформами:

  • Приложение "Создание реагируй"

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

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

Действие 1: Настройка

Следуйте этим учебником, чтобы получить практические навыки работы с рабочими областями.

Настройка ролика

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

    Рис. 1

    Проект с сбоев

  2. Создайте app каталог на рабочем столе. Сохраняйте копии файлов в workspaces-demo каталоге. В оставшейся части этого учебника этот каталог называется ~/Desktop/app .

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

    cd ~/Desktop/app
    python -m SimpleHTTPServer # Python 2
    
    cd ~/Desktop/app
    python -m http.server # Python 3
    
  4. Откройте вкладку в Microsoft EDGE и перейдите на веб-сайт с локально размещенной версией. Доступ к ней можно получить с помощью URL-адреса, например localhost:8080 или http://0.0.0.0:8080 . Точный номер порта может отличаться от остальных.

    Рисунок 2

    Демонстрация
    ! [Демонстрация] ImageDemo

Настройка DevTools

  1. Нажмите клавиши Control + Shift + J \ (Windows ) или Command + Option + J \ (macOS ), чтобы открыть панель консоли DevTools.

    Рисунок3

    Панель консоли
    ! [Панель консоли] ImageConsolePanel

  2. Откройте вкладку источники .

  3. Откройте вкладку FileSystem (файловая система ).

    Рисунок4

    Вкладка " Файловая система "
    ! [Вкладка FileSystem] [ImageFilesystem]

  4. Нажмите кнопку Добавить папку в рабочую область.

  5. Выберите ~/Desktop/app .

  6. Нажмите кнопку Разрешить , чтобы предоставить DevTools разрешение на чтение и запись в каталог.
    На вкладке FileSystem теперь есть зеленая точка рядом с index.html , script.js и styles.css . Эти зеленые точки означают, что в DevTools установлено соответствие между сетевыми ресурсами страницы и файлами в ~/Desktop/app .

    Рисунок 5

    На вкладке FileSystem теперь показано соответствие между локальными и сетевыми файлами.
    ! [На вкладке FileSystem теперь отображается соответствие между локальными файлами и сетью] [ImageMapping]

Шаг 2: сохранение изменений CSS на диске

  1. Open (открыть) styles.css .

    Примечание

    color h1 Для свойства элементы задано значение fuchsia .

    Рисунок6

    Просмотр styles.css в текстовом редакторе
    ! [Просмотр стилей. CSS в текстовом редакторе] [ImageStylesFuchsia]

  2. Откройте вкладку элементы .

  3. Измените значение color свойства <h1> элемента на предпочтительный цвет.
    Помните о том, что для <h1> просмотра примененных к нему правил CSS в области стили необходимо щелкнуть элемент в дереве DOM . Зеленая точка рядом с styles.css:1 ней означает, что все изменения, внесенные вами, сопоставлены ~/Desktop/app/styles.css .

    Рисунок7

    Зеленый индикатор, связанный с файлом
    ! [Зеленый индикатор, связанный с файлом] [ImageStylesGreen]

  4. styles.cssСнова откройте текстовый редактор. colorСвойству будет присвоена предпочтительный цвет.

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

Шаг 3: сохранение изменений HTML на диске

Изменение HTML на панели "элементы"

Вы можете внести изменения в HTML-код с панели элементов, но ваши изменения в дереве DOM не сохраняются на диск и влияют только на текущий сеанс браузера.
Дерево DOM не является HTML-кодом.

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

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

  1. Откройте вкладку источники .

  2. Откройте вкладку страница .

  3. Нажмите кнопку (указатель). Откроется HTML-код для страницы.

  4. Заменить <h1>Workspaces Demo</h1> на <h1>I ❤️ Cake</h1> . Смотрите Рисунок 8.

  5. Control + S Чтобы сохранить изменения, нажмите клавиши \ (Windows ) или Command + S \ (macOS ).

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

    Рисунок8

    Для строки 12 установлено значение I ❤️ Cake
    ! [Изменение HTML-кода на панели «источники»] [ImageSourcesCakeHTML]

  7. Open (открыть) ~/Desktop/app/index.html . <h1>Элемент включает новый текст.

Шаг 4: сохранение изменений JavaScript на диске

Панель « источники » — это также место, где можно вносить изменения в JavaScript. Но иногда вам нужно получить доступ к другим панелям, таким как панель элементов или панель консоли , при внесении изменений на сайт. На панели « источники » есть способ открытия рядом с другими панелями.

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

  2. Нажмите клавиши Control + Shift + P \ (Windows ) или Command + Shift + P \ (macOS ). Откроется меню команд .

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

    Рисунок9

    Открытие вкладки " быстрый источник " с помощью меню команд
    ! [Открытие вкладки "быстрый источник" с помощью меню "команды"] [ImageCommandMenuQuickSource]

  4. Control + P Command + P Чтобы открыть диалоговое окно " Открытие файла ", нажмите клавиши \ (Windows ) или \ (macOS ). Смотрите Рисунок 10.

  5. Введите script команду app/script. js.

    Рисунок 10

    Открытие script.js с помощью диалогового окна " Открыть файл "
    ! [Открытие сценария. js с помощью диалогового окна "Открытие файла"] [ImageOpenFileDialog]

    Примечание

    Save Changes To Disk With WorkspacesСсылка в демонстрационной видеоролика будет регулярно применена.

  6. Добавьте следующий код в нижнюю часть сценария. js с помощью вкладки " быстрый источник ".

    console.log('greetings from script.js');
    document.querySelector('a').style = 'font-style:italic';
    
  7. Control + S Чтобы сохранить изменения, нажмите клавиши \ (Windows ) или Command + S \ (macOS ).

  8. Перезагрузите страницу.

    Примечание

    Ссылка на странице теперь будет курсивной.

    Рисунок11

    Ссылка на странице теперь курсивом
    ! [Ссылка на странице теперь курсивом] [ImageScriptItalic]

Дальнейшие действия

С помощью этого учебника вы можете настроить рабочие области в проекте.

[ImageFilesystem]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/workspaces-workspaces-Demo-Sources-FileSystem.MSFT.png "Рисунок 4: вкладка" FileSystem ""
[ImageMapping]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/workspaces-workspaces-Demo-Sources-FileSystem-Folder.MSFT.png "Рисунок 5: теперь на вкладке FileSystem показано соответствие между локальными и сетевыми файлами.
[ImageStylesFuchsia]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/workspaces-workspaces-Demo-Sources-FileSystem-CSS.MSFT.png "Рисунок 6: Просмотр стилей. CSS в текстовом редакторе"
[ImageStylesGreen]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/workspaces-workspaces-Demo-Elements-Styles-CSS.MSFT.png "Рисунок 7: зеленый индикатор, связанный с файлом"
[ImageSourcesCakeHTML]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/workspaces-workspaces-Demo-Sources-Page-H1.MSFT.png "Рисунок 8: изменение HTML на панели" источники "

[ImageCommandMenuQuickSource]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/workspaces-workspaces-Demo-Search-Show-Quick-Source.MSFT.png "Рисунок 9: Открытие вкладки" быстрый источник "с помощью командного меню
[ImageOpenFileDialog]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/workspaces-workspaces-Demo-Search-script.MSFT.png "Рисунок 10: открытие сценария. js с помощью диалогового окна" открыть файл "
[ImageScriptItalic]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/workspaces-workspaces-Demo-Elements-Styles-Quick-Source-script.MSFT.png "Рисунок 11: ссылка на странице теперь курсивом"

Примечание

Части этой страницы представляют собой изменения, основанные на работе, созданной и предоставленной компанией Google и использованными в соответствии с условиями, описанными в лицензии Creative Commons 4,0 международная лицензия.
Исходная страница будет найдена здесь и была написана с помощью Kayce Basques \ (технический писатель, Chrome DevTools \ & Lighthouse ).

Лицензия Creative Commons
Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.