Modify chrome debugger to black and white style

Source: Internet
Author: User

"Debugging is a more advanced technology than coding." I personally think it is true that there is a comfortable debugging environment. Since I switched to chrome, I have always been familiar with the built-in debugger developers tools, which has become the most indispensable tool. Later I learned that developers tools came from the hands of firebug's original designers. No wonder they are getting better and better! Indeed, as a web application, it is so powerful that it cannot see any trace of non-native programs, just like
Chrome is integrated and never imagined as a mysterious machine of a built-in browser-presumably, the communication of underlying components should not be done using JS?

I used developers tools for a long time and still faced HTML, CSS, and Js, can I change code coloring to a custom color scheme like IDE/editor? Google once found that the answer was yes, and it was simpler than I thought. The final effect is as follows.

JS source code coloring:

Step 1: Find the following directory on your computer and open the empty custom.css file for editing:

  • For Windows XP: C: \ Documents ents and Settings \ [username] \ Local Settings \ Application Data \ google \ chrome \ User Data \ Default \ User stylesheets \ custom.css
  • For Mac :~ /Library/Application Support/Google/Chrome/default/user stylesheets/custom.css
  • For ubuntu (Chromium ):~ /. Config/chromium/default/user stylesheets/custom.css
Step 2: paste the following style into custom.css:
/**********************************************//*/* Tomorrow Skin by Ben Truyman - 2012/*/* Based on Chris Kempson's Tomorrow Theme:/* https://github.com/ChrisKempson/Tomorrow-Theme/*/* Inspired by Darcy Clarke's blog post:/* http://darcyclarke.me/design/skin-your-chrome-inspector//*/**********************************************/#-webkit-web-inspector {  /* Toolbar  /**********************************************/  /* Console  /**********************************************/  /* Messages    /**********************************************/  /* Prompt    /**********************************************/  /* Elements/Network/Scripts  /**********************************************/  /* Layout    /**********************************************/  /* HTML    /**********************************************/  /* CSS    /**********************************************/  /* JavaScript    /**********************************************/  /**********************************************/  /* Everything Else    /**********************************************/}#-webkit-web-inspector ::selection {  background: #888;  opacity: 1;}#-webkit-web-inspector.compact #toolbar {  background-image: -webkit-linear-gradient(#555555, #333333) !important;  border-bottom: 1px solid #444 !important;  border-top: 5px solid #c96666 !important;  padding-top: 0 !important;  height: 50px !important;}#-webkit-web-inspector.compact #toolbar .toolbar-label {  color: #aaa !important;}#-webkit-web-inspector.compact #toolbar .toggled-on .toolbar-label {  color: #eee !important;}#-webkit-web-inspector.compact #toolbar .toolbar-item.toggleable.toggled-on {  background-image: -webkit-linear-gradient(#333333, #555555) !important;  padding-top: 10px !important;  padding-bottom: 10px !important;}#-webkit-web-inspector.compact .toolbar-item.close-left {  margin-top: 13px !important;}#-webkit-web-inspector.compact #toolbar-controls {  margin-top: -5px !important;}#-webkit-web-inspector.compact #toolbar-search-item {  margin-top: 12px !important;}#-webkit-web-inspector.compact #main {  top: 50px !important;}#-webkit-web-inspector.compact #search-results-matches {  color: #eee !important;  text-shadow: none !important;}#-webkit-web-inspector.compact #search {  background: #1d1f21 !important;}#-webkit-web-inspector #console-messages {  font-family: 'DroidSansMono', Menlo, monospace !important;  background: #1d1f21;}#-webkit-web-inspector #console-messages a {  color: #666 !important;}#-webkit-web-inspector #console-messages a:hover {  color: #999 !important;}#-webkit-web-inspector .console-message {  color: #F1F1F1 !important;}#-webkit-web-inspector .console-message,#-webkit-web-inspector .console-user-command {  border-bottom: 1px solid #444 !important;}#-webkit-web-inspector .console-user-command > .console-message-text {  color: #C4C7C6 !important;}#-webkit-web-inspector .console-formatted-number {  color: #db925f !important;}#-webkit-web-inspector .console-formatted-string {  color: #b5bc67 !important;}#-webkit-web-inspector .console-formatted-object {  color: #7C7C7C !important;}#-webkit-web-inspector .console-formatted-function {  color: #c5c8c6 !important;}#-webkit-web-inspector .console-formatted-regexp {  color: #c96666 !important;}#-webkit-web-inspector .console-group-messages .section .header .title {  color: #F1F1F1 !important;}#-webkit-web-inspector .console-group-messages .section .header::before,#-webkit-web-inspector .properties-tree li.parent::before {  content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;}#-webkit-web-inspector .console-group-messages .section.expanded .header::before,#-webkit-web-inspector .properties-tree li.parent.expanded::before {  content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important;}@-webkit-keyframes webkit-error-level {  0% {    color: #f77 !important;  }  50% {    color: #f22 !important;  }  100% {    color: #f77 !important;  }}#-webkit-web-inspector .console-message-text {  color: #c5c8c6;}#-webkit-web-inspector .console-error-level .console-message-text .title {  color: #f66 !important;  -webkit-animation-name: webkit-error-level;  -webkit-animation-duration: 2s;  -webkit-animation-iteration-count: infinite;  -webkit-timing-function: ease-in-out;}#-webkit-web-inspector .console-user-command::before {  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTMzNzdGNUZDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTMzNzdGNjBDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y1REMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y1RUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pia6udAAAAB5SURBVHjaYvz//z8DMYAFxli9ejWI6oByK5AVhYaGIhRCgQsQGwOxIFTxe5gEE5pCVyA+C8RpQLwbqgmrwvdQxauhis6AbMamEASUkEwCabyHTWE51BQlqBNMoDSKQhckX3dCFd3DCB4g2AP16VkoGwUwEhvgAAEGAAzQHBRSxqPRAAAAAElFTkSuQmCC) !important;}#-webkit-web-inspector #console-prompt {  color: #F1F1F1 !important;}#-webkit-web-inspector #console-prompt::before {  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjRGNTc2MTZDMTA2MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjRGNTc2MTdDMTA2MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y2MUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y2MkMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Plf0eOsAAAB4SURBVHjaYvz//z8DMYAFxph+BqyhA8qtQFaUacKIUAgFLkBsDMSCUMXvYRJMaApdgfgsEKcB8W6oJqwK30MVr4YqOgPEodgUgoASkkkgjfewKSyHmqIEdYIJlEZR6ILk606oonsYwQMEe6A+PQtlowBGYgMcIMAAF2wcFPVNZx8AAAAASUVORK5CYII=) !important;  color: #c5c8c6 !important;}#-webkit-web-inspector .script-view,#-webkit-web-inspector .properties-tree,#-webkit-web-inspector .pane,#-webkit-web-inspector .breakpoint-list li,#-webkit-web-inspector .pane > .body .info {  color: #CCC !important;}#-webkit-web-inspector .script-view,#-webkit-web-inspector .text-editor-contents,#-webkit-web-inspector .pane.expanded,#-webkit-web-inspector #elements-content,#-webkit-web-inspector .resource-view.json {  background: #1d1f21 !important;  font-size: 12px !important;}#-webkit-web-inspector .highlight {  color: #F1F1F1;}#-webkit-web-inspector li.hovered:not(.selected) .selection {  background: rgba(255, 255, 255, 0.2) !important;}#-webkit-web-inspector #elements-content .selected {  background-color: #373b41 !important;}#-webkit-web-inspector .webkit-html-comment {  color: #7c7c7c !important;}#-webkit-web-inspector .webkit-html-tag {  color: #c96666 !important;}#-webkit-web-inspector .webkit-html-attribute-name {  color: #c96666 !important;}#-webkit-web-inspector .webkit-html-attribute-value {  color: #b5bc67 !important;}#-webkit-web-inspector .webkit-html-text-node .webkit-html-css-node {  color: #c2c3c3 !important;}#-webkit-web-inspector .webkit-html-js-node {  color: #c2c3c3 !important;}#-webkit-web-inspector .webkit-html-resource-link,#-webkit-web-inspector .webkit-html-external-link {  color: #eec574 !important;}#-webkit-web-inspector .webkit-css-comment {  color: #7c7c7c !important;}#-webkit-web-inspector .webkit-css-selector,#-webkit-web-inspector .styles-selector {  color: #c96666 !important;}#-webkit-web-inspector .webkit-css-property {  color: #eec574 !important;}#-webkit-web-inspector .webkit-css-keyword {  color: #db925f !important;}#-webkit-web-inspector .webkit-css-number,#-webkit-web-inspector .properties-tree .value {  color: #db925f !important;}#-webkit-web-inspector .webkit-css-important,#-webkit-web-inspector .webkit-css-at-rule {  color: #b094bb !important;}#-webkit-web-inspector .webkit-css-string {  color: #b5bc67 !important;}#-webkit-web-inspector .webkit-css-url {  color: #eec574 !important;}#-webkit-web-inspector .webkit-line-content,#-webkit-web-inspector .webkit-javascript-ident {  color: #ffffff !important;}#-webkit-web-inspector .webkit-javascript-keyword {  color: #db925f !important;}#-webkit-web-inspector .webkit-javascript-comment {  color: #7c7c7c !important;}#-webkit-web-inspector .webkit-javascript-string {  color: #b5bc67 !important;}#-webkit-web-inspector .webkit-javascript-number {  color: #db925f !important;}#-webkit-web-inspector .webkit-javascript-regexp {  color: #c96666 !important;}#-webkit-web-inspector .section .properties .name,#-webkit-web-inspector .event-properties .name {  color: #82a1be !important;}#-webkit-web-inspector .editing {  color: #c5c8c6 !important;  background-color: #000 !important;}#-webkit-web-inspector .styles-section.read-only {  background: #373b41 !important;}#-webkit-web-inspector .styles-section,#-webkit-web-inspector .subtitle {  color: #7C7C7C !important;}#-webkit-web-inspector .styles-sidebar-separator,#-webkit-web-inspector .pane > .title {  background-image: -webkit-linear-gradient(#555555, #333333) !important;  border-top-color: #666 !important;  border-bottom-color: #333 !important;  color: #bbb !important;  text-shadow: black 0 1px 0 !important;  text-overflow: ellipsis !important;}#-webkit-web-inspector .pane > .title > button,#-webkit-web-inspector .pane > .title > select {  -webkit-filter: invert(1);}#-webkit-web-inspector .split-view-sidebar-right {  background: #222 !important;}#-webkit-web-inspector .section > .header::before,#-webkit-web-inspector .properties-tree li.parent::before,#-webkit-web-inspector .event-bars .event-bar .header::before,#-webkit-web-inspector .outline-disclosure li.parent::before,#-webkit-web-inspector .styles-section.matched-styles .properties li.parent .expand-element {  content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;}#-webkit-web-inspector .styles-section .properties li.parent::before,#-webkit-web-inspector .styles-section .properties li.parent.expanded::before {  content: none !important;}#-webkit-web-inspector .styles-section.matched-styles .properties li.parent .expand-element {  margin-right: 1px !important;  margin-left: -5px !important;  opacity: 0.6 !important;}#-webkit-web-inspector .section.expanded > .header::before,#-webkit-web-inspector .properties-tree li.parent.expanded::before,#-webkit-web-inspector .event-bars .event-bar.expanded .header::before,#-webkit-web-inspector .outline-disclosure li.parent.expanded::before,#-webkit-web-inspector .styles-section.matched-styles .properties li.parent.expanded .expand-element {  content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important;}#-webkit-web-inspector .child-editing {  color: #c5c8c6 !important;}#-webkit-web-inspector .section .properties .name,#-webkit-web-inspector .event-properties .name {  color: #82a1be !important;}#-webkit-web-inspector .styles-selector {  color: #c96666 !important;}#-webkit-web-inspector .section .header {  color: #CCC !important;}#-webkit-web-inspector .properties .value {  color: #c2c3c3 !important;}#-webkit-web-inspector .metrics {  color: #333 !important;}#-webkit-web-inspector .metrics .border {  border-color: #FFF !important;}#-webkit-web-inspector .event-bars .event-bar .header .title {  color: #969796 !important;  text-shadow: none !important;}#-webkit-web-inspector .console-formatted-number {  color: #db925f !important;}#-webkit-web-inspector .console-formatted-string {  color: #b5bc67 !important;}#-webkit-web-inspector .console-formatted-object,#-webkit-web-inspector .console-formatted-node,#-webkit-web-inspector .console-formatted-array {  color: #7C7C7C !important;}#-webkit-web-inspector .console-formatted-function {  color: #c5c8c6 !important;}#-webkit-web-inspector .console-formatted-regexp {  color: #c96666 !important;}#-webkit-web-inspector .styles-element-state-pane {  background: #373b41 !important;}#-webkit-web-inspector .placard:nth-of-type(2n) {  background: #333 !important;}#-webkit-web-inspector .placard.selected {  background-image: -webkit-linear-gradient(#c96666, #6f2727) !important;  border-top-color: #6f2727 !important;}#-webkit-web-inspector .placard .title {  color: #CCC !important;}#-webkit-web-inspector .placard .subtitle {  color: rgba(255, 255, 255, 0.7) !important;}#-webkit-web-inspector .popover {  background-color: rgba(0, 0, 0, 0.9) !important;  border: 10px solid rgba(0, 0, 0, 0.9) !important;  border-radius: 10px !important;  -webkit-border-image: none !important;  margin-left: 10px !important;}#-webkit-web-inspector .popover .arrow {  background-image: none !important;  border-color: transparent transparent #000 transparent !important;  border-style: solid;  border-width: 10px;  width: 0 !important;  height: 0 !important;  bottom: -2px !important;  left: 0;}#-webkit-web-inspector .popover.bottom-left-arrow .arrow,#-webkit-web-inspector .popover.bottom-right-arrow .arrow {  border-color: #000 transparent transparent transparent !important;}#-webkit-web-inspector .popover.left-top-arrow .arrow,#-webkit-web-inspector .popover.left-bottom-arrow .arrow {  border-color: transparent #000 transparent transparent !important;}#-webkit-web-inspector .popover.right-top-arrow .arrow,#-webkit-web-inspector .popover.right-bottom-arrow .arrow {  border-color: transparent transparent #000 transparent !important;}#-webkit-web-inspector .popover .source-frame-popover-title {  color: #c5c8c6 !important;}#-webkit-web-inspector .popover .source-frame-popover-tree {  border-top-color: #444 !important;}#-webkit-web-inspector .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:decrement,#-webkit-web-inspector .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:increment {  background: #333 !important;  border-radius: 5px !important;}#-webkit-web-inspector .webkit-execution-line.webkit-line-content {  background-color: #373b41 !important;  outline: 1px solid #141518 !important;}

OK! The chrome debugger automatically detects CSS changes, so saving the CSS will take effect. Do not believe it?

For qualified students, you can obtain the less source file here for compilation. Comes with two online less compilers: http://less.cnodejs.net/http://www.ostools.net/less

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.