Это руководство дает возможность попрактиковаться, настроив рабочее пространство, чтобы вы могли использовать его в своих собственных проектах. Workspace позволяет сохранять изменения, внесенные вами в DevTools, в исходный код, хранящийся на вашем компьютере.
Обзор
Workspace позволяет сохранить изменения, внесенные вами в DevTools, в локальную копию того же файла на вашем компьютере. Например, предположим:
- У вас есть исходный код вашего сайта на рабочем столе.
- Вы запускаете локальный веб-сервер из каталога исходного кода, чтобы сайт был доступен по адресу
localhost:8080
. - У вас есть
localhost:8080
открытый в Google Chrome, и вы используете DevTools для изменения CSS сайта.
Если рабочая область включена, изменения CSS, вносимые вами в DevTools, сохраняются в исходный код на вашем рабочем столе.
Ограничения
Если вы используете современную среду, она, вероятно, преобразует ваш исходный код из формата, который вам легко поддерживать, в формат, оптимизированный для максимально быстрого запуска. Workspace обычно может сопоставить оптимизированный код с исходным исходным кодом с помощью карт исходного кода .
Сообщество DevTools работает над поддержкой возможностей, предоставляемых исходными картами, в различных средах и инструментах . Если у вас возникли проблемы при использовании рабочего пространства с выбранной вами платформой или оно заработало после некоторой пользовательской настройки, создайте ветку в списке рассылки или задайте вопрос в Stack Overflow, чтобы поделиться своими знаниями с остальным сообществом DevTools. .
Связанная функция: локальные переопределения
Локальные переопределения — это еще одна функция DevTools, похожая на рабочую область. Используйте локальные переопределения для имитации веб-контента или заголовков запросов, не дожидаясь изменений серверной части, или когда вы хотите поэкспериментировать с изменениями на странице, и вам нужно видеть эти изменения при загрузке страницы, но вас не заботит сопоставление ваших изменений с исходный код страницы.
Шаг 1: Настройка
Пройдите это руководство, чтобы получить практический опыт работы с рабочей областью.
Настроить демо-версию
- Клонируйте этот демо-репозиторий в какой-нибудь каталог на вашем компьютере. Например, в
~/Desktop
. Запустите локальный веб-сервер в
~/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
.Откройте вкладку в Google Chrome и перейдите на локально размещенную версию сайта. Вы сможете получить к нему доступ через URL-адрес, например
localhost:8000
. Точный номер порта может отличаться.
Настройте инструменты разработчика
Откройте DevTools на локальной демонстрационной странице.
Перейдите в «Источники» > «Рабочая область» и настройте рабочую область в папке
devtools-workspace-demo
, которую вы клонировали. Вы можете сделать это несколькими способами:- Перетащите папку в редактор источников .
- Нажмите ссылку «Выбрать папку» и выберите папку.
- Нажмите Добавьте папку и выберите папку.
В приглашении вверху нажмите «Разрешить» , чтобы предоставить DevTools разрешение на чтение и запись в каталог.
На вкладке «Рабочая область» рядом с index.html
, script.js
и styles.css
теперь отображается зеленая точка. Эти зеленые точки означают, что DevTools установил соответствие между сетевыми ресурсами страницы и файлами в devtools-workspace-demo
.
Шаг 2. Сохраните изменение CSS на диске.
Откройте
/devtools-workspace-demo/styles.css
в текстовом редакторе. Обратите внимание, что для свойстваcolor
элементовh1
установлено значениеfuchsia
.Закройте текстовый редактор.
Вернувшись в DevTools, перейдите на вкладку «Элементы» .
Измените значение свойства
color
элемента<h1>
на свой любимый цвет. Для этого:- Щелкните элемент
<h1>
в дереве DOM . - На панели «Стили» найдите правило CSS
h1 { color: fuchsia }
и измените цвет на свой любимый. В этом примере цвет установлен на зеленый.
Зеленая точка рядом со
styles.css:1
на панели «Стили» означает, что любые внесенные вами изменения сопоставляются с/devtools-workspace-demo/styles.css
.- Щелкните элемент
Снова откройте
/devtools-workspace-demo/styles.css
в текстовом редакторе. Свойствуcolor
теперь присвоен ваш любимый цвет.Перезагрузите страницу. Цвет элемента
<h1>
по-прежнему установлен на ваш любимый цвет. Это работает, потому что когда вы внесли изменения, DevTools сохранил их на диск. А затем, когда вы перезагрузили страницу, ваш локальный сервер предоставил измененную копию файла с диска.
Шаг 3. Сохраните изменение HTML на диске.
Попробуйте изменить HTML на панели «Элементы».
- Откройте вкладку «Элементы» .
Дважды щелкните текстовое содержимое элемента
h1
с надписьюWorkspaces Demo
и замените его наI ❤️ Cake
.Откройте
/devtools-workspace-demo/index.html
в текстовом редакторе. Изменения, которое вы только что внесли, нет.Перезагрузите страницу. Страница возвращается к исходному заголовку.
Дополнительно: Почему это не работает
- Дерево узлов, которое вы видите на панели «Элементы» , представляет собой DOM страницы.
- Чтобы отобразить страницу, браузер извлекает HTML-код по сети, анализирует его, а затем преобразует его в дерево узлов DOM.
- Если на странице есть JavaScript, этот JavaScript может добавлять, удалять или изменять узлы DOM. CSS также может изменить DOM через свойство
content
. - Браузер в конечном итоге использует DOM, чтобы определить, какой контент он должен предоставлять пользователям браузера.
- Поэтому окончательное состояние страницы, которую видят пользователи, может сильно отличаться от HTML-кода, полученного браузером.
- Это затрудняет DevTools определение места сохранения изменений, внесенных на панели «Элементы» , поскольку на DOM влияют HTML, JavaScript и CSS.
Короче говоря, дерево DOM !==
HTML.
Измените HTML на панели «Источники»
Если вы хотите сохранить изменения в HTML-коде страницы, сделайте это на панели «Источники» .
- Перейдите в «Источники» > «Страница» .
- Нажмите (указатель) . Откроется HTML-код страницы.
- Замените
<h1>Workspaces Demo</h1>
на<h1>I ❤️ Cake</h1>
. - Нажмите Command + S (Mac) или Control + S (Windows, Linux, ChromeOS), чтобы сохранить изменения.
Перезагрузите страницу. Элемент
<h1>
по-прежнему отображает новый текст.Откройте
/devtools-workspace-demo/index.html
. Элемент<h1>
содержит новый текст.
Шаг 4. Сохраните изменение JavaScript на диске.
Панель «Источники» также является местом для внесения изменений в JavaScript. Но иногда вам необходимо получить доступ к другим панелям, таким как панель «Элементы» или панель «Консоль» , при внесении изменений на ваш сайт. Есть способ открыть панель «Источники» рядом с другими панелями.
- Откройте вкладку «Элементы» .
- Нажмите Command + Shift + P (Mac) или Control + Shift + P (Windows, Linux, ChromeOS). Откроется командное меню .
Введите
QS
, затем выберите «Показать быстрый источник» . В нижней части окна DevTools теперь есть вкладка «Быстрый исходный код» .На вкладке отображается содержимое
index.html
— последнего файла, который вы редактировали на панели «Источники» . Вкладка «Быстрый исходный код» предоставляет вам редактор из панели «Источники» , так что вы можете редактировать файлы, когда другие панели открыты.Нажмите Command + P (Mac) или Control + P (Windows, Linux, ChromeOS), чтобы открыть диалоговое окно «Открыть файл» .
Введите
script
, затем выберите devtools-workspace-demo/script.js .Обратите внимание на ссылку
Edit and save files in a workspace
в демо-версии. Он стилизован регулярно.Добавьте следующий код в конец файла script.js на вкладке «Быстрый исходный код» .
document.querySelector('a').style = 'font-style:italic';
Нажмите Command + S (Mac) или Control + S (Windows, Linux, ChromeOS), чтобы сохранить изменения.
Перезагрузите страницу. Ссылка на странице теперь выделена курсивом.
Следующие шаги
Вы можете настроить несколько папок в рабочей области. Все такие папки перечислены в Настройки > Рабочая область .
Далее вы узнаете, как использовать DevTools для изменения CSS и отладки JavaScript .