«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 эти маленькие полезности сильно помогут вам в процессе веб-разработки. Хотелось рассказать больше и подробнее в формате видео, но, к сожалению, отсутствие нормального микрофона не позволило это сделать. Всем приятного кодинга!

Only registered users can participate in poll. Log in, please.

Знали ли вы о данных инструментах?

  • 3.1%Знал про оба26
  • 5.2%Знал только про Workspace43
  • 2.6%Знал только про Сниппеты22
  • 89.1%Не знал741
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 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?
              • UFO just landed and posted this here
                  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 мог сохранять.

                            Only users with full accounts can post comments. Log in, please.