This article is permalink: github.com/HaoChuan942…

The reason for this summary is to start with a debug of a mobile project last week. On that day, the test sister came to me with her iphone6s and said that the page could not be opened. I thought: how is this possible, my phone is good ah, Chrome debugging tool also did not error ah! I took her phone over to look at it, and when I got inside, it was blank. WTF (manual black question mark)!! Then the problem comes, the development environment did not report an error, but the real machine has an unexpected situation, and can not be as PC end as the F12 method, how to locate the problem and solve it? Finally, with my (Google) ingenuity, I found a way to match the PC debugging experience. In this summary wave, for you are the mobile terminal real machine debugging torture, and do not know how to start the front-end ER, words rest vexed, directly to:

1. vConsoleRecommended index: ★★★☆

Tencent produced Web debugging panel, I believe many front-end partners have used. The vConsole adds a small floating button to your web page that you can click to open and close the debug panel and view information about the DOM, Console, Network, and local storage. It can basically meet the needs of common front-end development. It’s easy to install via NPM or directly import js files to the desired page, and then new VConsole() will do the job. If you’re not familiar with it, you can check out the official GitHub README. However, it did not solve my problem, because my bug is so serious that I will report an error as soon as I enter the page. The fragile javascript will directly explode in place 💥, leaving the page blank 😂.

Similar products eruda

2. CharlesRecommended index: ★★☆☆

Charles is a powerful packet capture tool that intercepts all kinds of network requests, including HTTPS, and can easily view the specific information. There are multiple versions of Mac, Windows, and Linux. You can also intercept requests from mobile phones by configuring WIFI agents. After all, a large number of errors reported on the front end are caused by network errors or data not meeting expectations (😄 on the back end). Therefore, by intercepting HTTP requests and viewing specific request information and data, you can obtain a lot of useful information, which helps debug to a certain extent. But the software is paid (hope you support the legitimate version, remember you are also a developer), and it can not locate js error, so can only be used as an auxiliary tool. As for how to use it, there are many instructions on the Internet – one here.

3. weinreRecommended index: ★★★☆

Weinre is a great tool for checking web pages. By launching a Weinre service locally and embedding a JS script into the mobile web page to communicate with the computer, weinre has the same debugging effect as a browser developer, and its interface is similar to the vConsole. It involves looking at the DOM, Console, Network, and so on, but all on a computer, not a phone. The mobile debugging of wechat Web developer tool is also aided by this. Attached is a brief introduction to use. Because my JS has long been in situ explosion 💥, it and vConsole, and did not help me anything.

4. Mac + IOS + SafariRecommended index: ★★★★☆

If you own a Mac and an iPhone, you’re the only thing that needs fixing. (Manual funny)

Step 1: Go to iPhone Settings > Safari > Advanced > Web Inspector

Step 2: Go to Safari on your Mac and choose Preferences > Advanced > Display the Development menu on the menu bar

Step 3: Connect your Mac to your iPhone with a cable and select the Trusted device. Then open the page you want to debug in Safari on your phone and click on the red box in the following image on your computer.

The fourth step: after clicking will appear as shown in the following picture, almost the same as the computer debugging interface, how to operate, I think you big guy also need not me more wordy! I am through this way to find js error, and successfully solve the problem, win the little sister recognized 😎.

5. Chrome + AndroidRecommended index: ★★★★★

Many of you may not be using a Mac or are not used to Safari’s developer tools, but that’s ok. Google has similar tools that are more appropriate for everyone. If you have a ladder, you can directly see the official Google document.

Step 1: Go to Android Phone Settings > Developer Options > USB Debug. Settings inside there is no developer option, baidu.

Step 2: Connect your computer and Android phone through the data cable, the following interface will pop up, click OK.

Step 3: Download a mobile version of Chrome to your Android phone (search the app stores) and open the page you need to debug in Chrome on your phone.

Step 4: Open Chrome on your computer and click in the order shown below. I am using MI 5, you can see MI 5 has been connected on the left. The underlined areas are the Chrome browser on the phone and the WebView of its own browser.

Step 5: There is a Inspect button on the right side of each page, click will appear you are familiar with the screen, behind the need not explain it! Follow your 🚀.

The guy from the company told me that he needed to climb a ladder to use this method, and those who could not climb up can follow me. I plan to write a blog about how to build a ladder by myself and give you a small plane.

conclusion

If you want to do a good job, you must do it first. Without good debugging tools or methods, debugging on the mobile terminal is a nightmare. But with these good methods, I think you good front end bosses, help girls to fix a small bug is so easy. If you have any good ideas or other solutions, please feel free to communicate in the comments section.