preface

It is the end of the year so soon. Looking back on 2021, I found nothing to do. I changed a city, changed a job, started a new company and started a new pit

Mobile terminal real machine debugging, summed up the following roughly two methods, or web page injection JS script, hijacking console, network request, such as: vConsole, ERuda and other debugging library. Or, using a packet capture tool to hijack browser and server requests, such as: Charles, here’s how I did it.

1.alertsolution

What to say, (⊙﹏⊙) recommend index 0 stars

2. Packet capture toolCharles,Fiddler

Usually only use a variety of networks, you need to set the phone’s wifi agent recommendation index of 2 stars

3,vConsole,erudaSuch as debug library

In this case, import vconsole.min.js and instantiate it. The instantiation code is best placed in the header so that the content can be hijacked in the first place:

<script src="./vconsole.min.js"></script>
  <script>
    / / initialization
    new VConsole();
  </script>
Copy the code

or

npm i vconsole
Copy the code

import VConsole from 'vconsole';

new VConsole();
Copy the code

Advantages: Convenient, you can view console, network, and Elements. Disadvantages: CSS debugging is not friendly, console hijacks the printing of consloe, cannot locate the printed code, and requires additional loading of JS scripts

Three stars are recommended

4,Chrome + Android

Enter chrome://inspect to connect your PC and Android phone with data cable, open the DEBUG mode of USB, and you can see your device in the above page:

Click to inspect

Then you can debug happily, just like you would debug on a PC using Google, except for ios, which doesn’t have 4 stars

5,Mac + IOS + Safari

Open the phone and go to Settings -> Safari -> Advanced

Open JavaScript and the Web inspector.

Open Safari on your phone and type in a web address www.baidu.com

Open Safari on a Mac and hit Development-iphone lh-www.baidu.com to see the following page

Note: App webView can also use this method, just ask the client to package a debug version

It is only available for ios, and requires a MAC, and has a disadvantage. When the debug window is not opened, webView network requests and console will not be recorded, and the debug window will be closed directly when the WebView is closed. Four stars is recommended

6, whistle

Android, ios can debug, cross-platform, proxy capture, H5 debugging, debugger, request hijacking, HTTPS support, WebSocket data capture, etc., very powerful. Weinre is written in Node and is installed using NPM:

npm install -g whistle
Copy the code

Run:

w2 start
Copy the code

Cross-platform, packet capture, DOM, Console, Network and other functions are very powerful. Review the documentation recommendation index for 5 stars

7, Mobile Debug

The functionality is very similar to Whistle, and I have serious reason to suspect that the developers of Mobile Debug built on whistle.

Mobile DebugOfficial website download address

After download and installation

Caught:

Web debugging:

Hijack online bugged files (such as JS) to be modified and debugged locally by configuring hijacking rules:

The mobile phone needs to be set up in the same LAN wifi proxy, can be used, HTTPS needs to add the installation of certificate steps.

Five stars is recommended

The last

3 and 7 are the main methods I use now, which completely solve the mobile debugging problem.

Water over a, I withdraw ~~~~~

Recommended reading:

TypeScript + Vite + Vue3 + Element Plus project initial initial shock, SourceMap is not working? Please lock your NPM dependent version