preface

Recently, I used uni-app to develop a wechat applet project. When I opened the debugger, I suddenly saw a string of yellow warnings.

Click the printout of console.log to jump to the compiled source, but not to the mapped source. The SourceMap mapping file is invalid.

What is a SourceMap

Before dealing with the problem, it is important to understand what SourceMap is and what it is used for. The SourceMap file is a meta-information data file, such as the substitution of variable names and the location of variables, after the compression of JS files. Generally, this file is stored in the same directory as the main min.js file. For example, if the original variable is map after compression, it may be replaced by A after compression through variable substitution rules. In this case, the SourceMap file will record the mapping information. This advantage is that during debugging, if some JS error occurs, Then the browser will parse the map file to merge the compressed JS, so that developers can use the uncompressed code to debug, which will bring us great convenience!

Troubleshooting error start

What is the reason for this? Baidu DevTools failed to parse SourceMap, search articles are how to close the yellow warning tutorial, this is not sure, did not solve the root cause of the problem.

Check the packed file. The map file does exist.

Directly click on the link http://127.0.0.1:41311/.sourcemap/mp-weixin/common/main.js.map. The map link, hint I 403 error

Restart wechat development tools, project restart is invalid.

Finally, I looked through the micro channel applet document, thinking that it should be the configuration problem of the development tool. I tried to modify it for a few times, and finally located the problem, which is to enable the enhanced compilation function of the micro channel developer tool.

The solution

Modify the setting configuration under project.config.json to “enhance” to true.

Open the enhanced compilation function of wechat development tool:

{

 "setting": {
    "enhance": true}}Copy the code

Documentation for enhanced compilation:

The UNI-app package will convert ES6 to ES5, so I turned off the enhanced compilation, which seems to affect the SourceMap file mapping.