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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1107 天前的主题，其中的信息可能已经有所发展或是发生改变。

大家好，写了一个 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

谢谢大家！

figma

工具

sketch

浏览器

5 条回复 • 2021-11-12 15:11:06 +08:00

Vitta

2021-11-12 12:45:34 +08:00

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

54xavier

2021-11-12 12:50:54 +08:00

给 steven 打 call

cyrbuzz

2021-11-12 13:03:18 +08:00

强，已 Star 。

E520

2021-11-12 14:56:25 +08:00

牛逼

aasdkl

2021-11-12 15:11:06 +08:00

好评！

另外我找到了个油猴脚本： 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);
})();

```