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

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

国外的美女开发者为你实现了这样功能的浏览器拓展，她的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

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

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

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

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

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

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

在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
请参阅：Chrome开发者工具中的悬停状态
我希望看到:hover我在Chrome中徘徊的锚点的:hover样式. 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态. 我似乎无法在Chrome中找到类似内容. 我错过了什么吗? ...
微信开发者工具中导入错误提示请选择含app.json/project.config.json的目录（纪录篇）
是因为每一次 npm run dev:mp-weixin 时都在编译dist/dev下的文件所以在选择目录之前,要先找到自己创建的项目中的app.json文件,然后选择app.json文件的上级目录 ...
在chrome开发者工具中观察函数调用栈、作用域链、闭包
在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化.因此,断点调试对于快 ...
Chrome浏览器开发者工具中的 Performance
目录 ■Chrome浏览器开发者工具中的 Performance ■画面 ■代码 (2009年前后,大学时期写的代码.) ■工作中的使用 (两个系统同时运行) --- ■Chrome浏览器开发者工 ...
解决iview weapp的i-input组件在微信开发者工具中不能输入值的问题
记录下i-input组件在模拟器中不能输入值问题的原因及解决办法最近开始用mpvue框架,所以遇到了一些坑,这篇文章记录下关于input组件的一个坑.老司机请略过. 小程序里做一个登录页,输入手机号 ...
微信开发者工具中使用vant库
构建npm 很多小伙伴在学习微信小程序开发的时候是不是都遇到了构建npm时出现的错误问题,下面我就自己的错误写下我的解决方案. 可能在全局使用npm的时候,能够成功运行"npm i @van ...
微信开发者工具中的版本管理功能搭配gitee使用
前言如果在微信小程序开发过程中需要多个开发者协同开发,或者有保存项目不同版本的需要,那么微信开发者工具中的版本管理功能则是方便所有开发者的一个功能.本文章主要讲述如何使用版本管理功能,将项目文件同步 ...
在微信开发者工具中，使用WeUI前端美化框架，微信小程序
这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单的将文件导入项目中,然后引用一.先下载WeUI 这个是 ...

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

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

最新文章

热门文章