(I) WEB Front-end Assistant (FeHelper)
FeHelper is simply the artifact of front-end developers, it is developed by the People of a front-end tool set of small plug-ins, plug-ins are complete, basically covers the front-end practitioners often used to the basic functions, use is also very handy. Here’s a taste of the power:
FE supports on-demand installation, which means you can install whatever you need for the above features. Here are two that I use in my work:
Json formatting
Page color
We need to take the color of some content in the development, many friends are open chrome debugger and then use the color to take the color. Using FeHelper’s color picker is more convenient
JS regular expression validation
It can not only generate common regular expressions, but also check whether the expressions match, which can play a good role in the regular debugging process
(2) the vue – devtools
Vue is data-driven. You can see data, props, computed, and other attributes and methods for each component in vUE. For our project development and debugging has provided a lot of convenience.
(3) React Developer Tools
If you are developing with React, you will need the React Developer Tools, which are made for facebook. When you debug with React Developer Tools, you can see the React component hierarchy of your application. Rather than the more mysterious browser DOM representation
(4) the Postman
The Postman plug-in can reuse cookies from the browser for easier testing. Whether you’re doing backend development or client development, Postman is a must have for testing HTTP interfaces. It supports integration testing. You can also group test requests and execute them in batches.
(5) Octotree
Display the code tree on the GitHub sidebar. Ideal for viewing project source code, without having to clone the code base to the editor, you can search for files directly as if you were operating in the editor.
6. Lighthouse front-end performance optimization test tool
In the front-end development, for their own development of the app or Web page performance is good or bad, has been the front-end development is very concerned about the topic. We need a professional website testing tool to help us figure out what we need to improve on our website. One of the tools I’ve used is Lighthouse. I felt good about it, documented it, and shared it with everyone who needs it.
Lighthouse is a very useful visual website optimization tool that scores the results of each test and reports optimization suggestions.
(7) Clear Cache
Clear Cache Clears the cache and views the data by clicking a button. Use this extension to quickly clear the cache without any confirmation dialogs, pop-ups, or other annoyances. ** Click the icon to clear the cache, cookies, etc., development essential! ** You can customize ClearCache for the data you need to clear, including application caches, cookies, downloads, file systems, form data, history, index databases, local storage, plug-in data, passwords, WebSQL, etc.
(eight) Vimium
Vimium inherits the usual keys from Vim, allowing you to browse the web, switch tabs, or do anything else with Chrome using just the keyboard. Imagine never having to move your mouse to open a link again, never having to take your finger off the keyboard, everything flowing smoothly.
(9) Save All Resources
When we see cool animations on a web page, the natural idea is to F12 and download the resources, but in the Chrome Developer tools Source is the resource used to find the current page, and we want to be able to download all the web resources with one click and keep the directory structure.
One-click download of web Resources (Save All Resources) can perfectly meet our needs
Wappalyzer (10)
How accurate is it to show what technology stack the web pages you visit are built on to facilitate analysis of other sites
Daily High frequency usage (non-development)
1. Google Helper _GHelper
Most of the time, users want to browse some foreign websites to look up some information, but the domestic network environment is difficult to pass, so we have introduced a variety of Internet assistant, visit assistant, etc. Today, we bring you another version of Google Assistant — Development Version (Ghelper). Free to use, it has 120,000 high users, simple and clear, easy to use!
2. SimilarWeb
For website developers, in addition to the code design and development of the website itself, the website’s various user access data and traffic analysis is also very important work. SimilarWeb is a Chrome add-on that can help you figure out where your web site’s traffic is coming from, where it’s ranked, and where it’s participating.
3. Advertising Terminator
Advertising Terminator is the only essential AD filtering extension you need. AD Buster can remove almost all online AD styles, including shopping ads, floating ads, video ads, malicious pop-ups, network tracking, etc…
4. Infinity new TAB
And finally, Infinity, the powerful new TAB extension for amway! The interface is very beautiful, and the daily wallpaper quality is very high! There are synchronous notes, to-do items, and so on, at the same time, like its page icon, provides a lot of commonly used site icon, custom bookmarks look good when the only drawback, is the feeling of slow startup
5. New media manager — account management and image editing
As the name suggests, the main function of New Media Manager is to manage your new media accounts, currently supported on the following platforms:
Allows you to manage accounts on several platforms at the same time, or multiple accounts on one platform. Once the account has been added, it can be accessed through the New Media Manager. For example, for the wechat public platform, you can add multiple accounts, and log in at the same time, a day only need to scan the code to log in once, you can directly enter the background.
New media butler also has a very useful function is to collect material, when you see the desired material, click on the collection, you can store their own collection of material library, want to use at any time.
6. Extension Manager
The Extension Manager is an Extension Manager that you can use to group and manage your installed plug-ins. You can also quickly switch plugins on and off, and you can configure collation rules to sort them according to your usage ratings.
Normal installation
-
Enter [Chrome :// Extensions /] on the TAB to go to the Chrome extension
-
Unzip the plugin you downloaded from this site and drag it into the extensions page.
For details about how to troubleshoot crx-header-invalid, see “Crx-header-invalid” during Chrome plug-in installation. After installation, it can be used.