NerdeFocus非常适合检测焦点重置、测试键盘焦点以及调试现代web应用程序中的屏幕读取器问题。安装插件后，需要打开开发者工具调试面板，会在末尾加上NerdeFocus 板块，是前端开发好用的工具之一。

CSS Scan 是一个前端工具，安装插件后当你把鼠标悬停在网页元素上时可以立即显示元素的CSS。注：插件带内购功能。

Magic CSS是一款支持实时编辑CSS/Less /Sass代码预览的开发者工具插件，支持自动保存文件，自动补全，Less/Sas到CSS，美化，CSS重载，lintLive preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, Less/Sass to CSS, beautify, CSS reloader,

SnipCSS 这款插件前端开发工程师的辅助工具，可以提取页面上元素的CSS/HTML，当你在网上看到的很酷的设计，都可以成为你快速原型的个人模板！如果你尝试手动复制/粘贴，可能需要20分钟，但使用SnippCSS，你可以在一分钟内选择并获取所有样式，包括带有媒体查询的样式。

Amino: Live CSS Editor 是一款在线CSS编辑器，编辑CSS，让你喜欢的网站与众不同，当然这个需要有一定的网页知识，做前端开发的同学可以下载试试玩玩。打开弹出窗口有两组快捷键：CTRL+SHIFT+SPACEALT+SHIFT+SPACE我们之前也介绍过两款类似的修改网站样式的插件Stylus和Stylish。라이브 CSS 편집기 Amino로 지속적인 사용자 스타일 시트

CSS Used 是一款前端开发设计辅助工具，支持单击页面即可获取应用于选定web元素及其子元素的所有css。已知限制1.对于像“.wrapp｛…｝”这样的CSS规则，如果只选择了“＜p＞”，则结果“.wrap p｛..｝”将不适用于“＜p＜”。将规则更改为“p｛…｝”，或者在最终HTML中添加“.wrap”父级。2.目前不支持CSS自定义属性（变量）和所有样式继承相关功能。

Visual CSS Editor是一款虚拟样式编辑插件，允许你对比如WordPress网站进行一些自定义的操作，如果你经常在需要开发的网站上测试一些CSS效果，可以试下这个插件，方便你在面板上直接测试应用，还可以把样式表导出来。这款简化了CSS样式的更改，让开发者更有效率。也是一个可以让那些不懂CSS但仍想创建漂亮网页的人使用的插件。

Fontanello 是一款开发者工具，特点在于不需要通过源代码或者开启浏览器调试模式来查看字体的CSS信息，只需要鼠标选中文字，右键即可在菜单中看到Fontanello ，移动到Fontanello上面，即可显示出该文字的CSS信息，如大小，使用的字体等，比较适合前端开发。

Web Maker 是一款网页开发者插件，对于网页开发编辑和预览都非常方便，专业易用，安装插件后可以让用户预览各种网页编辑的内容，可以用来测试HTML、JS 和 CSS 内容。

CSS Peeper是一款前端开发者插件，是为设计师定制的CSS查看器。使用CSS Peeper 访问有用的样式，让设计师专注于设计，并尽可能少地花时间挖掘代码。有没有想过网站上的行高、字体或按钮大小是多少？我们为您提供满足您好奇心的终极工具。CSS Peeper 可以让您能够以最简单的方式检查代码，检查web上对象、颜色和资源的隐藏CSS样式。