How to Edit Source Files Directly in Chrome

The days of using separate applications for development and browsing are coming to an end. It’s possible to edit source files directly within Chrome and save the result to a local file. Even better — changes can be applied immediately without refreshing the browser.

This technique should work in recent versions of Chrome although, currently, it’s only possible to edit and save JavaScript files. HTML and CSS are almost certain to be supported eventually, though.

Step 1: Launch Developer Tools

Open Chrome, load a page from your local file system/server and open Developer Tools from the Tools menu or press Ctrl+Shift+I / Cmd+Shift+I. Navigate to the Source tab then either click the Sources icon or hit Ctrl+O to select your JavaScript file:

Chrome Developer Tools

Step 2: Edit Your Code

You can now jump straight in and edit your code. Chrome also offers a useful function list to help you locate the right line — press Ctrl+Shift+O / Cmd+Shift+O:

Chrome Developer Tools function list

Step 3: Save the File

Hit Ctrl+S / Cmd+S to save your changes. This updates the file in memory and applies the changes immediately. Note however, that code won’t start again so changes to initialization variables won’t be affected.

To save the changes to the original file, right-click the editor and select Save or Save As…. Once done, you can refresh the page and the script will restart.

Step 4: Undo Your Mistakes

Did your update cause chaos? Right-click the editor and select Local modifications…. The lower pane displays all recent changes and allows you to revert back.

Chrome Developer Tools local modifications

Chrome’s Developer Tools may not be a replacement for your current IDE or editor, but they’re very useful if you’re working on another PC or just require a few quick and dirty edits.

Comments on this article are closed. Have a question about browsers and HTML? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.webdevcontest.com Web Dev Contest

    That’s a pretty neat feature, but I find in general Chrome’s Developer Tools drive me nuts compared to Firefox’s Firebug Tools. Maybe I’ve just been using them for too long, but I find it much better for debugging and testing modifications in your browser.

    • http://www.tyssendesign.com.au John Faulds

      I used to think that way too; couldn’t ever see me moving to Chrome full-time because I’d miss Firebug. That was a couple of years ago. These days, I barely even open Firefox anymore.

    • http://www.optimalworks.net/ Craig Buckler

      Without wanting to start a “my browser’s better than yours” discussion, I also find Firebug more intuitive. That’s possibly because I’ve been using it from the start, but the webkit inspector could do with a UI clean-up.

    • Jim Milner

      In addition to Firebug, the Web Developer Extension provides great capability for testing and modifying a page. With it you can edit (and save!) HTML and CSS in Firefox, so I see no advantage to using Chrome.

    • Sean

      I agree. Chrome’s right click > Inspect element interacts directly with the element, firing a click event, altering the UI, obscuring the element I want to inspect. It gets in it’s own way. And as I do not relish scrolling through the code view to find a needle in a haystack, I’ll stick with the target overlay blue boxes in Firebug. Come on, even IE dev toolbar provides those.

      • Ryan

        All this is possible with chrome developer tools as well. Next time you have it open, click the magnifying glass in the bottom left, then hover over any element you want to inspect. No events fired, no :hover selectors triggered, etc. If you find it gets in the way, try undocking it from the window. You don’t have to rely on right click > inspect element, as with most things Google does there is more than one way to skin this cat.

  • http://www.johnmanoah.com John Manoah

    I would be telling my grandson – “You know what, we had something called an editor in those days” he he hee hee

  • http://www.mattearly.com Matt Early

    I found out about this feature by accident. It’s an awesome add on, and it saves me so much time. Matt x

  • http://www.arcelikbuzdolabiservisi.net andro

    Thank you for any information that

  • http://visibleranking.com Michelle Sullivan

    Maybe I’ve missed something or haven’t used the tool long enough, but it looks like the built-in developer/editor tools only deal with content and presentation files. I’ve been trying to look for ways to edit my .php or .asp files, but couldn’t find anything. If the tools can’t deal with server side language, I guess the a text editor like Notepad++ would be still useful for a long while.

    • http://www.optimalworks.net/ Craig Buckler

      You can’t edit .php or .asp code because it’s processed by the server and returned to the browser. The browser only sees the end result — not the code which created it.

  • WebGuy

    What’s the point of having this feature if HTML and CSS aren’t available? While editing JS is convenient, I suspect that the larger percentage of users don’t know JS but do know HTML and CSS. Pretty lame.

    • http://www.optimalworks.net/ Craig Buckler

      I suspect it’s coming.

    • Ryan

      You can edit JS, CSS, and HTML using the chrome developer tools, you can save as for any of them, and the beauty of the CSS changes are you can see them immediately without doing a save as and refreshing. Not only that but the inspect element has an option to see the computed style and where that style is originating from with the ability to click where its coming from and go edit it right in chrome.

  • Kenny Landes

    I’m still trying to love Chrome Developer Tools, but IMO Firebug is still superior. This is a great feature for quick and dirty local edits, but I generally quickly switch back and forth between my editor and Terminal as I work, and this does not eliminate that step.

  • jim

    “The days of using separate applications for development and browsing are coming to an end. It’s possible to edit source files directly within Chrome and save the result to a local file.”

    ROTFLMBO – Netscape’s been doing this for more than a decade. I no longer use Netscape but a friend of mine still uses it to maintain a 17,000+ page website and, “… wouldn’t touch any of ‘these new-fangled editors’ with a ten-foot pole!” LoL I think they tried M$ FrontPage once and threw it right back in the box when it “interpreted” what she wanted from what she typed and re-wrote half her page, again! LoL Frankly, I avoided it like the plague after the first use for the same reason. Gotta love the kiddees that think they can read your mind from 3,000 miles away better than you can sitting in your own chair. FWIW, I’m quite happy with my little old C_f_e_C_p HTML Editor. :-)

  • jim

    In re to Firebug, et al: They’re all just tools. I settled on Chrome for browsing, Firefox for developing, and every once in a great while you still run across some poor idiot who’s married to M$ IE for some unknown reason and one has to fire up the bug-bomb … er, I mean IE-de-jour … to see their page. When it comes to page coding, I really love M$ Office-generated pages. I have yet to find one I couldn’t reduce by 90% without any trouble at all. I guess they like their pages to bloat like their OS. LoL

  • jim

    All the talk aside and back to the topic, I have liked the Chrome developer tools for the occasional glance through a site that looks great or has some interesting function going on … it is fun to see how other folks do what they do. One never knows when they’re going to get an inspiration so it’s best to be prepared. Now if Firefox could just manage memory like Chrome, they’d be a lot further ahead. ;-)

    • http://www.optimalworks.net/ Craig Buckler

      You should find that Firefox uses far less memory than Chrome (it certainly does on Windows, although Mac/Linux seems less efficient). Chrome treats each tab as a separate process which should offer some stability advantages but, I don’t think it’s that clear-cut.

  • jim

    P.S. Like the PrintFriendly app used in this article’s Print page function. Sweet!

  • Ben

    As far as I can tell, chrome has no DOM inspection tab like firebug. Nor can it work with the likes of fire php? It’s profiling is more annoying to read than firebug as well. I like chrome, but not it’s developer tools.

  • http://www.scriptvenue.com Arvind

    How it is possible !!!!
    if one can edit file in chrome, it means got access to server file. ?????????

    • http://www.optimalworks.net/ Craig Buckler

      Remember this is only local files — although there’s no reason why you couldn’t have direct access to the server mapped to a network drive or whatever.

  • Georgy

    THANK YOU Dave ! I’ve begin trying to do this for days without success.

    Of all the articles I’ve read about source editing, yours was the only one to indicate that HTML files could not be edited.

    I had some javascript in my HTML and Chrome refused to let me edit it… Now that the code is separated everything works fine.

    • http://www.optimalworks.net/ Craig Buckler

      Glad to be of assistance!
      Who’s Dave, though?

      • Georgy

        Thanks Craig :) I was reading another article at the same time and got mixed up.

  • rodomonte11

    i need to edit a file on my hdd so i drag and drop it on chrome that open it follow the steps but id doesn’t show me the code when i open it in the console of developer tools,,,, any method to edit offline js files?