Tincr does two things.
To give you a complete illustration, let’s say you’re developing a Ruby on Rails web application. You would select “Ruby on Rails” in the dropdown on the Tincr panel and then select the local directory of your rails application. Once you’ve done that, Tincr knows enough about how a RoR application is structured that if you made a change inside of Chrome Developer Tools, it would be saved to the local file equivalent. If you made a change to an application script or stylesheet using TextMate or some other tool, the change would automatically be reloaded in Chrome (possibly without even refreshing the page, depending on how you configured Tincr).
It’s recommended that you install Tincr from the Chrome web store
Tincr adds a new panel to Chrome Developer Tools.
The Tincr panel is basically a configuration screen. It consists of a dropdown to select your application type for the current page and a browse button to select your application’s root folder.
To configure Tincr, follow these steps
You can tell Tincr exactly how you want it to behave for each individual url loaded in the browser.
After you select an application type and root folder, you are presented with a list of URL resources that are loaded for the current page. Tincr uses your application type to create initial mappings for these urls to files in your filesystem. You can view and edit these mappings under the Resources section on the Tincr panel.
Resource mappings are listed out on the configuration screen and they look like this.
If you select the Generated from another language checkbox. You’re given the option to Add Dependency. This option is for generated resources that may be compiled from multiple files. For example, SASS and LESS usually import partials.
If you add a dependency, the dependency is added underneath the original file mapping. You can remove the dependnency or add more.
Tincr uses the application type you specify as a template to get you started with mapping resources to the filesystem. After you select an application type and your root project directory, you can then configure Tincr further by mapping individual urls to their local files.
There are a couple of exceptions to being configurable. First, the “File url” application type is implicitly set if you use tincr from a file:// url. You can’t configure Tincr further if you’re developing against a file url. The reasoning is that it didn’t make sense to support this since it’s obvious where each url belongs in the file system.
Second, the resource customization feature is meant to replace Configuration files. Therefore, the “Configuration file” application type is being deprecated and will be removed in a later version. In the meantime, you can’t configure Tincr further if you use this application type.
If you’re developing using file:// urls, then there is no need to configure Tincr. It already knows how to associate the url to a local file. The controls on the configuration screen will be disabled.
One caveat with file urls, Tincr’s auto-reload will only detect changes underneath the inspected page’s base directory. Therefore, if your html file uses double dot syntax ‘../” to reference a script or stylesheet, changes to those files won’t be detected and auto-reloaded.
For RoR applications, select the Ruby on Rails option from the dropdown. Use the browse button to select your application’s base directory. This should be the directory from which you are running “rails server”.
You can use Tincr with unpacked Chrome extensions. To do this, use Chrome Developer Tools to inspect one of your extension pages (i.e. background.html). On the Tincr panel, select the Chrome extension project type from the Tincr dropdown, then use the browse button to select the base directory of your unpacked Chrome extension. You’ll now be able to edit your extensions scripts and stylesheets and use auto refresh for changed made externally.
You can use Tincr in conjunction with the Atlassian Plugin SDK. You’ll need to use atlas-run or atlas-debug to run your plugin. You also need to turn off web resource batching if you want to use Tincr to save files directly from Chrome. To turn off web batching, set the “plugin.webresource.batching.off” system property to true. The easiest way to do this is to AMPS Maven plugin in your pom.xml
This application type is deprecated and will be removed in a later version. See Configuring Resources for accomplishing the same thing with a different application type
For stuff that doesn’t have a built-in configuration, you can specify a configuration file with some regexes that tell Tincr how to map between a file and url. Name this file “tincr.json” and put it in your root directory. You can then select the “Configuration File” option in the Project Type dropdown, then browse to your web app root directory.
Here is an example tincr.json for RoR. You would typically use the built-in Ruby on Rails configuration instead of this file. This is only for illustration purposes.
/app/assets/stylesheets. Both scripts and stylesheets are served using the relative url