推荐几个好用的前端在线工具编辑器浏览器代码css

老实说，虽然我做过许多前端开发，但我并不擅长CSS。当我陷入困境时，EnjoyCSS是我的大救星。EnjoyCSS提供了一个简单的交互界面，帮助我设计元素，然后自动输出相应的CSS代码。

EnjoyCSS可以输出CSS、LESS、SCSS代码，并支持指定需要支持那些浏览器及其最低版本。开发简单页面时用起来比较方便，但不太适合复杂一点的前端项目（这类项目往往需要引入CSS框架）。2.PrettierPlayground

Prettier是一个代码格式化工具，支持格式化JavaScript代码（包括ES2017、JSX、Angular、Vue、Flow、TypeScript等）。Prettier会移除代码原本的样式，替换为遵循最佳实践的标准化、一致的样式。IDE大多支持Prettier工具，不过Prettier也有在线版本，让你可以在浏览器里格式化代码。

如果工作电脑不在手边，使用移动端设备或者临时借用别人的电脑查看代码时，PrettierPlayground非常好用。相比在IDE或编辑器下使用Prettier，个人更推荐通过gitpre-commithook配置Prettier：hook可以保证整个团队使用统一的配置，免去各自分别配置IDE或编辑器的麻烦。如果是老项目，hook还可以设置只格式化有改动的单个文件甚至有改动的代码段，避免在IDE或编辑器下使用Prettier时不小心格式了大量代码，淹没了commit的主要改动，让review代码变得十分痛苦。

3.Postman

Postman一直在我的开发工具箱里，测试后端API接口时非常好用。GET、POST、DELETE、OPTIONS、PUT这些方法都支持。毫无疑问，你应该使用这个工具。

Postman之外，Insomnia也是很流行的RESTAPI测试工具，亮点是支持GraphQL。不过Postman从去年夏天发布的v7.2起也支持了GraphQL。

4.StackBlitz

ChidumeNnamdi盛赞这是每个用户最喜欢的在线IDE。StackBlitz将大家最喜欢、最常用的IDEVisualStudioCode搬进了浏览器。

StackBlitz支持一键配置Angular、React、Ionic、TypeScript、RxJS、Svelte等JavaScript框架，也就是说，只需几秒你就可以开始写代码了。

微软官方其实也提供了在线版本的VSCode，可以在浏览器内使用VSCode，并且支持开发Node.js项目（基于Azure）。不过StackBlitz更专注于优化前端开发体验，界面更加直观一点，也推出了beta版本的Node.js支持（基于GCP，需要填表申请）。

5.Bit.dev

软件开发的基本原则之一就是代码复用。代码复用减少了开发量，让你不用从头开发组件。

正如Bit.dev的口号「组件即设计体系。协同开发更好的组件。」所言，Bit.dev可以用来创建设计体系，允许团队内的开发者和设计师一起协作，从头搭建一套设计体系。

Bit.dev目前支持React、Vue、Angular、Node及其他JavaScript框架。

在Bit.dev上不仅可以搜索组件，还可以直接查看组件的依赖，浏览组件的代码，甚至在线编辑代码并查看预览效果！选好组件后可以通过Bit.dev的命令行工具bit在本地项目引入组件，也可以通过npm、yarn引入组件。

6.CanIUse

CanIUse是非常好用的在线工具，可以方便地查看各大浏览器对某个特性的支持程度。

我过去经常碰到自己开发的应用的一些功能在其他浏览器下不支持的情况。比如我的作品集项目使用的某个特性在Safari下不支持，直到项目上线几个月后我才意识到。这些经验教训让我意识到需要检查浏览器兼容性。

我们来看一个例子吧。哪些浏览器支持WebP图像格式？

如你所见，Safari和IE目前不支持WebP。这意味着需要为不兼容的浏览器提供回退选项，比如：

CanIUse还可以在命令行下使用，例如，在命令行下查看WebP图像格式的浏览器兼容性：caniusewebp（运行命令前需要事先通过npminstall-gcaniuse-cmd安装命令行工具。