My Project Debugging Methods at Work
Mobile Debugging
To debug mobile pages on a PC, follow these steps:
PC
Download WeChat Web Developer Tools;
Open the WeChat Developer Tools and select Mobile Debugging;
Select a request and copy the cookie;
Open Chrome DevTools on your computer, switch to the console, and enter the following code (for authentication):
document.cookie="the cookie you just copied"
- If it’s a WeChat page, you need to use Chrome to simulate the WeChat browser’s user-agent. Tutorial:
Simulate UA to access pages that can only be opened on WeChat
If you find that troublesome, you can directly use the browser built into WeChat Developer Tools. The user-agent is already set to WeChat’s by default.
After completing the above steps, you can normally open mobile pages or WeChat pages on your computer.
WeChat Developer Mode
If your WeChat account has been added to the official account web developer list, you can directly enter the original URL in the WeChat Web Developer Tools and debug on your computer. (Because the backend needs to redirect several times to obtain cookies, the addresses copied from WeChat ultimately cannot retrieve data.)
This method requires deploying the code to a server before debugging. Currently, the project’s automation is relatively convenient. As long as grunt $build runs, the code is automatically deployed to the server.
If you want to debug directly in the local development environment, simply obtain the cookie and you can solve all problems.
The debugger in WeChat Web Developer Tools is the same as Chrome’s, so copying cookies is also very convenient. Then refer to the PC debugging method above.
Mac
If you use a Mac and have an iPhone, you can use the following method:
Note: Ignore step 3 of the tutorial; Xcode is not required. Any webview can be debugged directly.