Пользователь
0,0
рейтинг
3 июня 2013 в 19:20

Разработка → «Workspace» и «Сниппеты» в Chrome Dev Tools tutorial

image
Workspace и Сниппеты — 2 инструмента в Chrome Dev Tools, о существовании которых не все знают. Эти инструменты упрощают веб-разработку, поэтому я решил сегодня о них рассказать.


Подготовка
Лучше всего поставить самую последнюю версию Chrome Canary. В последней стабильной версии данные фичи тоже можно активировать, но лично у меня Workspace там не заработал.

Workspace и Сниппеты в последней версии Canary можно использовать и без активации Developer Tools experiments — инструменты доступен сразу после установки браузера.

Если вы решили попробовать Сниппеты на стабильной версии (Workspace почему-то не работает): переходим на волшебную страничку chrome://flags/#enable-devtools-experiments и включаем поддержку "Developer Tools experiments". Перезапускаем браузер. После этого в настройках —> Experiments нужно поставить галочку перед пунктом "Snippets support" и перезапустить браузер еще раз. Пункт для нерабочего Workspace там тоже есть: «File system folders in Sources Panel».


Workspace или забываем о «Сохранить как»
Workspace — это возможность редактировать файлы на локальном диске из браузера. Кроме того, можно «смапить» файлы на сервере и файлы на локальном диске для того, чтобы все изменения файлов на вкладке Sources сразу же сохранялись в файлы на диске.

Итак, приступим. Открываем панель разработчика своим любимым способом (например, Cmd/Ctrl + Shift + I). Переходим в настройки (кнопка в правом нижнем углу). Там находим вкладку "Workspace". Именно здесь и происходит настройка нужных локальных папок и «маппингов». Не стесняясь, жмем на "Add folder" и выбираем папку проекта на локальном диске.



Очень важно теперь поднять глазки наверх и увидеть запрос браузера на доступ к папке на диске. Соглашаемся, жмем "Allow".


Дальше есть 2 пути: направо и, как многие любят, налево. Либо настраиваем «маппинг» прямо здесь, вручную забиваем адрес в «URL prefix», адрес папки в «Folder path». Либо закрываем окошко настроек и переходим во вкладку Sources. В навигаторе будет видны обе папки: текущего открытого ресурса и локальная, которую мы ранее с вами задали в настройках. Нажимаем правой кнопкой мыши на любом файле из той или из другой папки и нажимаем "Map to (file system | network) resource". Выбираете с каким файлом нужно «смапить», если предложит перезагрузить Inspector — соглашайтесь.


Всё, теперь 2 папки в инспекторе превратятся в одну, и все изменения будут автоматически сохраняться в локальную директорию.

Сниппеты
Очень удобная фича. Какой-то часто-выполняемый кусок кода можно вынести отдельно. Можно найти всё в той же вкладке Sources, только в инспекторе нужно выбрать вкладку Snippets.

Создавать очень просто: правой кнопкой мыши -> New. Выполнять кликом по иконке запуска слева снизу или Ctrl + Enter.


Заключение
Надеюсь, что 2 эти маленькие полезности сильно помогут вам в процессе веб-разработки. Хотелось рассказать больше и подробнее в формате видео, но, к сожалению, отсутствие нормального микрофона не позволило это сделать. Всем приятного кодинга!
Знали ли вы о данных инструментах?

Проголосовало 816 человек. Воздержалось 112 человек.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Олег Кислицын @olegafx
карма
91,3
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (25)

  • –2
    Спасибо. Вот если в Chrome добавить поддержку FTP(в разрезе изменения файлов на сервере) и подсветку всяких PHP да Perl то можно выбросить прочие IDE )))
    • +5
      FTP надо бы давно уже выбросить. Примонтируйте свой webroot через SSHFS — и можно будет пользоваться маппингом в Dev Tools уже сейчас.
      • 0
        Некоторые проекты над которыми я работяю живут на хостингах которые не дают таких конфеток :( так что приходится мирится с фтп.
        • +2
          ftp drive или аналог — поможет вам.
          • 0
            Спасибо, как-то не подумал об этом…
    • +1
      Наличие FTP и подсветки в браузере ещё не даёт мощи IDE ;)
  • +2
    Отличные инструменты. Еще бы поддержку sass. )
    • +5
      Так она там есть. Или вы намекаете на то, что мне еще в посте стоило про это написать? :)
      • 0
        + там не только sass, там вообще любой css препроцессор (тот же less) можно прикрутить с помощью source maps
      • +2
        Ага, посмотрите на процент незнающих.
      • 0
        Конечно, стоило. Я первый раз слышу, и даже не особо представляю: как оно возможно? Хотя бы в личку ссылку киньте.Спасибо.
  • 0
    Активизировал: Включить экспериментальные инструменты разработчика. Вкладку не вижу. Версия 27.0.1453.94 m

    • 0
      Отметьте «File system folders in Sources Panel». Спасибо за замечание.
  • –9
    на что больше похож логотип на Google Doc или на Promt?
  • 0
    На MacOS 10.7.5 и Chrome 27.0.1453.93 не заработало. Настраивается нормально, но после перезапуска во вкладке Sources нет исходников.
    d.pr/i/5OcY
    Кто-нибудь знает как решить эту проблему?
    • 0
      А у вас вообще «Add file system» заработало? Потому что у меня на стабильной ветке не работает. Поэтому я и написал, что лучше Canary поставить.
      • 0
        Add file sustem вместо Add folder. При выборе папки ничего не происходит. Так что прийдется ждать новых версий
        • 0
          Происходит, надо в выбираемую папку добавить руками файл. Какое имя? смотрите ошибки в консоли Dev Tools.
  • 0
    Про Workspace не знал. Недавно нактнулся на интересный сайт с описанием интересных фич девелоперских консолей разных браузеров: devtoolsecrets.com.
  • +2
    Лучше бы они постоянные зависания в devtools исправили, уже 3 или 4 релиза тянется.
  • 0
    Да, инструмент хороший, лишь бы они на ошибки постоянные в Google Chrome не забивали.
  • 0
    Полезно. Ещё бы научить dev tools переключать контекст вслед за активной вкладкой в режиме отдельного окна — цены бы ему не было. А то неудобно держать охапку окон dev tools на каждую вкладку.
  • 0
    Хочу такое (file mapping / workspace) в FF.
  • 0
    Эх, если бы правки в elements мог сохранять.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.