Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Chrome Customize Developer Tools Theme / Color Schema

How to change color schema on Developer Tools, JavaScript Console in Google Chrome ?

Like this:

enter image description here

like image 890
Anton Dozortsev Avatar asked Dec 25 '13 22:12

Anton Dozortsev


People also ask

How do I change my Chrome developer tools theme?

Installation: - Open Developer Tools - Open the Settings > Experiments > "Allow extensions to load custom stylesheets" - Close and reopen the DevTools Features: - Select a theme amongst the list of available themes - Change the Monospace Font with a font installed in your computer - Optionally change the Monospace Font ...

What does purple mean Chrome dev tools?

It is white space. For example you have a container with 100% of width and two divs inside, one of those with 50% and another width 40% of width, it means that there is 10% of space empty... this 10% would be shown in this purple dashed line area by the Google inspector.


1 Answers

  1. Install a DevTools Theme like Zero Dark Matrix
  2. Goto chrome://flags/#enable-devtools-experiments, and enable Developer Tools experiments.
  3. Select Relaunch Now at the bottom of the page.
  4. F12 to Open developer tools, go to Settings, select Experiments tab, and check Allow custom UI themes.
  5. F12, Reload DevTools.
like image 158
JaskeyLam Avatar answered Sep 18 '22 10:09

JaskeyLam