Awesomesauce: Turn Chrome Developer Tools into an IDE

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

chrome-developer-tools-0

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

chrome-developer-tools-1

4) Point to the folders you’re currently developing

chrome-developer-tools-2

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!

chrome-developer-tools-3

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/

chrome-developer-tools-4

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

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

chrome-developer-tools-6

3) Scroll down to User Stylesheets

chrome-developer-tools-8

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

chrome-developer-tools-7

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

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!

chrome-dev-tools-meme

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

chrome-developer-tools-9

Inspect Sass

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

chrome-developer-tools-10

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

chrome-developer-tools-11

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.

 

Author: Greg Rickaby

Greg is Director of Engineering at WebDevStudios and author of a children's book titled, Creating a Website: Design and Build Your First Site!.

5 thoughts on “Awesomesauce: Turn Chrome Developer Tools into an IDE”

  1. An intriguing step forward in rapid development. To develop on the target platform, saving changes back to the file storage after you’ve already seen and assessed the results. It’s seems slightly perverse. But i think I like it…

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.