Mac上更改Chrome的主题
2015-01-12 22:32
281 查看
(以下的前提是Mac Chrome)
直接使用Chrome调试器编写代码的同学福音,如何设置自己的调试器,使其能够应用各种主题,达到Sublime等的视觉效果~本文对新旧版本的Chrome浏览器都可以(Stackoverflow上说分割点是Chrome 33),直奔主题:
Mac上对于低版本的chrome浏览器:
1)找到合适Chome主题css文件(例如Obsidian for chrome developer tools)
直接~/Library/Application Support/Google/Chrome/Default/User StyleSheets/里计入Custom.css文件即可;
但是在我的Mac上试验了很久都失败了,后来在搜索答案中找打了答案,原来对于高版本的Chrome浏览器已经改变了更改主题的方案,如下原文:
Support for
been removed from Chrome in version 32.
This answer provides two methods for easily activating style sheets in the developer tools. The second method is recommended, but only works for Chrome 33+, the first method also works for Chrome 32.
Both methods are Chrome extensions, to use the examples below, follow the following steps:
Create a directory and put the following files in it.
Go to
Select "Developer mode"
Click on "Load unpacked extension"
Select the directory you just created.
This section uses one of the two techniques described at How
to inject javascript into Chrome DevTools itself. This extension can easily be 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 section over this one.
If you want to customize your devtools style,
to be used. This feature is currently hidden behind a flag (
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").
For more info, see https://code.google.com/p/chromium/issues/detail?id=318566
调整效果如下:
直接使用Chrome调试器编写代码的同学福音,如何设置自己的调试器,使其能够应用各种主题,达到Sublime等的视觉效果~本文对新旧版本的Chrome浏览器都可以(Stackoverflow上说分割点是Chrome 33),直奔主题:
Mac上对于低版本的chrome浏览器:
1)找到合适Chome主题css文件(例如Obsidian for chrome developer tools)
直接~/Library/Application Support/Google/Chrome/Default/User StyleSheets/里计入Custom.css文件即可;
但是在我的Mac上试验了很久都失败了,后来在搜索答案中找打了答案,原来对于高版本的Chrome浏览器已经改变了更改主题的方案,如下原文:
Support for
Custom.csshas
been removed from Chrome in version 32.
This answer provides two methods for easily activating style sheets in the developer tools. The second method is recommended, but only works for Chrome 33+, the first method also works for Chrome 32.
Both methods are Chrome extensions, to use the examples below, follow the following steps:
Create a directory and put the following files in it.
Go to
chrome://extensions
Select "Developer mode"
Click on "Load unpacked extension"
Select the directory you just created.
True emulation of Custom.css
This section uses one of the two techniques described at Howto inject javascript into Chrome DevTools itself. This extension can easily be 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 section 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.applyStyleSheethas
to be 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 you had in your Custom.css */
For more info, see https://code.google.com/p/chromium/issues/detail?id=318566
调整效果如下:
相关文章推荐
- Notepad++ 更改和定制主题
- VS2013中如何更改主题颜色(深色)和恢复默认的窗口布局
- mac 开启 chrome 和 微信开发者工具 跨域
- Ubuntu 14.04 下的MAC OS X 主题安装
- 在Windows安装chromedriver(更新了mac版教程)
- 更改myeclipse主题
- Chrome没有Mac版 Sergey Brin很尴尬
- Chrome在Mac上的跨域设置
- mac版chrome的刷新缓存方法
- Mac Chrome 关闭 双指手势 前进 后退
- EXCEL如何批量更改MAC地址格式?
- Ubuntu 8.10安装Mac(OSX Leopard)主题
- 在mac上更改文件关联
- mac如何彻底更改系统语言
- Eclipse主题更改
- Mac Chrome Safari打开开发者工具快捷键
- win7下更改无线网卡MAC地址
- ubuntu安装和卸载MAC主题