Change the theme of chrome on your Mac

Source: Internet
Author: User
Tags chrome developer chrome developer tools chrome devtools

( This is the premise of Mac Chrome)

Use the Chrome debugger directly to write code of the students Gospel, how to set up their own debugger, so that it can apply a variety of themes, to achieve the visual effects of sublime ~ This article on the old and new versions of the Chrome browser can (StackOverflow said the split point is Chrome 33) , straight to the subject:

On Mac for low-version chrome browsers:


1) find a suitable chome theme CSS file (e.g. Obsidian for chrome developer tools)

Direct ~/library/application Support/google/chrome/default/user stylesheets/into the custom.css file;

But the experiment on my Mac for a long time failed, and later in the search answers to find the answer, originally for the high version of the Chrome browser has changed the theme of the program, the following text:

Support for have Custom.css been removed from Chrome in version 32.
This answer provides and methods for easily activating style sheets in the developer tools. The second method is recommended, and only works for Chrome 33+, the first method also works for Chrome 32.

Both methods is Chrome extensions, to use the examples below, follow the following steps:

  1. Create a directory and put the following files in it.
  2. Go tochrome://extensions
  3. Select "Developer Mode"
  4. Click on "Load unpacked extension"
  5. Select the directory you just created.
True emulation of Custom.css

This section uses one of the techniques described at how to inject JavaScript into Chrome DevTools itself. This extension can easily is generalized to fully emulate custom.css, i.e. activate the style sheet onevery page Like Custom.css.
Note:if you ' re using Chrome 33+, then I-strongly recommend the method in the next sections over this one.

Manifest.json
{ "content_scripts": [{ "js": [ "run_as_devtools.js" ], "matches": [ "<all_urls>" ] }], "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB", "manifest_version": 2, "name": "Emulate Custom.css", "version": "1.0", "web_accessible_resources": [ "Custom.css" ]}
Run_as_devtools.js
if (location.protocol === ‘chrome-devtools:‘) (function() {    ‘use strict‘;    var l = document.createElement(‘link‘);    l.rel = ‘stylesheet‘;    l.href = chrome.runtime.getURL(‘Custom.css‘);    document.head.appendChild(l);})();
Custom.css
/* whatever you had in your Custom.css */
Official method (Chrome 33+ only)

If you want to customize your devtools style,chrome.devtools.panels.applyStyleSheetHave to is used. This feature is currently hidden behind a flag (--enable-devtools-experiments, requires relaunch of Chrome) and a checkbox (after enabling the flag, open the Devtools, click on the Gears icon, go to Experiments and check "Allow UI themes").

Manifest.json
{  "name": "<name> DevTools Theme",  "version": "1",  "devtools_page": "devtools.html",  "manifest_version": 2}
Devtools.html
 <script src="devtools.js"></script>
Devtools.js
var x = new XMLHttpRequest();x.open(‘GET‘, ‘Custom.css‘);x.onload = function() {    chrome.devtools.panels.applyStyleSheet(x.responseText);};x.send();
Custom.css
/* whatever had in your custom.css */ 

For more info, see https://code.google.com/p/chromium/issues/detail?id=318566

The adjustment effect is as follows:


Change the theme of chrome on your Mac

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.