Search
Search titles only
By:
Search titles only
By:
Home
Shop
Forums
New posts
Search forums
What's new
New posts
New resources
New profile posts
Latest activity
Resources
Latest reviews
Search resources
Members
Current visitors
New profile posts
Search profile posts
Log in
Register
Search
Search titles only
By:
Search titles only
By:
Menu
Install the app
Install
Reply to thread
Home
Forums
Community
General Discussion
How To Customize Chrome Developer Tools With DevTools Author
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Message
<blockquote data-quote="cielopearly" data-source="post: 817" data-attributes="member: 4"><p>If you’re a frontend developer then you should already know about Google Chrome’s <a href="https://developer.chrome.com/devtools" target="_blank">DevTools panel 1</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><p></p><p>A new free Chrome plugin called <a href="http://mikeking.io/devtools-author/" target="_blank">DevTools Author 2</a> lets you customize the DevTools panel with extra syntax color schemes, unique fonts and custom font sizes.</p><p></p><p></p><p>[ATTACH=full]398[/ATTACH]</p><p></p><p>The setup is pretty straightforward. You just install the extension from <a href="https://chrome.google.com/webstore/detail/devtools-author/egfhcfdfnajldliefpdoaojgahefjhhi" target="_blank">the Chrome Webstore</a> and then visit this link in your browser: <em>chrome://flags/#enable-devtools-experiments</em></p><p></p><p>You’ll find yourself in the <a href="http://blogs.adobe.com/cantrell/archives/2012/07/all-about-chrome-flags.html" target="_blank">Chrome Flags panel</a> where you should enable DevTools experiments. Once that’s enabled you should restart Chrome, open the DevTools settings panel and find the “experiments” tab.</p><p></p><p>Then you just check “allow custom UI themes” and you’re good to go!</p><p></p><p></p><p>[ATTACH=full]399[/ATTACH]</p><p>You can choose from over 25 different syntax color schemes that make Chrome’s 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><p></p><p>This plugin doesn’t add any core features onto DevTools, but rather lets you change the style and look of your DevTools window. It’s surprisingly easy to configure and it can make your DevTools experience feel much more personalized.</p><p></p><p>If you have any trouble during setup then check out this <a href="https://www.youtube.com/watch?v=AUZagMLMAJc" target="_blank">guided intro video 2</a>.</p></blockquote><p></p>
[QUOTE="cielopearly, post: 817, member: 4"] If you’re a frontend developer then you should already know about Google Chrome’s [URL='https://developer.chrome.com/devtools']DevTools panel 1[/URL]. 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 [URL='http://mikeking.io/devtools-author/']DevTools Author 2[/URL] lets you customize the DevTools panel with extra syntax color schemes, unique fonts and custom font sizes. [ATTACH type="full"]398[/ATTACH] The setup is pretty straightforward. You just install the extension from [URL='https://chrome.google.com/webstore/detail/devtools-author/egfhcfdfnajldliefpdoaojgahefjhhi']the Chrome Webstore[/URL] and then visit this link in your browser: [I]chrome://flags/#enable-devtools-experiments[/I] You’ll find yourself in the [URL='http://blogs.adobe.com/cantrell/archives/2012/07/all-about-chrome-flags.html']Chrome Flags panel[/URL] where you should enable DevTools experiments. Once that’s enabled you should restart Chrome, open the DevTools settings panel and find the “experiments” tab. Then you just check “allow custom UI themes” and you’re good to go! [ATTACH type="full"]399[/ATTACH] You can choose from over 25 different syntax color schemes that make Chrome’s 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. This plugin doesn’t add any core features onto DevTools, but rather lets you change the style and look of your DevTools window. It’s surprisingly easy to configure and it can make your DevTools experience feel much more personalized. If you have any trouble during setup then check out this [URL='https://www.youtube.com/watch?v=AUZagMLMAJc']guided intro video 2[/URL]. [/QUOTE]
Verification
Post reply
Home
Forums
Community
General Discussion
How To Customize Chrome Developer Tools With DevTools Author
Top
Bottom