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.

 

About Greg Rickaby

Director of Engineering @WebDevStudios / Author & Tech Editor @ForDummies / @WordPress Contributor / @gatsbyjs Maintainer / Follow Greg on Twitter

5 Comments

  1. Aditya Pandey on July 19, 2013 at 3:20 am

    Thanks Greg!

    I’ve always wondered how to develop ‘Live’! 🙂

  2. […] Awesomesauce: Turn Chrome Developer Tools into an IDE: Wow. This looks amazing. Imagine no longer having to switch between the browser and your favorite text editor. And for Sublime Text 2 users, you can customize Chrome to look like Sublime Text 2. […]

  3. Doug on October 24, 2013 at 1:50 pm

    This really is awesome! Thanks a bunch!

  4. Jason on June 4, 2014 at 11:35 am

    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…

  5. ghostlab (@ghostlabapp) on July 2, 2014 at 4:01 am

    Nice article, I have written a guide to help you all.
    Let me know if you find it useful:

    http://blog.vanamco.com/chrome-devtools-features-making-web-dev-efficient/

    Thanks

Leave a Comment