“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

A previous article: front-end development – online tool recommendations by many children’s favorite, let me find a lot of front-end development students need tool recommendations, so today I recommend the Google Browser plug-in USED in front-end development.

Google plug-ins need to install VPN, if not over the wall, you can also use the extension fan such as the domestic plug-in Google plug-in store for plug-in installation. Make sure that the plugin store is sourced from a reliable source, and avoid installing bad plug-ins that may carry malicious scripts!

The plug-in

Framework for debugging

React Developer Tools

React debugger plugin for React development. React source code breakpoint debugging is supported. It is very convenient for React development and debugging.

Vue.js devtools

Debugger plug-in for Vue development. It works on Google and Firefox. The Vue. Js DevTools data structure debugging tool allows you to debug code in the browser developer tools. Because VUE is data-driven, there are some problems that can not be analyzed by viewing the DOM structure in the development and debugging. At this time, we download and use vue-DevTools plug-in, which can be used to parse and debug the data structure.

Utility class

Wappalyzer

Web site technology sniffing tool

You can view the current web page using the technical framework, javascript libraries, building tools and analysis tools, for you to survey the technical framework of other sites, services to help a lot, very convenient, practical.

FeHelper

As the name suggests, this is a front-end assistant.

It has a lot of features. Such as JSON formatting, JSON comparison, two-dimensional code, information encoding and decoding, code compression & beautification, page color selection, Markdown, webpage screenshot, coding Settings, re, Crontab, time conversion, webpage performance detection, password generator, note notes, Chrome plug-in download, etc

Belong to front end tool set class, artifact!

Can be commonly used screenshot, color, generation of TWO-DIMENSIONAL code and other options to add the right button, directly in the page right button selection can be directly called tools, such as two-dimensional code generation, right-click selection will be the current page link to generate two-dimensional code

You can also set the two-dimensional code format, or switch to the decoding mode.

ModHeader

Add a plug-in to the HTTP request header

Use to add new data to the request header of the current page. Common scenarios are cookie, gray branching, language markup, environment markup, etc. It is an indispensable plug-in for interface interconnection.

Lighthouse

Front-end web site performance evaluation tool

Google official plug-in, used to evaluate the performance of the current web page, in the form of a visual icon to give indicators, and give the corresponding optimization recommendations, is a front-end web performance evaluation of an auxiliary tool, nice comparison.

The main problem is that performance evaluation standard is varied, such as ali is a set of web performance test standard VsCode plug-in, but that does not have versatility, if you are using a framework, scene and its similar, is you can use these tools as a auxiliary tool for performance optimization, otherwise don’t have to too care about the results of these tools, It’s more about how the page looks.

secure-shell

Remote server connection

Tools such as XShell are free and convenient for remotely connecting to servers on the Web. Running in a browser makes it easy to connect to a server using shell on Windows. I mainly use it to deploy microservices projects, and it works great.

These are just a few of the plugins I often use in development. If you have a better one, feel free to share it with me in the comments!