2013-05-19 3 views
37

Может ли кто-нибудь сказать мне, как работают рабочие среды рабочего стола разработчика Chrome. Я считаю, что он доступен только в Канарских островах.Отображения рабочих мест для разработчиков разработчика Chrome

Я думал, что он должен позволять мне вносить изменения в правила CSS в виде элементов и автоматически их сохранять в локальных файлах, как показал Пол Ирланд в Google IO 2013 года. Я не могу получить эту функцию до Работа.

https://developers.google.com/events/io/sessions/325206725

ответ

54

Он работает только в канарейки в данный момент.

EDIT: Теперь в Chrome (начиная с версии 30+)

1) вам необходимо открыть панель Devtools настройки. Он имеет раздел «Рабочая область».

Screenshot of settings page

2) в этом разделе вам необходимо нажать на 'Добавить папку' пункта. Он отобразит диалог выбора папки.

3) После выбора папки вы увидите информационную панель о правах доступа к папке.

Screenshot of access rights infobar

4) В результате вы увидите два верхних элемента уровня в панели Source панели выбора файлов. В моем случае это была локальная локальная папка файловой системы localhost: 9080 и devtools. На данный момент вам нужно создать сопоставление между файлами сайта и вашими локальными файлами. Вы можете сделать это через контекстное меню в файле.

Mapping screenshot

Это не имеет значения, какой файл на карту, локальный или файл сайта.

5) в этот момент devtools спросят вас о перезагрузке. restart screenshot

После перезапуска Devtools покажет вам запись папки палить в панели файлов и применить все изменения, которые вы делаете в локальный файл каждый раз, когда вы нажимаете Ctrl + S или Ctrl + S на макинтош.

+2

Я должен был объяснить, что выполнил все вышеуказанные шаги, и он все еще не работал, когда я использовал «codeavengers.com» в качестве моего сервера. («codeavengers.com» сопоставляется с localhost в моем файле хостов Windows). Когда я перешел на использование localhost в моих URL-адресах, он работал, как описано выше. Однако отладка JavaScript, похоже, перестала работать. – Mike

+0

Впоследствии я решил установить расширение Chrome Tincr. Пока это отлично работает. http://addyosmani.com/blog/lets-tincr-bi-directional-editing-and-saving-with-the-chrome-devtools/ – Mike

+0

Необходимо тщательно проверить, что сопоставление применяется. Возможно, структура вашего сайта не отражает структуру локальных папок. Также вам нужно иметь два сопоставления для двух URL-адресов, один для localhost и другой для codeavengers.com. Если devtools не может сопоставить локальный файл с файлом сайта, он не может установить в нем точку останова. – loislo

4

Просто исправление того, что сказал Лисасло. «Сейчас он работает только в канарейке».

Вы можете вызвать все эти экспериментальные функции в стабильных хромовых версиях, набрав Хром: // флаги в адресной строке.

Смежные вопросы