If you ask for help from the interview questions, the test is correct in the test environment, and a blank page will appear in the formal environment. How should you troubleshoot it?

during the interview, I encountered the following questions

is tested correctly in the test environment, and a blank page appears in the formal environment. Because it is packaged in a framework, the code is compressed and breakpoints cannot be used

the customer is still out of town, how should I troubleshoot the problem at this time?

there is no problem with requesting resources. There may be a problem with the js file in the formal environment, but the error cannot be seen because the code is compressed. How to solve this problem?


is not untunable but a well-known reason
to be repackaged with Source Map .


determine whether the resource is loaded correctly. Open the console to network to see whether the request returns the resource correctly. Generally, there will be different sources of resources or inconsistent uri configuration of static resources at compile time between the test environment and the formal environment. If the test environment and the formal source code are the same, and the resource loading is not a problem, it means that there is no problem with the resources on the server side, which may be a problem with the terminal environment, or a problem with the terminal environment. Problems caused by compiling configuration


there is a pause on exceptions button under source.
check it.
refresh the page.
at each breakpoint, look at the data and analyze what went wrong based on the real-time data.

and the white screen is mentioned in the title, according to experience, it is generally caused by the slow network, which leads to the slow loading of files.
then the way to view it is to look at the visit of network first. What is checked here is whether the file is too large, causing slow loading.
the second is performance analysis: Performance is used to determine where the performance is slow, and then optimize.


1. First of all, don't talk too much nonsense, and if something goes wrong, you have to roll back first. If you can record the url, of the js at that time, then you can provide help for the follow-up.

2. Next, let's use local to debug the online environment, and the first screen is blank. If you rule out network problems, you can see that this is a single-page application, because this is the case with single-page applications. If the js is not loaded, it will be a white screen. So I'll take your question as a white screen problem for a single-page application. Local debugging online environment, need to have proxy tools, such as charles, for example, there is a file called vender.js online, url may be like this, xxx.com/dist/vender.js, may be local localhost:8080/dist/vender.js, use tools to transfer the request to the line. If you see that the local screen is also white (by default, there is no problem with your development environment), then the problem is js. You have to see whether the version number of js is correct and whether the console reports an error. If there is an error in the console, if the screen is white, it should be easy to understand. If none of the above, you can see if it is the order of some of the files in html. Because the loading order of current single-page application js is strongly dependent.

to sum up, if there is no problem with the test environment, the direction of troubleshooting is less likely at the code level and more likely at the process / network level.

Menu