对于Web开发者而言，参考和观察其他网站的CSS和JS代码是一个绕不过去的过程，那么众所周知浏览器对js和css代码是不存在代码美化的，而很多时候线上环境为了节省数据还会对代码进行混淆和压缩，这就使得浏览器端查看JS和css代码变得尤为困难，今天给大家介绍一个插件『JavaScript and CSS Code Beautifier』。

这个插件可以将JavaScript 代码格式化、解密、反混淆和实现CSS 代码高亮，当你访问 CSS(LESS/SCSS/SASS)、JavaScript (JSX/TypeScript/CoffeeScript/JSON) 或 JSON 文件时，自动格式化并高亮代码。

插件支持 50 多种代码高亮主题，并且有丰富的自定义选项，前端开发者千万别错过的一款Chrome浏览器扩展程序。

JavaScript and CSS Code Beautifier使用教程

1、下载并安装扩展，安装后右上角工具栏会有一个CB按钮的标识。

2、我们打开一个js文件，在地址栏下方会有一个提示，我们点击beautify now！进行美化。

美化前：

美化后：

3、美化后虽然整齐了不少，但是不是不如我我文章图2中看着那么舒服呢，不用担心，接下来我们在右上角扩展中右键 – 选项进行调整;

我们在一般设置中进行设置，比如够哦选自动格式化，选择主题、字体、缩进后都可以在最下方的preview预览到。

4、设置好后我们关闭右上角设置按钮。

5、我们再次切换到最开始打开的js页面刷新后看一下，比最初原始格式化的漂亮很多。