CSS Diff
Item media 3 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item media 1 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot

Overview

As you make CSS changes in the DevTools inspector window this will track your changes and provide you with a nicely formatted diff

When you're working on a project turning a design that was done by someone else into HTML + CSS it can often be frustrating as you go back-and-forth with them trying to tweak things. Often times you'll end up getting marked up screenshots asking for things to be moved, changed, etc. Both the front-end engineer and the designer end up frustrated by all of this back-and-forth. Once designers are introduced to the Chrome DevTools inspector where they can select elements and tweak CSS values till their heart's content the process can be massively improved because they can provide specific feedback on the values they want changed. CSS Diff is an extension that eases this feedback cycle by allowing designers to simply send the engineer a common "diff" output of their changes so that those changes can be implemented. Typically you'll end up using something like less, scss, etc to manage your styles so you can just apply the diff directly to the sources, but groking the diff and manually making the updates is much better than trying to make updates based off of marked up screen shots. This does not work on minified CSS because it is simply keeping a copy of the CSS from when the DevTools were opened and then showing live diff's against that. This typically isn't a problem as giving designers access to an development environment where the source code isn't minified should be trivial.

1.9 out of 510 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Chematronix QuarantamilaSep 5, 2023

This one works, but gotta install it by hand: https://github.com/kdzwinel/CSS-Diff

Review's profile picture

Stepan MatskevichMar 30, 2023

Doesn't work, just white screen

1 person found this review to be helpful
Review's profile picture

Modern ChiliMar 2, 2023

Does not work. Just shows white screen.

2 out of 2 people found this helpful

Details

  • Version
    1.0
  • Updated
    April 20, 2016
  • Offered by
    evan.borgstrom
  • Size
    20.12KiB
  • Languages
    English
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has not provided any information about the collection or usage of your data.

Related

Save CSS

3.9(29)

Save your CSS and JS modifications in Devtools automatically to local disk.

Style Adjuster

1.0(1)

Adjust your CSS styles, without taking your eyes off the result.

CSSSteal

2.3(46)

Given DOM element returns styles applied to it and all its children.

MageTools: DevTools Reimagined

4.3(9)

A faster, easier alternative to DevTools. Find styles, check attributes, and live-edit UIs.

HTML Diff Check Tool

4.2(18)

Tool for checking HTML difference between tabs ,or between production and development environment.

Css to SCSS or SASS Converter

5.0(1)

Simple and useful extension to convert CSS to SASS or SCSS

CSS Used

4.6(176)

Get all css rules used by the selected DOM and its descendants.

Ajax Modifier

4.8(39)

To modify ajax responses on any page

Code Cola

4.6(188)

Code Cola is a chrome extension for editing online pages' css style visually.

HTML Hierarchy Visualizer

5.0(8)

This extension is a tool that helps visualize the layout of HTML elements on a webpage

Console Importer

4.7(17)

Import JavaScript and CSS resources from console, with one command

DevTools Classes & Atributes panel

5.0(4)

Toggle classes and attributes

Save CSS

3.9(29)

Save your CSS and JS modifications in Devtools automatically to local disk.

Style Adjuster

1.0(1)

Adjust your CSS styles, without taking your eyes off the result.

CSSSteal

2.3(46)

Given DOM element returns styles applied to it and all its children.

MageTools: DevTools Reimagined

4.3(9)

A faster, easier alternative to DevTools. Find styles, check attributes, and live-edit UIs.

HTML Diff Check Tool

4.2(18)

Tool for checking HTML difference between tabs ,or between production and development environment.

Css to SCSS or SASS Converter

5.0(1)

Simple and useful extension to convert CSS to SASS or SCSS

CSS Used

4.6(176)

Get all css rules used by the selected DOM and its descendants.

Ajax Modifier

4.8(39)

To modify ajax responses on any page

Google apps