Chrome extension for analyzing CSS.

  • By Tom Genoni
  • Last update: Nov 2, 2022
  • Comments: 6

CSS Dig for Chrome

This Chrome Extension looks for stylesheets and style blocks on the webpage it's run against and groups declarations together for easy inspection. For example, you can see how many colors are used and how often. This can help you consolidate your styles and help with refactors.

It works on most websites but there are some limitations.

  1. @import : CSS in @import is ignored.
  2. Content Security Policies: In some situations CSS Dig has make AJAX calls to retrieve the contents of the CSS files. Sites with strict Content Security Policies can block them. For example, facebook.com and github.com.
  3. On sites with lots of external stylesheets it may take a few seconds to collect all the CSS.

If the extension fails to complete check the Javascript Console to view any errors.

Libraries Used

Github

https://github.com/tomgenoni/cssdig-chrome

Comments(6)

  • 1

    Unable to scroll

    When using this on the left side panel I am unable to scroll top to bottom. On the right panel I am able to scroll both ways.

    Is anyone else noticing this issue?

  • 2

    "undefined is not a function" Error in Console

    When I use CSS Dig on http://www.dvorakmotors.com/ using the steps below, it throws the following error in the console: undefined is not a function

    The error happens when you try selecting a rule on the left and the right side is supposed to narrow in on the selector that it's part of. I don't see this behavior on every site I visit, but this happened to be the first site I used CSS Dig on, hence my Twitter exchange with you about a feature addition.

    Steps to recreate:

    1. Visit http://www.dvorakmotors.com/
    2. Click the CSS Dig for Chrome button
    3. Deselect all styles but "/assets/styles/homepage.css"
    4. Click "Start Digging"
    5. Expand background-image
    6. Choose the first rule
    7. Check the console for the error message

    Let me know if I can provide more information.

  • 3

    Fixed a bug where perspective prop on body of src page pushed modal offscreen

    Fixes #6. This is actually a little bit of a hack to fix an issue that might be with WebKit, where children whose parents have the perspective CSS prop don't calculate their height properly (demo). There's an issue on the WebKit bug tracker if you want to make some noise about it.

  • 4

    Show colors for other color-related properties

    While it shows the color assigned for background-color and color properties, it doesn't show the color box for the following CSS properties:

    -webkit-tap-highlight-color border-bottom-color border-left-color border-right-color border-top-color border-color

  • 5

    Uncaught TypeError: Cannot read property 'substring' of undefined

    Hello,

    Had some issues getting this to work. Would simply flash the CSSDig symbol in the center of the screen with the white transparent overlay, and allowing me to open multiple of these.

    To fix this, I encapsulated lines 723 through 754 of cssdig.js in an if(value != undefined) block, which solved this issue. However, the selectors panel is still broken, but I can still use most of the extension.

    Attached are images of these two issues. In the first image some information is redacted, but it hides nothing of importance to the bug.

    cssdig1 cssdig2

  • 6

    [suggestion] Allow combining vendor-prefixed CSS

    Thanks for the great work on this extension.

    I have a suggestion for how to make it even better. There should be a way to compare vendor-prefixed CSS with the non-prefixed equivalents (if found) and hide the vendored versions.

    For example, one of my sites is full of things like this:

    background: -moz-linear-gradient(top, #4a8fb8 0%, #2981b5 99%);
background: -moz-linear-gradient(top, #fbb450 0%, #f89406 99%);
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 99%);
background: -ms-linear-gradient(top, #4a8fb8 0%,#2981b5 99%);
background: -ms-linear-gradient(top, #fbb450 0%,#f89406 99%);
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 99%);
background: -o-linear-gradient(top, #4a8fb8 0%,#2981b5 99%);
background: -o-linear-gradient(top, #fbb450 0%,#f89406 99%);
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a8fb8), color-stop(99%,#2981b5));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbb450), color-stop(99%,#f89406));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(99%,#ffffff));
background: -webkit-linear-gradient(top, #4a8fb8 0%,#2981b5 99%);
background: -webkit-linear-gradient(top, #fbb450 0%,#f89406 99%);
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 99%);
background: linear-gradient(to bottom, #4a8fb8 0%,#2981b5 99%);
background: linear-gradient(to bottom, #fbb450 0%,#f89406 99%);
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 99%);

    While it is sometimes useful to see all the prefixed items, I feel like it more-often just adds noise, given that there's not much you can do about them until you decide to stop supporting the browsers that need them.

Popular Tag

Related