permalink

18

Lets Tincr: Bi-directional Editing And Saving With The Chrome DevTools

Following on from my post last year on the Chrome DevTools AutoSave project, I’d like to share another useful extension Nikita Vasilyev brought to my attention called Tincr, by Ryan Ackley.

We often find ourselves switching back and forth between the Chrome Developer Tools and a text editor while debugging. This can sometimes feel unnecessarily time-consuming. We make changes to scripts and styles from within the DevTools as part of our debug session, check what changes were made and then have to manually apply them to our source files. Similarly, unless you have a watch or live Reload process setup, updates to your source files require a browser reload.

Tincr changes that. The idea is that you can:

  • Make changes inside the DevTools (to scripts and styles) which are then automatically reflected in your source files
  • Make changes to your source files (CSS/JavaScript) which result in a browser reload showing your changes

In short, you get bi-directional editing without the need to leave the Developer Tools and your debug session unless you really need to.

This solves the problem of changes you make inside the DevTools only persisting until you’ve reloaded the page. You no longer have to worry about changes not being saved to the file-system nor do you have to worry about copying and pasting changes from the tools to your editor.

Installation

Grab the latest sources from https://bitbucket.org/ryanackley/tincr. Although the Tincr site recommends finding it on the Chrome Web Store, it’s currently still going through the review process and so the sources are your best option for getting started.

Once extracted, load Tincr as an unpacked extension in Chrome whilst in developer mode (to enable developer mode to go chrome://extensions and check ‘Developer mode’).

Setup

Once you’ve installed Tincr, you’ll be presented with a new panel in the DevTools. The Tincr panel essentially lets you configure options such as the root directory for your application as well as the project type you’re working on. 

Tincr supports 4 application types (Ruby on Rails, Chrome Extension, Atlassian Plugin, Configuration file).

For example, if you’re a Ruby developer and are debugging your app with the DevTools, simply select the RoR option. This will expect your scripts to be stored under /app/assets/javascripts and your stylesheets under /app/assets/stylesheets. Changes to these files will result in a reload.

If you’re like me, and the above doesn’t describe your typical file-path setup, you’ll want to opt for the ‘Configuration file’ option. A Tincr config file basically contains a number of regular expressions informing Tincr how it should map between files and URLs. It should be named tincr.json and stored in your root directory.

The below is a config file which maps between scripts stored in app/js and stylesheets stored in app/css to their relative URLs /js and /css.

{
    "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"}
    ]
}

and similarly, the RoR config file (just for reference), looks like:

{
    "toFile" : [
        {"from": "/assets/(.+\\.js)",
         "to": "/app/assets/javascripts/$1"},
        {"from": "/assets/(.+\\.css)",
         "to": "/app/assets/stylesheets/$1"}
    ],
    "fromFile" : [
        {"from": "(\\\\|/)app\\1assets\\1
(?:javascripts|stylesheets)\\1(.+(\\.js|\\.css))
(\\.[a-zA-Z]+)?$",
         "to": "/assets/$2?body=1"}
    ]
}

toFile describes how it should save from the DevTools and basically iterates through each from resource, matching it to a file using the to pattern, which is relative to your base directory. The fromFile section is used for live reloading and is also relative to the base directory.

This is used to improve the file-to-url relationship inference, where you may be working with source files that require compilation (e.g CoffeeScript), which isn’t supported in auto-save but can have compiled sources reloaded.

Workflow

The Tincr workflow is relatively straight-forward. Open up the index to your application and either:

  • Make changes to your CSS via the Styles pane on the Elements panel
  • Freely edit the .js and .css files within the Sources panel.

 

In my own experience, I’ve found the bi-directional CSS editing support to be the most reliable, however script editing should work fine too.

For developers interested in using Tincr to edit preprocessed code via the DevTools (e.g CoffeeScript, SASS) directly, you’ll require better sourcemaps support for these preprocessors.

I think we’ll see these start to improve in the near future, but for now, bi-directional editing for JavaScript and CSS is what Tincr supports best out of the box.

Reminder: The Sources Panel & Saving

Although automatically having your changes saved from within the DevTools is great, remember that you have the ability to edit sources directly from within the Sources panel out of the box.

This can be done using the Save and Save As options within the Source panel’s context menu. With syntax highlighting and an editor already in there, you can already edit files from our tools..just not in as automated a fashion.

Conclusions

Tincr is an interesting experiment and I’ve love to see how well it might fit into a modern workflow once there’s better support for editing files that are preprocessed. There’s also a little more work that could be done to smooth out the user experience (e.g allowing developers to select their script and stylesheets directories from the UI, over using config files).

That said, it’s definitely worth checking out and may come in helpful if support for just CSS and JavaScript is sufficient for your needs.

Note: If you wish to discuss Tincr with the author directly, there's a discussion thread about the tool on the DevTools Google Group.

18 Comments

  1. Thanks for introducing a tool I haven’t yet heard of. It looks promising, but I cannot get it to work at all. Following your description, am I right in thinking that at its simplest, a straight 1:1 mapping between localhost and the localhost root directory could look something like this?

    {
    “toFile” : [
    {"from": "/(.+)", "to": "/$1"}
    ],
    “fromFile” : [
    {"from": "/(.+)", "to": "/$1"}
    ]
    }

    Tinds the tincr.json file, but does nothing either when editing in Dev Tools or when saving files. Am I making an obvious mistake? Any idea how often Tincr reads that tincr.json – on page refresh, or do we have to deselect it in the Tincr panel and reselect again?

    • Based on my reading from the docs (and my own experiments), Tincr works best when simply using the file:// protocol. I haven’t tested it using localhost/servers just yet, but will see if I can get the tool author to respond to your question.

    • Hi, Tincr author here. The feature I’m working on right now is easy configuration for localhost servers that map directly to the file system. This should be out in the next couple of days.

      That being said, Intuitively, your regex seems like it should work. I’ll look into why it’s not working.

      If you want just email me at ryanackley@gmail.com

  2. Hm, I have problems even with installation (if try to install unpacked version). In the source files manifest version isn’t set, whereas it should be set to “manifest_version”: 2 – says google chrome.

    But tincr.crx was installed successfully. But when I put tincr.json file into project’s folder, it starts to complain on incorrect format.

    I like to work with “Chrome DevTools AutoSave” but thought tincr could be a simplier solution. Sad that configuration of project is so unconvenient :(

    • Yeah. I’ve emailed the author to see if they’d be interested in simplifying the configuration. Have you tried to see if the Rails option works for you? It doesn’t require a custom config file and just requires that you structure your files inside app/assets/javascripts and app/assets/stylesheets. That will at least let you know that the extension is working and it’s just the config file syntax that needs correcting.

  3. I just got it to work with a simple config without a fromFile-section. The mapping from the Devtools in my little PHP5.4-Server on localhost works perfectly. Nevertheless the mapping from the filesystem with live reloading into canary doesnt work. Which would be the best and kick CodeKit off my machine instantly – this with SublimeLinter…
    Looking forward to this! Thanks Addy!

  4. Can you elaborate? I take it you want it to convert LESS, coffeescript, etc if you’re using CodeKit. Tincr doesn’t do that at the moment but it’s at the top of my list because it’s one of those things that make other live reload solutions so powerful.

    • I just like the idea of just having the browser and an editor in my case sublime do the work. the editor does syntax checking and linting and not an external app which pops up with notifications on every save. i am not using scss, less or coffeescript at work bus this just fastens a workflow without putting any restrictions nor standards upon you.
      i’d say that sublime could also just do the preprocessor work for you while tincr just injects the resulting css/js. I don’t see a flaw with that… image optimization then is part of a build process and shouldnt be necessary in devmode i think – same thing for minification and comcatination. the stages then just represent a folder in your projects parent which is a git-repo with submodules to me…

  5. Pingback: Optimierte JavaScript-Anwendungen mit erweiterten Debugging-Möglichkeiten | Herrmann & Lenz Blog

  6. Ryan, i pass all steps, but after configure the folder and mark the checkboxes what I need to do to save it? To save the configuration? Because when i close the tab of chrome what i am using and open a new tab the configuration is empty.

    Thanks for your great post!

    • Correction: the autosave it’s working fine, but when i open files of the file (ex: file:///C:/index.html) the select box of ”Project Type” is disabled, then i cant select “File System”.
      What can this be? My SO is windows. :|

  7. Hi Ryan, mine installation also doesn’t work. I’ve tried ‘http server’ option and also a ‘configuration file’ option. This is the configuration file

    {
    “toFile” : [{
    "from": "/(.+)",
    "to": "/$1"
    }],
    “fromFile” : [{
    "from": "/(.+)",
    "to": "/$1"
    }]
    }

    I have basic xampp installation on windows, so c:\xampp\htdocs is the root, and that should map to http://localhost. I’ve also tried autosave extension, and it didn’t work well. Sometimes it did work sometimes it didn’t, too bad this is a great option I don’t know how other javascript developers don’t seem to miss something like this.

  8. Hi. Thanks congratulations for your great work.
    I’m developing an app with cakephp and i haven’t got it working.

    I don’t know if i’m right.
    this is my config json file

    {
    “toFile” : [
    {"from": "/(.+\\.js)",
    "to": "/app/webroot/js/$1"},
    {"from": "/(.+\\.css)",
    "to": "/app/webroot/css$1"}
    ],
    “fromFile” : [
    {"from": "(\\\\|/)app\\1webroot(?:js|css)\\1(.+(\\.js|\\.css))(\\.[a-zA-Z]+)?$”,
    “to”: “/$2?body=1″}
    ]
    }

    Thanks you

  9. Well writing, tincr is a tool that arose from my own frustration with switching back and forth between Chrome Developer Tools to do debugging and my text editor to do coding.

  10. Pingback: Live hot-code reloading with Chromium browser on Linux | Opensas blog

Leave a Reply

Required fields are marked *.