/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(136) See your backend performance in DevTools Use Timeline Flow to read performance recordings (138)

Chrome DevTools: Git style code diffs for your CSS and JavaScript in the new Changes panel

31st March 2017
Git style code diffs for your CSS and JavaScript in the new Changes panel

I'm at Render Conf 2017!

The experimental Changes Panel in Canary displays your code changes in real-time. It works with CSS/Sass and JavaScript. The Changes Panel can display your style changes from both the Sources Panel and the Styles Pane in the Elements Panel.

Within the Changes Panel, you can click on the code diffs to be taken to the relevant line of code in the Sources Panel.

For any changes you wish to discard, there is the option to "Revert All Changes".

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.