推荐一个谷歌插件：前端助手

淡淡的烟草味﹌ 2023-01-01 11:50 202阅读 0赞

插件地址：[前端助手][Link 1]

下面这些框出来的工具是我最常用的  
![在这里插入图片描述][20210102155632977.png]  
其他功能就不展示了

### 1、网页栅格标尺作用如下 ###

可以测量div元素的大致大小，然后进行细调  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]

### 2、Json美化工具 ###

之前我用过另外一个专门的json美化工具：[JSON Formatter][]  
对于 `restful` 风格开发的后端程序员来说非常方便，后面我选择前端助手自带的这个

建议不要两个插件都同时开启，否则会在页面显示2个json美化后的视图，会误以为后端返回了2个json对象

我个人建议就是只需要按照前端助手即可，然后在设置中添加这个工具

功能效果如下，个人感觉比`JSON Formatter`功能更强因为有其他功能，可以进行编码的转换和排序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 1]

### 3、网页截屏 ###

这个截屏相当于手机上的滚动截屏，因为有可能会用到

### 4、图片转Base64 ###

这功能对于会用阿里云OSS对象存储服务的同学来说意义不大，只是为了方便没有文件存储服务的程序，会将图片转换成base64，然后存入数据库中，实际开发不应该采用这种方式，因为图片一般比较大在传输的过程中非常消耗网络。

建议这部分同学学习使用阿里云的OSS对象存储服务

### 5、进制转换 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 2]  
用途则是一些算法可能会用到笔记底层的操作，有些时候需要知道底层的二进制表示。

### 6、js正则表达式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 3]  
有常用的的正则表达式，可以直接套用如上直接选择即可

### 7、时间戳转换工具 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 4]  
这个工具在一般的爬虫或者一些涉及到安全的api接口中，很可能会用到时间戳这个参数，我在实际开发过程中曾经用过这个这个工具去分析网站的 api 接口。

### 8、网页取色 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 5]  
实际这个工具用处也不大

### 9、其他工具 ###

就自己弄吧，其他的工具感觉没啥大用处

[Link 1]: https://chrome.google.com/webstore/detail/fehelper%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8B/pkgccpejnmalmdinmhkkfafefagiiiad?hl=zh-CN
[20210102155632977.png]: /images/20221120/8f548e3be55d40ef9b7ee2d44894d9a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]: /images/20221120/dd3f4a7816124172a9ebad23ee25976a.png
[JSON Formatter]: https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=zh-CN
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 1]: /images/20221120/e2f8db9f21e34ed3a4a020d44d14b2ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 2]: /images/20221120/d3493fb61bc54044bc76f9354083e5c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 3]: /images/20221120/a4bf78afbadb47e0a93d6ac87a5ea0f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 4]: /images/20221120/a0089476861a4517a2d6c884993264a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 5]: /images/20221120/ed916de17f514f3b8124fd9f0fbf85db.png