前端工具资源小汇总(非轮子，真的小）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

本文列举了工作中可能会用到的工具资源，种类不多，但很实用。下面做了一些简单介绍及安装途径,扩展有区分chrome与edge浏览器喔。

chrome扩展篇

FeHelper

集超多功能于一身，前端人的神器。 chrome商店地址

edge商店地址

wappalyzer

一款强大的网站技术栈嗅探工具,可以分析使用到的前后端技术，下图展示的是掘金用到的技术。

chrome商店地址

edge商店地址

Allow CORS

字面意思，即允许跨域,打开Open options page加入你需要跨域的地址。

chrome商店地址

edge商店地址

PS · 图片快拖助手

鼠标轻轻一点，网页的上的图片资源就能收入囊中，svg也不例外，是不是比F12快很多。

chrome商店地址

edge商店地址

网站篇

astexplorer

官网 你可以挑选你喜欢的库(例如Vue)来测试它的语法所生成的AST（抽象语法树）

前端人的俱乐部

官网 你想看的，它可能都有，要是没有...去别处找找

VsCode插件篇

koroFileHeader

ctrl+S生成文件头部注释，给你维护的组件加上身份证

<!--
 * @Author: lihua
 * @Date: 2021-05-18 09:16:02
 * @LastEditTime: 2021-08-24 10:43:10
 * @LastEditors: zhangsan
 * @Description: app根组件
-->
<template>
  <div id="app">
      <transition mode="out-in">
        <router-view />
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
}
</script>

wakaTime

记录你写代码的一点一滴，写的哪个项目？花了多长时间？用了哪种语言？问问它就知道了。

Document This

给你的函数生成jsDoc注释规范

有小伙伴提出VsCode已经内置了jsDoc规范，开启方法如下

CSS Tree

根据Dom结构生成对应的Css树形结构

干货看起来不多，实际上也确实不多，来的朋友们，感谢阅读，欢迎补充。