I’m pretty confident that it’s just a matter of time before we all end up developing web sites from scratch without ever leaving our web browsers. Even worse, wether you think it’s a good idea or not (it’s not, believe me) we’ll surely be working directly on the cloud.
But for the time being we all count with our desktop tools, editor, IDEs to get our job done.
Nevertheless, a couple of months ago I stumbled with an almost miraculous chrome plugin: Tincr
In short, it’s a little plugin that gives you bi-directional editing of js scripts and css files. That means you can modify your source files from Sublime (or whatever else you use) and they will be automatically updated on DevTools, and likewise you can just edit your source files on the DevTools source panel and the changes will be saved to the file system.
Unfortunately, in tincr latest version an issue arrised that wouldn’t let me configure my project using Linux, and for the time being there seems to be no solution to that problem.
At the same time in that thread I found out that the chrome team is working on a similar feature, among other goodies, in what they call Workspaces, that will give you the same tincr functionality built into the browser.
The fact is that in spite all the hipe I coudn’t get it to work with Chromium browser on Ubuntu linux, so after messing around I finally got a way to make it work, so I decided to post a step by step guide about it.
1. install the latest dev version version of chromium
Just follow this article.
for the impatient ones:
sudo add-apt-repository ppa:a-v-shkop/chromium-dev && sudo apt-get update sudo apt-get install chromium-browser
At the time of writing this blog it should give you Version 27.0.1453.6 Ubuntu 13.04 (191032)
2. Open chromium and enter chrome:flags in the address bar
Look for the Enable Developer Tools experiments. option and enable it
A button asking you to relaunch Chromium should appear, just press it, if it doesn’t show up just restart chromium.
3. Open the web page you want to debug using workspaces
4. Press F12 to open DevTools and the press F1 to open the Settings panel
5. Choose Experiments and enable ‘File System folders in Sources Panel’
6. Restart Chromium browser, and once again press F12 and F1.
7. This time you’ll see a new Workspace option, click on it and then click on Add file system.
Choose the root folder of the project you want to debug.
In the console you will see the following error
‘The selected folder should contain an empty file with the following name: “.allow-devtools-edit”.’
8. So open a console, go to the root of your project’s folder and issue:
cd ~/tmp/test touch .allow-devtools-edit
then repeat step 7
9. Now in your sources tab you will see both files system, the ones from the web application and the one from the file system you added from the Workspace setting. You’ll have to consolidate them both in a single view.
Just right click on any js or html file, select ‘Map to network resource’ and select the apropriate file.
Then you’ll be asked to restart the inspector. Just clic Ok.
10. And that’s it, now the changes you make on DevTools will be visible from the file system and vice versa.
The good news is that it seems that with the latest Google Chrome development version (with the Beta version it won’t work) everything works out of the box, no need to mess around with development or experimental features, but so far now, if you want to stick with Chromium, you’ll have to follow the steps described above.
You can download google chrome’s latest development version from here: http://www.chromium.org/getting-involved/dev-channel