{"id":30035,"date":"2017-05-22T18:01:54","date_gmt":"2017-05-22T10:01:54","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30035"},"modified":"2018-04-09T16:52:36","modified_gmt":"2018-04-09T08:52:36","slug":"css-dig-chrome-extension","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/","title":{"rendered":"Analyze Any Website&#8217;s Codes with CSS Dig Chrome Extension"},"content":{"rendered":"<p>There\u2019s a lot you can do with <strong><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\/\" target=\"_blank\">Chrome DevTools<\/a><\/strong> from editing live websites to studying detailed HTTP requests. But, the <strong>ability to analyze CSS patterns<\/strong> is not baked into the console.<\/p>\n<p>With <strong><a href=\"https:\/\/www.cssdig.com\/\" target=\"_blank\">CSS Dig<\/a><\/strong>, you can analyze all <strong>CSS selectors<\/strong>, <strong>specificity<\/strong>, and <strong>unique properties<\/strong> of any web page right from Chrome. This extension is totally free and offers a lot of power to frontend developers.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/chrome-developer-tools\/\">How to Start Using Chrome Developer Tools for Web Design<\/a>\n\t\t\t\t<\/p>\n<p>As you inspect a stylesheet you\u2019ll get lots of data from the CSS Dig panel. It can show you <strong>individual selectors<\/strong>, including <strong>duplicates<\/strong> and <strong>unnecessary specificity levels<\/strong>.<\/p>\n<p>To get started, simply <strong><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/css-dig\/lpnhmlhomomelfkcjnkcacofhmggjmco\" target=\"_blank\">install the plugin<\/a><\/strong> and open the console window. You\u2019ll find <strong>two tabs<\/strong> in the CSS Dig window: <strong>Properties<\/strong> and <strong>Selectors<\/strong>.<\/p>\n<p>You can browse results <strong>organized by properties<\/strong> (color, border, padding), or <strong>by selectors<\/strong> (classes, IDs). I find the Properties window to be the most valuable, as it allows you to study which fonts and colors you\u2019re using.<\/p>\n<p>This tool works across the board for any website, so it\u2019s also handy for <strong>reverse-engineering<\/strong> anyone\u2019s design. You can copy\/paste the CSS directly from this window and reuse it on your own projects.<\/p>\n<p>Probably the most common use case for CSS Dig is to <strong>clear duplicate colors<\/strong> from your color palette. How many unique shades of green do you really need? Or, how many different sans-serif fonts are necessary for one page?<\/p>\n<figure><a href=\"https:\/\/www.cssdig.com\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-dig-chrome-extension\/02-apple-extension-cssdig-code.jpg\" alt=\"CSS Dig extension preview\" width=\"1000\" height=\"873\"><\/a><\/figure>\n<p>CSS Dig is incredibly simple, so don\u2019t expect dozens of features like with DevTools. Instead, this plugin is rather <strong>geared towards frontend developers<\/strong> auditing sites for repeat selectors or duplicate properties.<\/p>\n<p>The <strong>source code<\/strong> of the plugin is available for free <a href=\"https:\/\/github.com\/tomgenoni\/cssdig-chrome\" target=\"_blank\">on GitHub<\/a> where you\u2019ll also find all the <strong>latest updates<\/strong>.<\/p>\n<p class=\"note\"> <strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/\">5 (More) Useful Chrome DevTools Tips for Developers<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>There\u2019s a lot you can do with Chrome DevTools from editing live websites to studying detailed HTTP requests. But, the ability to analyze CSS patterns is not baked into the console. With CSS Dig, you can analyze all CSS selectors, specificity, and unique properties of any web page right from Chrome. This extension is totally&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[2998,507,2902],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Analyze Any Website&#039;s Codes with CSS Dig Chrome Extension - Hongkiat<\/title>\n<meta name=\"description\" content=\"There&#039;s a lot you can do with Chrome DevTools from editing live websites to studying detailed HTTP requests. But, the ability to analyze CSS patterns is\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Analyze Any Website&#039;s Codes with CSS Dig Chrome Extension\" \/>\n<meta property=\"og:description\" content=\"There&#039;s a lot you can do with Chrome DevTools from editing live websites to studying detailed HTTP requests. But, the ability to analyze CSS patterns is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-22T10:01:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:52:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-dig-chrome-extension\/02-apple-extension-cssdig-code.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Analyze Any Website&#8217;s Codes with CSS Dig Chrome Extension\",\"datePublished\":\"2017-05-22T10:01:54+00:00\",\"dateModified\":\"2018-04-09T08:52:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/\"},\"wordCount\":298,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-dig-chrome-extension\\\/02-apple-extension-cssdig-code.jpg\",\"keywords\":[\"Chrome Extensions\",\"CSS\",\"CSS Tools\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/\",\"name\":\"Analyze Any Website's Codes with CSS Dig Chrome Extension - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-dig-chrome-extension\\\/02-apple-extension-cssdig-code.jpg\",\"datePublished\":\"2017-05-22T10:01:54+00:00\",\"dateModified\":\"2018-04-09T08:52:36+00:00\",\"description\":\"There's a lot you can do with Chrome DevTools from editing live websites to studying detailed HTTP requests. But, the ability to analyze CSS patterns is\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-dig-chrome-extension\\\/02-apple-extension-cssdig-code.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-dig-chrome-extension\\\/02-apple-extension-cssdig-code.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-dig-chrome-extension\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Analyze Any Website&#8217;s Codes with CSS Dig Chrome Extension\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Analyze Any Website's Codes with CSS Dig Chrome Extension - Hongkiat","description":"There's a lot you can do with Chrome DevTools from editing live websites to studying detailed HTTP requests. But, the ability to analyze CSS patterns is","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/","og_locale":"en_US","og_type":"article","og_title":"Analyze Any Website's Codes with CSS Dig Chrome Extension","og_description":"There's a lot you can do with Chrome DevTools from editing live websites to studying detailed HTTP requests. But, the ability to analyze CSS patterns is","og_url":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-05-22T10:01:54+00:00","article_modified_time":"2018-04-09T08:52:36+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-dig-chrome-extension\/02-apple-extension-cssdig-code.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Analyze Any Website&#8217;s Codes with CSS Dig Chrome Extension","datePublished":"2017-05-22T10:01:54+00:00","dateModified":"2018-04-09T08:52:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/"},"wordCount":298,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-dig-chrome-extension\/02-apple-extension-cssdig-code.jpg","keywords":["Chrome Extensions","CSS","CSS Tools"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/","url":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/","name":"Analyze Any Website's Codes with CSS Dig Chrome Extension - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-dig-chrome-extension\/02-apple-extension-cssdig-code.jpg","datePublished":"2017-05-22T10:01:54+00:00","dateModified":"2018-04-09T08:52:36+00:00","description":"There's a lot you can do with Chrome DevTools from editing live websites to studying detailed HTTP requests. But, the ability to analyze CSS patterns is","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-dig-chrome-extension\/02-apple-extension-cssdig-code.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-dig-chrome-extension\/02-apple-extension-cssdig-code.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-dig-chrome-extension\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Analyze Any Website&#8217;s Codes with CSS Dig Chrome Extension"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7Or","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=30035"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30035\/revisions"}],"predecessor-version":[{"id":30036,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30035\/revisions\/30036"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=30035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=30035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=30035"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=30035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}