• What is a Source map?
  • Webpack’s current source Map generation strategy
  • Why don’t we use source Map anymore?
  • What is a reverse proxy?
  • How do we debug front-end bugs?

What is a Source map?

As the code grows, we need to compress it. It will be very difficult to tune bug location after code compression, so sourcemap is introduced to record the position information before and after compression. When errors occur, it will directly locate the position before compression, which will greatly facilitate our debugging. —-from the network ruan Yifeng wrote an article, JavaScript Source Map detailed explanation, if you are interested in can have a look.

In fact, many programmers may not understand. But it doesn’t matter, this article is mainly about front-end development, debugging experience sharing.

Webpack’s current packaging strategy

The devtool property of Webpack is used to configure the code Source Map generation strategy. Each is slightly different from a development environment to a production environment. The hey-cli devtool only selects Eval for the development environment and None for the production environment, which are the fastest strategies for webPack deployment, both of which are +++(super fast) speed respectively.


Why don’t we use Sourcemap anymore?

Pretty Print comes with Chrome

On some code errors, using Chrome debugging can be directly pretty code, compressed code after pretty, readability greatly increased.

2. If build code uses sourcemap, build speed is greatly reduced

Sourcemap comes with a lot of information, and if a build needs to generate sourcemap, it will significantly slow down the build.

3. We use native code to debug bugs in all environments

Yes, thanks to the reverse proxy mechanism. If the problem is complex or performance-based, it can be difficult to debug from the code on the line. We can debug different environments by modifying the hey-CLI reverse proxy configuration. In the final chapter, we will elaborate. If you are not familiar with the Hey-CLI, check out the hey-CLI, which supports vue React ES6 development. Of course, if you are using webpack configuration, including vue-CLI scaffold generated Webpack configuration, can be used.

What is a reverse proxy?

I won’t elaborate on this, but you can take a look at some configurations of Nginx. Mr. Ruan yifeng also wrote a beginner: Nginx container tutorial

Webpack reverse proxy configuration

Webpack agent configuration: devServer.proxy

Hey-cli reverse proxy configuration

Hey-cli only needs to configure devServer in the Webpack object of hey.conf.js. The configuration is the same as that of devServer.proxy.

hey.conf.js

module.exports = {
  ...
  "webpack": {...//define proxy, https://webpack.js.org/configuration/dev-server/#devserver-proxy
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://0.0.0.0:8080"}},historyApiFallback: true}}};Copy the code

How do we debug front-end bugs?

Having said all that, there is only one last step left. Take the hey-CLI as an example. The usual development environment hey.conf.js:

devServer: {
  proxy: {
    "/api": {
      // The development environment backend
      target: "Http://development environment :8080".pathRewrite: { "^/api": ""}}},historyApiFallback: true
},
Copy the code

Debug the formal environment

devServer: {
  proxy: {
    "/api": {
      // The formal environment backend
      target: "Http://official environment :8080".pathRewrite: { "^/api": ""}}},historyApiFallback: true
},
Copy the code

Restart the hey-CLI, access the development environment, and use the backend of the formal environment.

Debug completed, checkouthey.conf.js, commit hotfix.

Pay attention to

Our front-end team has always maintained that the front-end code for all environments is identical, and it is not recommended to use JS to judge different environments. As for why to do so, I believe that we can understand. The key question is, how do you accomplish such a setup? Our current approach is that Gateway provides an interface to/ENVS through which the different configurations of each environment are captured uniformly. If you’re interested, you can continue the discussion and see if there’s a better way to do it.