对于大多数人来说,DevTools中当前的配色方案可能看起来不错,但是白色和灰色的组合在每次面对数小时之后看起来有些沉闷,甚至很无聊。 您实际上可以使事情变得有趣。
我们将向您展示如何找到可供选择的主题 ,并安装它,并更改Chrome DevTools的默认主题颜色。 让我们开始吧。
寻找主题
查找DevTools主题并不难。 Google中的一个简单搜索查询已经可以为您提供几个结果。 请注意,某些主题文件只能更改语法突出显示颜色方案,而其他主题文件只能更改特定的面板 。
但是,有一些很棒的主题,例如Elements,Resources,Network,Profile和Console,它们改变了整个DevTools面板,并且还可以在其上面包含一些精美的动画。 以下是一些我的最爱。
安装主题
主题基于CSS,非常易于安装。 首先,从上述资源之一下载CSS文件。 在此示例中,我将使用Monokai Theme 。
在此目录下,您将找到一个名为Custom.css的空CSS文件。 在代码编辑器中将其打开,然后将主题中的样式粘贴到其中。
\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
~/.config/google-chrome/Default/User StyleSheets
效果是即时的,您不必重启Chrome。 这样,您的DevTools应该会焕然一新。