Live hot-code reloading with Chromium browser on Linux

devtools

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.

tincr

Here you have a nice article by @addyosmani that explains it all.

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.

Here you have Paul Irish‘s and Addy Osmani‘s announcement on google plus, plus a couple of sexy videos to get you excited about it:

http://www.youtube.com/watch?v=kVSo4buDAEE
http://www.youtube.com/watch?v=x6qe_kVaBpg

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

enable

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’

chrome settings

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.

add file system

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.

map resource

10. And that’s it, now the changes you make on DevTools will be visible from the file system and vice versa.

edit_both

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.

workspaces2

You can download google chrome’s latest development version from here: http://www.chromium.org/getting-involved/dev-channel

Tagged with: , , , ,
Posted in development, javascript, tools, Uncategorized, web development
One comment on “Live hot-code reloading with Chromium browser on Linux

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: