Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

This article lists a small but useful list of tools and resources that you might use in your work. This extension is designed to differentiate chrome from Edge browsers.

Chrome extension article

FeHelper

Set super multi – function in one, the front – end people’s artifact. Chrome Store address

Edge Store Address

wappalyzer

A powerful stack sniffing tool that analyzes the technologies used in the front and back end of the site, as shown below.

Chrome Store address

Edge Store Address

Allow CORS

Open Open Options page to add addresses that you need to cross domains.

Chrome Store address

Edge Store Address

PS · Image quick drag assistant

With a click of the mouse, images on a web page can be captured, and SVG is no exception. Is it much faster than F12?

Chrome Store address

Edge Store Address

Web site article

astexplorer

You can pick your favorite library (such as Vue) and test the AST generated by its syntax.

Front end people’s club

websiteIt probably has everything you want, but if it doesn’t… Look elsewhere

VsCode plug-in article

koroFileHeader

CTRL +S generates a header comment to add id to the component you maintain

<! -- * @Author: lihua * @Date: 2021-05-18 09:16:02
 * @LastEditTime: 2021-08-24 10:43:10* @lasteditors: zhangsan * @description: app root component --><template>
  <div id="app">
      <transition mode="out-in">
        <router-view />
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return{}; }},</script>
Copy the code

wakaTime

Keep track of every bit of code you write. Which project? How long did it take? What language was used? Just ask it.

Document This

Generate jsDoc comment specifications for your functions

CSS Tree

Generate the corresponding Css tree structure based on the Dom structure

Dry goods look not much, but also thinking for a long time, to the friends, welcome to read.