如何自定义Google Chrome DevTools主题

对于大多数人来说，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应该会焕然一新。

翻译自: https://www.hongkiat.com/blog/chrome-devtools-theme/