UPDATE: As of Chrome 33, some of the items in this tutorial are out of date.

By now, your installation of Google Chrome should have updated to version 28. With it, came the ability to edit and save code. Imagine, not having to bounce between an IDE (Sublime Text, Coda, Dreamweaver) and Chrome while developing locally. No need to imagine, it’s reality.

Watch this mind blowing video of Paul Irish showing off the new Developer Tools:

Turn Chrome into an IDE

1) Open a new tab and type:

chrome://flags/

2) Scroll down and enable Developer Tools experiments

3) Open the inspector and click the settings cog. Tick File systems folders in Sources Panel

4) Point to the folders you’re currently developing

5) Open a tab and visit http://localhost/wordpress (or whatever folder you’re developing).

6) Open Developer Tools and select the Sources tab.

7) In the sidebar, double click on a file and edit.

Use the keyboard shortcuts to save:

• Ctrl + S (Mac: ⌘+S)

and watch the changes happen live!

Skin The Inspector

Basically, you can customize – or skin the inspector to look exactly like (or very close too) Sublime Text 2. This blog post is where I got the idea. However, that post is from 2011 and the location of Custom.css has changed. First you have to locate Custom.css.

1) Open a new tab and type:

chrome://version/

This will give you the location of Custom.css. Copy that path.

2) Open Finder –> Go –> Go To Folder and paste the path.

3) Scroll down to User Stylesheets

4) Open and edit Custom.css to your liking. 

Here is an awesome skin by Justin Sternberg that matches Sublime Text 2

Inspect the Inspector

Why would you want to do this? To customize your Custom.css of course!

Open the Inspector Window

• Ctrl + Shift + I (Mac: ⌥⌘I) keys to open Developer Tools

Click anywhere inside the Inspector and then do it again

• Ctrl + Shift + I (Mac: ⌥⌘I) keys to inspect

Inspect Sass

1) Go back to the settings cog, and tick Support for Sass

2) Click General, and tick Enable source maps AND Auto-reload CSS upon Sass save

That’s it! I would highly recommend you read this excellent NetTuts+ tutorial on how to Develop with Sass and Chrome Web Tools.

Wrap up

Many more examples of IDE goodness: https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow

What do you think? Will Chrome eventually turn into a full-blown IDE?

As someone who converts Photoshop mock-ups all day, Chrome might eventually replace Sublime Text 2 as my “go to” IDE. What about you? Leave a comment below.