This year, I joined a live broadcasting company, mainly responsible for the development of webView pages embedded in APP. I had little experience in mobile compatibility before, and the biggest problem for me was webpage compatibility.

After the development and debugging of the Emulator of Chrome browser has completed the requirements perfectly, there will be various bugs caused by compatibility as soon as it is accepted or launched. There are special twists and turns to solve, which not only need to explore the different debugging modes of Android and iOS phones, but also support debugging in different browsers or apps. Greatly affected the efficiency of development.

Although we can also use simulators for development and debugging, simulation is still simulation, in some scenarios, the real machine is still necessary, especially for the specific model version of the problem.

In general, how to do real Web debugging?

A, vConsole

NPM address: github.com/Tencent/vCo…

Introduction: vConsole plug-in is a mobile terminal lightweight extensible tool, its function and computer terminal console is basically the same, can run JS code, view cookies, packet capture and so on

Use: Add the following code to head

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
   / / initialization
   var vConsole = new VConsole();
   console.log("hello vconsole");
</script>
Copy the code

If you want to install via NPM or use TypeScript, check out the repository!

Debug:

Panel:

When a page is opened, a green “vConsole” button appears at the bottom of the page. Click the button to open the console. Enter the JS code in the “Log” page to execute the script. The System page displays information about the protocol header user-Agent and System information network status. The Storage page displays information about cookies

Second, the Eruda

NPM address: github.com/liriliri/er…

Eruda is a debug panel designed for the front-end mobile end. It is similar to a mini version of Chrome DevTools (not as powerful as Chrome for sure). The main features include: Capture console logs, check element state, display performance metrics, capture XHR requests, display local storage and Cookie information, browser feature detection, and more.

Use: Add the following code to head

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
Copy the code

The use of Eruda and panels are similar to vConsole, more details can be found in the official warehouse!

Third, Fildder

Download it at www.telerik.com/fiddler

Fiddler is one of the most powerful and useful Web debugging tools. It can log all HTTP and HTTPS requests from clients and servers, allowing you to monitor, set breakpoints, and even modify input and output data. Fiddler is a very useful tool for developers and testers

Use:1. Download, install, and configure Fillder

2. Dder and fildder link to the same network, then mobile phone start manual agent and install the certificate

A. Configure the manual proxy

B. Download certificate mobile browser address Enter proxy host name and port (10.0,5.155::8888)

C. Install the certificate

After the above steps are completed, the H5 page is opened. If the page resource can be caught on Fildder, the packet is captured successfully

3, and then online or the test environment has problems with the relevant files or pages to the local debugging proxy

AutoResponder can not only proxy file, but also proxy interface return, etc. After the successful proxy can be in the local file debugger breakpoint step by step debugging, find out the online real machine problems

If this article is biased, please leave a comment and correct it. If you think this article is useful to you, please give a thumbs-up

About the author: GitHub Jane Book Nuggets