This is the 127th original article without water. If you want to get more original articles, please search the public account to follow us. This article was first published on the cloud blog: Front-end Engineer production environment debugger skills
Introduction:
Development environment debug is an essential skill for every programmer. What about the production environment? Debugging in production is a very inelegant thing to do, but we have to do it again for a variety of reasons.
Today we will talk about how to debug in production using Chrome.
Debug steps in the production environment
How many steps does production environment debug take? It’s as simple as putting an elephant in a fridge and taking a few steps together.
Step one, open the fridge door. F12 Start devTools.
Step two, put the elephant in the refrigerator. Find front-end files to debug, format, break points, debug context, locate problems;
Step three, close the fridge door. Solve problems.
How to quickly locate whether the error is returned by the front-end or back-end interface?
Before putting an elephant in the refrigerator, make a preliminary decision about whether you really need to put the elephant in the refrigerator.
First, we need to determine whether the error is reported by the front end or the back end, so how to determine quickly?
Scheme 1: According to the understanding of the implementation of the code, judge whether the error belongs to the front end or the back end.
This solution assumes that you are familiar with the code implementation and is the easiest way to do it.
Scheme two: front-end code global search keywords, engineering code search/console open search.
Go to gitlab or vscode or devTools global search for the project.
Plan 3: Browse the requests in the Network panel.
Check the request in the Network panel to see whether the returned response carries an error message. If yes, it indicates that the response is returned by the back-end. If the error interface happens to return a non-200 state, or if a new operation triggers the call interface, we can quickly find the corresponding interface, as follows:
Scheme 4: Use Network Search to search.
However, in many cases, an interface business error will be returned as HTTP status 200 if a large number of interfaces are requested (for example: In addition to scrolling through a network one by one, chrome devTools also provides a more convenient way to use the Network Search panel. You can search for detailed interface information (including detailed return information) and return matching results.
How do I open the Network Search panel?
⌘ to the Network search panel by pressing the shortcut key + F (Mac), CTRL + F (Windows).
If you do need to put an elephant in the refrigerator, what are the tips for putting an elephant in the refrigerator?
How can I quickly locate the code related to the problem
Global search, global search keywords, and then locate the key code
Chrome devTools global Search is a very useful feature when you do not know which file to debug the code, when you are a very large system, reference a lot of resource files, you can use global Search to search for keywords. This will search for all the loaded resources. Click on the search results to open the corresponding resource file using the Source panel, then format the code, and then search for the keywords in the current file again, breaking point.
Open the Global Search shortcut:
⌘ + ⌥ + F (Mac), CTRL + SHIFT + F (Windows)
Looking at the following example, let’s search for code on a random page:
What keywords can you try to search with:
(1) There is a clear error message on the page, and it has been clear that the error message is written in the front-end code. In the coding process, strings are generally used in the prompt messages, which will not be processed in the compression and obfuscation process, and the original text will be retained. Of course, in the code packaging and construction process, Chinese unicode transcoding can also be selected for the code compression and obfuscation. In this case, if the key word is Chinese, it is necessary to transcode before searching.
(2) the key code that remains after the compilation confusion in the relevant code is known, and the method name that will be exposed;
How to debug obfuscated JS?
Js in the production environment is basically confused (click to understand the front-end code compression confusion), the advantages of compression confusion is not repeated, compression confusion followed by the production environment debugging difficulty, although through the interruption point, barely can understand, but has been very anti-human.
Let’s use a simple demo to compare the difference between build and build in a code production environment.
Here we have chosen vue-CLI to create a simple demo. Take a look at the source code and the compiled code.
The source code:
Build compiled code (sourceMap is turned off here) :
Here we see that the compiled code has been compressed and confused. A large number of a’s, B’s, C’s and D’s have replaced the original function method names and variable names. The compiled code can no longer be read by simply reading the code. But we can probably see it through debug.
Is there a way to debug code in production using native sourceMap? Of course there is.
How do I debug using native sourceMap in a production environment?
Step 1: Open obfuscation code
Step 2: Right-click -> Select Add Source Map
Step 3: Enter the address of the local sourceMap (you need to enable a static resource service, you can use http-server). The local code executes the build command, noting that the sourceMap configuration needs to be opened and compiled to produce the built code, which in this case contains the sourceMap file.
After associating sourceMap, we can see the change on the Sources -> Page panel
How to modify and debug code in Chrome?
In the development environment, we can modify the code directly in the IDE, and the code changes are directly updated in the browser. In production, can we just change the code in Chrome and see what happens immediately?
Of course, Chrome devTools has everything you want. Chrome devTools provides local Overrides capability.
How does local Overrides work?
Specify the local save directory for the modified file. When the modified code is saved, the modified file will be saved to the directory you specify. When the page is loaded again, the corresponding file will not read the file on the network, but read the modified file stored locally.
How to use local overrides?
First, open the Overrides panel under Sources.
Then, click [Select Folder Overrides] to select the modified file storage address.
Then, click the authorization icon at the top to confirm consent.
Finally, we can open the file and make changes, save the changes, refresh the page, and the modified code is executed.
⚠️ Note that the original js file format cannot be modified; Add invalid code before the code format for code changes to save, and then format can be modified;
conclusion
Chrome debugging skills far more than these, of course, the above is only the production environment debugging tips, I wish you do not use, the best way to deal with bugs is of course in advance, before the launch of the solution; If a problem does occur, monitor and log it to find and solve it as soon as it occurs.
reference
- Developer.chrome.com/docs/devtoo…
okokokokok
As the voting page opens, the nuggets 2021 author list will begin to hit the list.
Please move your little finger and vote for us. Your support is the biggest motivation for us to move forward,
- Web entry: Click me vote
- App entrance: Please scroll to the top of the article and press ↓ as shown below
Recommended reading
- Sketch Plug-in Development Guide
- Why is index not recommended as key in Vue
- Brief analysis of Web screen recording technology scheme and implementation
Open source works
- Political cloud front-end tabloid
Open source address www.zoo.team/openweekly/ (wechat communication group on the official website of tabloid)
- Item selection SKU plug-in
Open source addressGithub.com/zcy-inc/sku…
, recruiting
ZooTeam, a young passionate and creative front-end team, belongs to the PRODUCT R&D department of ZooTeam, based in picturesque Hangzhou. The team now has more than 60 front-end partners, with an average age of 27, and nearly 40% of them are full-stack engineers, no problem in the youth storm group. The members consist of “old” soldiers from Alibaba and NetEase, as well as fresh graduates from Zhejiang University, University of Science and Technology of China, Hangzhou Electric And other universities. In addition to daily business docking, the team also carried out technical exploration and practice in material system, engineering platform, building platform, performance experience, cloud application, data analysis and visualization, promoted and implemented a series of internal technical products, and continued to explore the new boundary of front-end technology system.
If you want to change what’s been bothering you, you want to start bothering you. If you want to change, you’ve been told you need more ideas, but you don’t have a solution. If you want change, you have the power to make it happen, but you don’t need it. If you want to change what you want to accomplish, you need a team to support you, but you don’t have the position to lead people. If you want to change the pace, it will be “5 years and 3 years of experience”; If you want to change the original savvy is good, but there is always a layer of fuzzy window… If you believe in the power of believing, believing that ordinary people can achieve extraordinary things, believing that you can meet a better version of yourself. If you want to be a part of the process of growing a front end team with deep business understanding, sound technology systems, technology value creation, and impact spillover as your business takes off, I think we should talk. Any time, waiting for you to write something and send it to [email protected]
