如何让你在开发者工具中查看源代码有语法高亮和暗黑主题的效果

​如何让你在Chrome浏览器开发者工具中查看源代码的时候，和在代码编辑器中有同样的代码语法高亮的效果，而且还是深色主题，如果你是深色主题的爱好者就更合你意了。

image

国外的美女开发者为你实现了这样功能的浏览器拓展，她的Github主页：

https://github.com/taniarascia

美女颜值高而且代码写得好，有9W的followers还有很多相当厉害的作品，如 takenote

安装插件

进入chrome web store中搜索 DevTools Theme: New Moon 找到该插件，也可以从以下地址直接进入：

https://chrome.google.com/webstore/detail/devtools-theme-new-moon/lndddploiofhfpdcoclegenegblkhlfk?hl=en

image

点击按钮Add to Chrome安装拓展程序到你的浏览器

记住这时候还没有生效，在浏览器地址栏输入chrome://flags

找到“Developer Tools Experiments”，然后切换至“启用”。

在DevTools中，单击设置菜单，在左侧Experiments菜单中找到Allow custom UI themes，然后选择勾选上。

image

同时在Preferences菜单里将主题设置为暗模式（这很重要，否则主题看起来不正确）。设置好后重启浏览器，然后随便打开一个窗口访问任意网页。鼠标右击检查，打开开发者工具，就可以看到你想要的效果了。

image