阅读 1966
前端工具资源小汇总(非轮子,真的小)

前端工具资源小汇总(非轮子,真的小)

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

前言

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

chrome扩展篇

FeHelper

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

edge商店地址

wappalyzer

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

image.png

chrome商店地址

edge商店地址

Allow CORS

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

image.png

chrome商店地址

edge商店地址

PS · 图片快拖助手

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

O1CN01lZvMLb28dthyuHDGM_!!65847956.gif

chrome商店地址

edge商店地址

网站篇

astexplorer

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

image.png

前端人的俱乐部

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

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

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

image.png

Document This

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

GIF 2021-9-29 15-52-55.gif

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

CSS Tree

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

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

文章分类
前端
文章标签