You can definitely use the front-end development tips that Tencent T4 boss compiled overnight!

Development tips

vConsole

In the process of h5 application development, browser debugging is generally used, but if you really put the code on the h5 side, occasionally you will encounter some situations that cannot be handled. For example, if you encounter a situation before, use new Date('2020- 11-17 12:12') (safari and IE seem not to work, use it with caution), this format conversion, compatibility is not considered, chrom debugging is all normal, but after the mobile phone opens the application, the time parameter returns null. This situation is more pitted

So I thought about how to view the code, interface return, and error message of the h5 end like a browser?

I found a relatively easy-to-use tool-VCosole. It is also very simple to call. Because it is not necessary for the project, add the following code directly to the html page of the project, and you can delete it when you don't need it:

    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
    <script>
      var vConsole = new VConsole();
    </script>
复制代码

After the project is started, a vConsole button will appear, click to open the interface of the simulated devtools shown in the figure above, and the error message can also be seen at this time~

Charles

I have maintained a public component of the company for a period of time. It is a simple js file. It takes a lot of effort to maintain each time. It cannot be started like a Vue project to check the effect.

Solution: Use the agent tool Charles to replace the online file with the local js file to view the effect

Use steps: 1. Open the Charles application -> click tools in the toolbar -> click Map Local -> click add

Open the pop-up window, Map From is the online link address, you can fill in each parameter in turn, if you find it troublesome, you can get the full path of the link and fill in the path directly, and the other parameters will be automatically completed (this is good~); Local Path is the local file path

2. After filling in the parameters in step 1, click OK, and refresh the page to see that the online files have been replaced with local files~

overrides

This is an entry that comes with the devtools of the Chrome browser, which can replace online files with local files

Path: option + commond + c Open the console, Sources -> Override -> Select folder for overrides -> select the corresponding file

Replacement method: Get the path of the file to be replaced, start from the domain name level, create a new folder in turn, and put the local file we want to replace in the innermost layer, eg: www.baidu.com/js/a.js

Create a new folder 1, the folder name is: www.baidu.com folder 1, the new folder 2, the name is: js In folder 2, put our local file, a.js

Open the page at this time, you can see that the online file has been replaced by the local file~

lighthouse

Features

Lighthouse is an open source automation tool that improves the quality of web applications based on reports generated by the lighthouse.

How to use

• Open devtool, click on audit and then click generate report, but you may often encounter stuck in the lighthouse is warming up step

• Use the command line to install lighthouse globally: npm install -g lighthouse, then enter in the terminal: lighthouse url (the URL you want to test), eg: lighthouse www.baidu.com . Command: lighthouse --help to view the available Input and output options

Lighthouse finally generates html files by default, and the corresponding repair plan will be given in the report. According to the generated report results, the performance of the page can be analyzed and the deficiencies can be modified. Examples are as follows:

Finally, if you need these materials, you can click here to get them