Front-end interview question: the page appears blank, how to troubleshoot the positioning problem?

how to give an answer to the satisfaction of the interviewer?

Apr.01,2021

1. Make sure the network connection is smooth first.
2. Check whether the network url address is entered incorrectly.
3. Open the console to view the error message.
4. Check whether there is a request for API access.
5. Check to see if there is a path or name error in the route, resulting in the loading of a page that does not exist.
generally, after these steps, you can basically locate the question.


Please note that the interviewer wants to examine the organization of your thinking through this question. If you only rely on your past experience or on the Internet to see a few possibilities listed by others, you can pass. People with high scores will tell the interviewer about their thinking process, and then talk about the tools needed for each process and the desired results.
the goal of the final interview is to find someone who can think and solve uncertain problems in the future independently. Of course, those interviewers who are purely looking for "programmers" don't think so. they want old scalpers. If you have the opportunity, please try to be an independent thinker and go to a company that values and encourages independent thinking.


this is an interesting question, as far as experience is concerned, if the page is completely blank. It is most likely that there is a problem with the back end and the error output is disabled. For example, when the apache2, backend is configured with no error output and the service status is 500, the page is blank.
if it is caused by the front end, it is most likely a single-page application exception, because ordinary html output, even if there are some errors, is unlikely to be blank.
troubleshooting steps are as follows:
1. Open a browser that can see the source code and request and response, such as chrome, to view the source code output. If not, use the LAN data monitoring software to view the page output. Check whether the source code is abnormal, http status, etc. This step is used to check whether it is a backend or frontend problem, or a network problem.
2. If it is a backend problem, then the backend looks at accesslog and program log to see if there is a problem
3. If it is a front-end problem, troubleshoot according to the given js exception

.

this is an open question, which mainly examines experience and problem-solving ability.


what you are applying for is a working position, and the interview will not test your ideas too much. You just want to know whether you will, whether you have experience or not, and do not have to think about it so much. It is what you will be.
White screen question:

99% syntax error. F12 opens to see if js has reported an error to see if there are any elements on the page and whether it is hidden.
0% of the network is blocked. Try refreshing first. The network problem will not go white, and the browser will tell you that the network is blocked.
1% of the server explodes and some resources cannot be loaded, which is also possible.


look down and simulate for one minute, then look up and tell the interviewer that the white screen problem has been solved


I encountered a local update to online, and the address at the back end forgot to change, so that the white screen could not be verified, and whether there was any content on the page pointed to by the URL to see if there was something wrong with the routing configuration. The most important thing is to open the debug browser to debug and see if the program has reported any errors


at this time, of course, open your chrome console, and type log to see what happened on the dom element.


I think in this case, first check whether the page loading failure is caused by the front-end error in the console, and if there is any relevant error, check the cause of the error; if there is no error message at all, you may have to find the backend developer to troubleshoot the problem, whether it is the back-end configuration or the page display failure caused by the back-end error


.
  1. Open the console to check whether static resources failed to load (the loading order of resources should also be watched)
  2. Open the console to see if the request is abnormal (network conditions also need to be followed)

in short, open the console to check the error report, see the move ~

it is also possible that the server template points to an error.


when you encounter a white screen, you almost always find it when you open it for the first time, and it turns out that you accidentally wrote the wrong path.


think according to the stem of the question, this is the blank problem caused by the CSS style, and the old buddies above have answered it wrong.
however, I didn't find a solution, and there was a blank in life and death.

Menu