{"id":28211,"date":"2016-10-14T21:01:00","date_gmt":"2016-10-14T13:01:00","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28211"},"modified":"2017-06-17T19:04:30","modified_gmt":"2017-06-17T11:04:30","slug":"customize-chrome-devtools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/","title":{"rendered":"Customize Chrome Developer Tools With DevTools Author"},"content":{"rendered":"<p>If you\u2019re a frontend developer then you should already know about Google Chrome\u2019s <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\">DevTools panel<\/a>. This comes bundled with every version of Chrome offering tools for editing raw HTML\/CSS along with a JS console and the ability to manipulate the DOM in real time.<\/p>\n<p>A new free Chrome plugin called <a href=\"https:\/\/mikeking.io\/devtools-author\/\">DevTools Author<\/a> lets you customize the DevTools panel with extra syntax color schemes, unique fonts and custom font sizes.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/customize-chrome-devtools\/01-devtools-author-extension-feature.jpg\" alt=\"devtools author extension\"><\/figure>\n<p>The setup is pretty straightforward. You just install the extension from <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/devtools-author\/egfhcfdfnajldliefpdoaojgahefjhhi\">the Chrome Webstore<\/a> and then visit this link in your browser: <em>chrome:\/\/flags\/#enable-devtools-experiments<\/em><\/p>\n<p>You\u2019ll find yourself in the <a href=\"http:\/\/blogs.adobe.com\/cantrell\/archives\/2012\/07\/all-about-chrome-flags.html\" rel=\"nofollow\">Chrome Flags panel<\/a> where you should enable DevTools experiments. Once that\u2019s enabled you should restart Chrome, open the DevTools settings panel and find the \"experiments\" tab.<\/p>\n<p>Then you just check \"allow custom UI themes\" and you\u2019re good to go!<\/p>\n<figure><a href=\"https:\/\/www.youtube.com\/watch?v=AUZagMLMAJc\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/customize-chrome-devtools\/02-devtools-check-settings-window.jpg\" alt=\"devtools ui window settings\"><\/a><\/figure>\n<p>You can choose from over 25 different syntax color schemes that make Chrome\u2019s editor a lot easier to use. And you can change font sizes from 10px-22px or even update the console fonts to any pre-installed fonts on your operating system.<\/p>\n<p>This plugin doesn\u2019t add any core features onto DevTools, but rather lets you change the style and look of your DevTools window. It\u2019s surprisingly easy to configure and it can make your DevTools experience feel much more personalized.<\/p>\n<p>If you have any trouble during setup then check out this <a href=\"https:\/\/www.youtube.com\/watch?v=AUZagMLMAJc\" rel=\"nofollow\">guided intro video<\/a>.<\/p>\n<p class=\"video-19by6\"><iframe loading=\"lazy\" width=\"650\" height=\"366\" src=\"https:\/\/www.youtube.com\/embed\/AUZagMLMAJc\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>If you\u2019re a frontend developer then you should already know about Google Chrome\u2019s DevTools panel. This comes bundled with every version of Chrome offering tools for editing raw HTML\/CSS along with a JS console and the ability to manipulate the DOM in real time. A new free Chrome plugin called DevTools Author lets you customize&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":[1258,2856,511],"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>Customize Chrome Developer Tools With DevTools Author - Hongkiat<\/title>\n<meta name=\"description\" content=\"If you&#039;re a frontend developer then you should already know about Google Chrome&#039;s DevTools panel. This comes bundled with every version of Chrome offering\" \/>\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\/customize-chrome-devtools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize Chrome Developer Tools With DevTools Author\" \/>\n<meta property=\"og:description\" content=\"If you&#039;re a frontend developer then you should already know about Google Chrome&#039;s DevTools panel. This comes bundled with every version of Chrome offering\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/\" \/>\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=\"2016-10-14T13:01:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-17T11:04:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/customize-chrome-devtools\/01-devtools-author-extension-feature.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\\\/customize-chrome-devtools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Customize Chrome Developer Tools With DevTools Author\",\"datePublished\":\"2016-10-14T13:01:00+00:00\",\"dateModified\":\"2017-06-17T11:04:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/\"},\"wordCount\":243,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/customize-chrome-devtools\\\/01-devtools-author-extension-feature.jpg\",\"keywords\":[\"Chrome\",\"Dev Tools\",\"Web Developers\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/\",\"name\":\"Customize Chrome Developer Tools With DevTools Author - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/customize-chrome-devtools\\\/01-devtools-author-extension-feature.jpg\",\"datePublished\":\"2016-10-14T13:01:00+00:00\",\"dateModified\":\"2017-06-17T11:04:30+00:00\",\"description\":\"If you're a frontend developer then you should already know about Google Chrome's DevTools panel. This comes bundled with every version of Chrome offering\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/customize-chrome-devtools\\\/01-devtools-author-extension-feature.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/customize-chrome-devtools\\\/01-devtools-author-extension-feature.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/customize-chrome-devtools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customize Chrome Developer Tools With DevTools Author\"}]},{\"@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":"Customize Chrome Developer Tools With DevTools Author - Hongkiat","description":"If you're a frontend developer then you should already know about Google Chrome's DevTools panel. This comes bundled with every version of Chrome offering","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\/customize-chrome-devtools\/","og_locale":"en_US","og_type":"article","og_title":"Customize Chrome Developer Tools With DevTools Author","og_description":"If you're a frontend developer then you should already know about Google Chrome's DevTools panel. This comes bundled with every version of Chrome offering","og_url":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-10-14T13:01:00+00:00","article_modified_time":"2017-06-17T11:04:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/customize-chrome-devtools\/01-devtools-author-extension-feature.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\/customize-chrome-devtools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Customize Chrome Developer Tools With DevTools Author","datePublished":"2016-10-14T13:01:00+00:00","dateModified":"2017-06-17T11:04:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/"},"wordCount":243,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/customize-chrome-devtools\/01-devtools-author-extension-feature.jpg","keywords":["Chrome","Dev Tools","Web Developers"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/","url":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/","name":"Customize Chrome Developer Tools With DevTools Author - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/customize-chrome-devtools\/01-devtools-author-extension-feature.jpg","datePublished":"2016-10-14T13:01:00+00:00","dateModified":"2017-06-17T11:04:30+00:00","description":"If you're a frontend developer then you should already know about Google Chrome's DevTools panel. This comes bundled with every version of Chrome offering","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/customize-chrome-devtools\/01-devtools-author-extension-feature.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/customize-chrome-devtools\/01-devtools-author-extension-feature.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/customize-chrome-devtools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Customize Chrome Developer Tools With DevTools Author"}]},{"@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-7l1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28211","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=28211"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28211\/revisions"}],"predecessor-version":[{"id":28212,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28211\/revisions\/28212"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28211"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}