Technicians habitually check the webpage console, and we find that some web pages output some excellent console information, mostly recruitment ads in China. But I have always wondered how it is done.
I took time to study it over the weekend and mark it here.
Let’s show some examples.
For instance, Baidu
Recently, the testing team raised an issue - Web requests showing
Failed to load response data.
Thus began the analysis and resolution process, marked here for reference.
response.status is 200, indicating that the request was initiated and returned successfully.This request has no response data available for empty response bodies, which is not the case here. Hence, this is not the problem.For ordinary users, Chrome is just a web browser, but it can be considered a productivity tool for developers.
Recently, I couldn’t reproduce a bug. The only clue was an issue at the data level when the user requested data on the page. To verify this, I needed to understand the user’s situation. So, I asked the business contact to access the system using Chrome, download the HAR file, and send it to me. Once I received the file, I quickly identified and resolved the issue.
That’s right, the key point is HAR. Let’s briefly introduce it here.
The full name is HTTP Archive format, a file format that records network request information.
The most used IDEs are IntelliJ IDEA and WebStorm. I recently switched from Navicat to DataGrip for database management, aiming to maintain a consistent operational habit, making applying one approach to everything easy. However, both IDEA and WebStorm are pretty heavy, and sometimes, launching IDEA or WebStorm can take a lot of work for simple tasks like editing a web page.
VSC has become very popular over the years due to its lightweight nature and extensive plugin support. Therefore, I decided to modify VSC according to some operational habits from IDEA to improve efficiency.
Keep most shortcuts consistent with IDEAOpen files in browserKeep theme consistent with IDEAAnd so on.