Tincr — расширение для Chrome, позволяющее при редактировании CSS (js) в панели Developer Tools, сохранять изменения в исходных файлах. Эдакое избавление ctrl+c -> alt+tab -> ctrl+v
Установка
Установить можно либо из bitbucket.org/ryanackley/tincr либо из Chrome WebStore
В первом случае для установки нужно будет включать developer mode, во втором все происходит проще.
После установки в панели Developer Tools появится новая вкладка Tincr, на которой нужно будет произвести первоначальную настройку расширения, точнее — показать место, где лежат css и js файлы проекта. Либо выбрать что-то из уже имеющегося в наборе, например для варианта «Ruby on Rails» стили будут подбираться из /app/assets/stylesheets, скрипты из /app/assets/javascripts.
Также есть заготовки «Chrome Extension», «HTTP Web Server», «Attlassian Plugin» и «Configuration File».
Последний вариант для тех, чья структура проекта не похожа на варианты выше.
Файл конфигурации представляет из себя список регулярок, должен называться «Tincr.json» и находиться в корне проекта.
Допустим, у вас имеется следующая структура каталогов:
+ app/
— js/
— css/
— ***/
+ ***/
И при этом вы обращаетесь к ним без указания каталога «app», т.е. /js/jquery.js
В этом случае файл должен выглядеть так:
{
"toFile" : [
{"from": "/(.+\\.js)",
"to": "/app/js/$1"},
{"from": "/(.+\\.css)",
"to": "/app/css$1"}
],
"fromFile" : [
{"from": "(\\\\|/)app\\1(?:js|css)
\\1(.+(\\.js|\\.css))(\\.[a-zA-Z]+)?$",
"to": "/$2?body=1"}
]
}
Секция «toFile» используется для указания путей к файлам, в которые сохранять изменения,
«fromFile» — для обновления информации на странице без ее перезагрузки.
Использование
Просто редактируем все что нужно в панели Developer Tools — все внесенные изменения тут же оказываются в исходных файлах.
Вывод
Интересное дополнение, в итоге немного выгоднее использования вкладки «source» или же переноса кода из developer tools в файл руками.