svg Grabber 是一个 chrome &nbsp;的扩展插件，可以快速预览，下载和复制网页上的内嵌或嵌入式 SVG 素材。<img src="//media.toolgather.top/QQ20190831-211245-HD (1)1567405510400.gif"/>

svg Grabber

svg Grabber - 获取网页 svg 素材 - 胡思

更改浏览器尺寸<img src="//media.toolgather.top/改窗口.2019-08-26 18_51_471566817089228.gif"/>用 Window Resizer 可以改变浏览器的宽高，检验网站在不同分辨率下的表现。

Window Resizer

Window Resizer - 更改 Chrome 浏览器尺寸 - 胡思

Dimensions 是一款 Chrome 浏览器插件，可以测量页面上各个元素之间的距离。<hr/>间距测量<img src="//media.toolgather.top/dimengif-7.24s1567399191446.gif"/>凡是你在浏览器中看到的元素，比如图片、输入框、按钮、视频、文本等，都可以通过 Dimensions 测量这些元素之间的间距。借此走查开发人员对于设计稿的还原程度。

Dimensions

Dimensions - 设计还原度走查 - 胡思

间距测量

测量网页<img src="//media.toolgather.top/Aug-26-2019 18-55-23.2019-08-26 18_56_021566817202587.gif"/> 用 Page Ruler 可以测量网页里各个元素的位置与尺寸。

Page Ruler

Page Ruler - Chrome 内嵌测量插件 - 胡思

自制光标<img src="//media.toolgather.top/图标库1566817361629.gif"/>使用酷炫的免费鼠标光标自定义使用Chrome浏览器的体验。从任何图像创建自己的鼠标光标集合。

Custom Cursor

Custom Cursor - 自定义 Chrome 里的鼠标样式 - 胡思

Toybox 插件可以将你的网站变为在线协作白板，直接获取团队成员和客户的反馈。只需要将目标网页新建为 Toybox 项目，受邀访客可以在网页上实时注释、评论、互动，更新评论可以同步到几款主流项目协作软件如 Trello, Slack 等。目前，Toybox 支持30天免费试用。<hr/><h2 class="ql-long-5123475">为项目添加 URL</h2>完成账户注册后新建项目，在项目中添加待评审网站 URL，兼容地址下二级页面。例如添加 whose.design ，whose.design/tool 和 tutorial.whose.design 的评审内容均可被收录（添加 <a class="ql-link ql-author-5123475" href="http://www.whose.design" target="_blank" style="color: rgb(112, 177, 231);">www.whose.design</a> 则无法收录 &nbsp;tutorial.whose.design 页面内容 ）。<h2 class="ql-long-5123475">注释与评论</h2>
 &nbsp; &nbsp; &nbsp; &nbsp;<img width="2854" height="auto" src="https://uploader.shimo.im/f/IBavLoIDzGI9gpbL.gif"/>
 &nbsp; &nbsp; &nbsp;&nbsp;用户可以以框选和点选两种方式添加评审，可以 @其他成员，添加附件或是 emoji。&nbsp;<img width="238px" height="auto" src="https://uploader.shimo.im/f/08p0ZuRRncUtW8px.png!thumbnail"/>
 &nbsp; &nbsp; &nbsp;进入 Toybox 工作台，则可以浏览所有评审记录，除了评审区域和内容外，Toybox 还记录了用户系统、浏览器和视窗尺寸信息，极大方便了开发人员定位网站问题。 <h2 class="ql-long-5123475">同步与导出</h2>
 &nbsp; &nbsp; &nbsp; &nbsp;<img width="1966" height="auto" src="https://uploader.shimo.im/f/j7CtLKJGhhgD8B5l.png!thumbnail"/>
 &nbsp; &nbsp; &nbsp;Toybox 在最近更新中支持将评审记录导出为结构化表格，CSV 格式方便用户进行结果数据分析，不啻为大样本可用性测试的辅助工具。&nbsp;&nbsp;目前，Toybox 支持以 Chrome 插件唤起标注工具、以 JS 代码段嵌入网页两种形式。管理员通过 Toybox 工作台进行统一管理。Toybox 的各项功能完成度较高，值得独立开发团队一试。

Toybox

Toybox - 网页协作评审插件 - 胡思

通过网页图片模糊和随机字符替换文本，一键隐藏页面信息。DataMask 可以对 jpg、png、gif 等格式位图进行模糊处理，字体则会被直接替换为随机西文。<hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);">自动模式｜Auto</h2>自动完成所有图片模糊和文本替换，刷新恢复页面。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-6d0baf09faf64ef5ac2811d7ae34c064_hd.gif"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);">手动模式｜Manual</h2>通过点击区块完成特定内容的信息处理，Esc 键退出选取。刷新恢复页面。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-8a63dba9e8c1c56b93408d6171f277b0_hd.gif"/>

DataMask

DataMask - 网页打码插件 - 胡思

ColorZilla 是一个帮助开发人员和设计师完成网页颜色识别的相关任务。ColorZilla包括拾色器，滴管，渐变生成器和许多其他高级颜色工具。<ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap;"><li>工具地址：<a target="_blank" href="https://www.colorzilla.com/" class="Link ztext-link" style="color: inherit; text-decoration: none; cursor: pointer; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: grey;">https://www.colorzilla.com/</a></li><li>工具类型：Chrome、Firefox 插件</li></ul><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; font-synthesis: style; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap;">网页识色</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-eabd8cde21953f7050407648ce640f29_hd.png"/>如果你看到一个漂亮的颜色，并且你需要它的代码在你的项目中稍后使用它，那么“Pick Color From Page”可以快速帮你完成该任务，你可以从浏览器中的任何位置获取颜色读数，并点击将此颜色并将其粘贴到另一个程序中。这是一个非常简单的功能，可以帮助你从网页中挑选和保存颜色。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; font-synthesis: style; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap;">可视化 CSS 渐变生成器</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-b8a3412ef5afdcdaf689472fee0960ea_hd.png"/>一个强大的在线渐变 CSS 生产器，提供类似 Photoshop 的渐变编辑器，一边调整颜色一边输出代码。当你还在为如何编写渐变色的 CSS 代码而手足无措时，使用该功能可快速产出 CSS 代码。提效一小步，幸福一大步。

ColorZilla

ColorZilla - 网页识色插件 - 胡思

Fontface Ninja 是一款字体识别浏览器插件，包括字体、字体大小、行高、字符间距、颜色信息，此外还包括字体收藏、字体试用和购买功能，目前尚未兼容中文字体购买。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);">字体识别</h2>Fontface Ninja 安装后，打开网页待加载完毕，点击插件按钮，则可加载当前页面使用的所有字体，可购买字体随附购买链接。鼠标悬停文字时，则会出现字体大小、行高等样式信息。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-dfe054e7ce3359cbb94bd90921c4f23e_hd.png"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);">字体试用与标记</h2>通过 Fontface 的插件窗口，你可以试用文字效果，收藏文字，或是直接购买。进入<a target="_blank" href="https://fontfacedojo.com/bookmarks" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">Fontface Dojo</a>登录账号， 可以查看所有收藏的字体（免费账号可以收藏10款）。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-6c5425dcca5411eccef3727a40e3f886_hd.gif"/>

为设计师准备的 Chrome 插件集合