写了一个小工具，可以在网页中像 Sketch/Figma 一样量度元素间距

[stevenlei]

大家好，写了一个 JavaScript 的小工具，名为 Spacing JS 。

我们做前端开发的时候，间距和空间感的掌握尤其重要。浏览器的开发者工具可以看到元素的大小，padding/margin 等等资讯，但是好像不能像 Sketch / Figma 这样量度元素之间的距离，所以写了这个小工具，效果图如下：

大家也可以到网站体验一下（网站寄存在 Cloudflare Pages ，有时候可能要用外网）：

https://spacingjs.com

除了通过 <script> 加载到自己的网站，也可以把它加到浏览器标签，在任何网站里使用。相关的标签代码可以在网页中找到。另外，浏览器的插件版本正在做。

项目地址在这里，如果喜欢的话请给个 Star ，欢迎大家参与开发：

https://github.com/stevenlei/spacingjs

对于这个工具也有个简单的视频介绍：

YouTube: https://www.youtube.com/watch?v=yirtQ8bQjKI

B 站：https://www.bilibili.com/video/BV1rR4y1E7xg

谢谢大家！

[Vitta]

棒，做成插件或者油猴脚本更方便
虽然听不懂但是声音很好听

[54xavier]

给 steven 打 call

[cyrbuzz]

强，已 Star 。

[E520]

牛逼

[aasdkl]

好评！

另外我找到了个油猴脚本： https://greasyfork.org/en/scripts/435347-spacing-js

不过我觉得做成 bookmarlet 更加方便一点：

```

javascript:(function(){
　　　　 var script=document.createElement('script');

　　　　 script.setAttribute('src', '//unpkg.com/spacingjs');
script.setAttribute('defer','');

　　　　 document.getElementsByTagName('head')[0]
　　　　　　　　.appendChild(script);
})();

```