Chrome Developer Tools: Sources Panel

You may have noticed a new panel appear in the Chrome Developer Tools. The sources panel was recently added to the already powerful web development tool. The sources provides you with the source code of your website. It allows you to edit your website on the fly.

One of the main features includes the ability to save revisions of your source code allowing you to track your changes and revert to a previous version of a source file. When you edit your source simply pressing ‘Ctrl + S’ will create a revision. You can then right click the file you just saved on the left hand sources panel and click ‘Local modifications’ to see your revisions. You will see all your saved revisions with timestamps and revert links.

Another nice feature is the ability to save an edited source file locally to your hard drive. This pretty much opens Google Chrome as a stand alone web development tool.

While in the sources panel if you press ‘Ctrl + F’ you will see a standard find tool with Find and Replace functionality. Which is nice to have.

A nice new tool is the ‘Pretty Print’ button (The two curly brackets button) which basically converts your minified source code to readable and editable code.

There are many more features in the sources panel that I have not covered. I think for any web developer this is a must ’Try out’ feature.