One, foreword
In the development of a mobile terminal, is commonly used in PC phone simulator debugging, no problem, we will further in the mobile terminal to carry on the real machine debugging, once the problems of the real machine test, and no visual interface, PC is not convenient to check the console if there is an error, and then make timely adjustment.
This article will give the author after the practice of mobile debugging methods, there is always a suitable for you ~, from simulation debugging to remote debugging, from familiar to unfamiliar.
Second, mobile terminal debugging method
1. Chrome simulates mobile debugging
1.1 How to Use it?
Step 1: Open the web page you want to debug in your browser. Here is the demo directly using the Nuggets website, this is hard wide, ha ha ha.
Step 2: Right click on a blank space on the page and right click Check on the menu. In my case, I usually just press F12, you can use shortcut keys, of course you can use shortcut keys.
Step 3: After opening Chrome Developer Tools, click on the phone icon in the upper left corner. If you don’t want to click it manually, it’s ok. Use the shortcut key “Ctrl + Shift + M”. If you ask me how I know, please like Chrome to see the picture.
Step 4: After clicking, you will use the mobile phone simulator to display the page, but the interface displayed by the nuggets looks like a mobile phone interface. Notice the contents of the frame column below.
Once clicked, the page is displayed in the mobile browser, but now the page is still displayed in the PC.
Step 5: Just to be on the safe side, I’ll use the shortcut “F5” to refresh the page. At first I thought there would be some adjustments after the refresh, and it looked like the Nuggets were adapting. “Tips: Switch to the mobile emulator, better to refresh the page”
Step 6: You can choose to switch devices, adjust the size of the phone, zoom ratio, limit network traffic and CPU usage
1.2 When to use?
It is recommended to use Chrome simulation in the daily mobile development process, because it is easy to use and fast (computer performance and network speed is much better than mobile), and developers can quickly achieve the function and layout. However, in some cases, if you use Chrome to simulate mobile phone debugging, for example, if the live broadcast player is loaded with M3U8, Chrome to simulate mobile phone debugging still cannot play the video, you need to use the real phone debugging.
1.3 special Tips
① Switch to the mobile emulator, it’s better to refresh the page
② Use Chrome simulation mobile phone debugging, error occurs, you can use the real machine to debug, may not support Chrome simulation mobile phone situation
2, Chrome real machine debugging
2.1 What can be done?
Simulation development is great, but the mobile version of the web that we simulate on Chrome will always run into some problems when it runs on the real machine, so we’ll have to use the real machine for debugging. I suggest that if you run into a problem with your android phone (no matter what browser you use), you should first take a look at Chrome. If you run into the same problem with chrome on your phone, it is very easy to debug using Chrome and should be the first choice.
2.2 How to Use it?
Knock on the chalkboard – Prerequisite: The first time you use it, you have to surf the science web, you know
You’ll need: an Android phone, a computer “Windows,” and an Android USB cable.
Step 1: You can install Chrome browser on your Android phone, of course, the browser of your phone is also ok, but for example, when I debug the browser of my Redmi phone, I find that there seems to be no effect after clicking the button. Simply speaking, Chrome browser is not smooth
Step 2: Need to open the phone’s developer mode, general android phones are the following path mode, open the developers Settings – > about phone – > version number by 5 times, after the set menu will be one more option, the developers into one “USB debugging” to open the can, but I use red rice cell phone would be a little different, we are not the same. How does Xiaomi /MIUI enter developer option mode and open USB debug
Step 3: Connect the mobile phone and computer through USB cable, pop up the dialog box “Whether to allow USB debugging”, select OK
Step 4: Open Chrome on the mobile phone, and enter the page to be debugged, here can be discussed by situation, view as needed.
Scenario 1: Debug on the same LAN without Posting online
Prerequisite: The mobile phone used for the test project is on the same LAN as the computer on which the project is written
① Get the COMPUTER IP address, shortcut key “win + R”, enter CMD, open the command line window, enter ipconfig, get the COMPUTER IP address: 192.168.2.43
(2) Start the Server locally. I use VSCode Live Server plug-in to start the local Server. The default port number is 5500
Change the url to http://+, your OWN IP address :5500, open the Chrome browser on the computer, and see whether the page appears. For example, the url of my local project is: http://127.0.0.1:5500/live/flashdemo.html, the debug url in the mobile end, needs to change to http://192.168.2.43:5500/live/flashdemo.html
③ Scan code, Chrome browser debugging, I think in mobile debugging, it is best to scan code, and then open in the browser, so that the user experience feels better, pseudo product manager’s feeling, ha ha ha.
Scenario 2: Upload code to the server for debugging, with links to specific web pages
In this scenario, I feel it is not as convenient as the previous scenario, because it is possible to modify the code locally. Based on scenario 2, I have to re-upload the code, which seems very troublesome. But I can show you how it works.
(1) after upload code to the server, there is an online link, such as demo.polyv.net/oujiale/dem…
② Scan code, debug on Chrome browser
Step 5: Open chrome TAB and type chrome://inspect/ to go to the debug page. At this point, we found that Chrome detected our phone, with our phone Chrome running on the web
A brief introduction to some features:
- Enter the URL you want your phone to open, then click Open, and the current page displayed on your phone will change
- Inspect starts debugging the current page, opens the debug panel (important)
- Focus TAB tells the phone to display the current connection
- Reload means reloading the page, which means refreshing
- Close: closes the page displayed on the current mobile phone
Step 6: Click Inspect to bring up the Chrome debug tool, and you can happily debug chrome on your computer
2.3 When to use?
① Encountered a problem in Chrome emulation mobile phone debugging, switch to the real phone debugging
② Check the function and layout of the project with the real machine before publishing it to the server that can be accessed by the external network
2.4 special Tips
① When you first use it, you have to surf the science web, you know
Remember to enable developer mode on your phone
③ If after step 6, click inspect, the panel that pops up is blank, this is because, when using the change function for the first time, it must be able to connect to the Internet (can turn over a wall). If the debugger panel is successfully displayed after initialization, it will not be used again. Let’s go back to tip 1
④ Click inspect button page blank, load not successful processing method, this I did not practice whether feasible, but encountered can try
3. Debugging of wechat developer tools
3.1 What can be done?
As a heavyweight application of mobile Internet, many wechat developers need to develop Web applications in wechat. At this point, debugging becomes a painful thing, fortunately, wechat team provides wechat debugging tools, which can be convenient for us to debug the pages accessed in wechat.
3.2 How to Use it?
Step 1: Download the wechat developer tool and install it. Wechat developer tools download address
Step 2: Here you can discuss the situation and view it as needed.
Scenario 1: Simulate debugging using URLS
This approach is simpler, but has limitations
① Select the development mode for the public account web page debugging
② In the address bar, enter a url, such as juejin. Im /timeline.
Another situation is that the wechat developer tool prompts “unbound web developers”, and the wechat open community replies that the developer tool is for security reasons. If the web page requires oAUth authorization, the user who logs in to the developer tool is the developer of the web page.
Scenario 2: USB remote debugging, Chrome browser or mobile phone built-in browser to open the web page
In the case of “unbound web developer”, you can use USB remote debugging, similar to Chrome real machine debugging, so omit some steps screenshot
① You can install Chrome on your Android phone, as well as your own browser
② You need to turn on the developer mode of the phone
③ Connect the mobile phone and computer through USB cable, the dialog box “Whether to allow USB debugging” pops up, select OK
4. Open Chrome on the mobile phone and go to the page for debugging
⑤ Press the arrow in the following figure to open the remote debugging tool from top to bottom, and you will find your phone name displayed on Devices
Click inspect, the debug tool pops up, and you can start your debugging journey. It looks like remote debugging of Chrome browser
Scenario 3: USB remote debugging. Open a webpage on wechat, and you can see the official document of wechat Developer Tools, which contains more detailed operation steps. Here are also the operations of mobile terminal debugging in the document
① Install wechat Web developer tools 0.5.0 or later
② Check whether the mobile device supports remote debugging
Open the wechat Web Developer tool, select “Mobile Debugging” TAB, and click to verify whether the mobile device supports it. Then use your mobile device to scan the QR code that pops up and get support information on your device.
③ Turn on the USB debugging function in the mobile device. For specific operations, you can use the search engine to find the mobile developer option
(4) Install USB driver for mobile device. I don’t know whether it needs to be installed or not. I don’t think I have installed it before, but I use it directly
⑤ Open inspector for X5 Blink kernel
Directly open the website debugx5.qq.com on wechat of mobile phone
As shown below, check “Whether to open the TBS kernel Inspector debugging function” and restart wechat.
⑥ Press the arrow in the following figure to open the remote debugging tool from top to bottom. You will find your phone name displayed on Devices
3.3 special Tips
① To learn more, you can see the official documentation of the wechat debugging tool
② In the case of “unbound web developer”, you can use USB remote debugging
③ To debug web pages on wechat, you need to open the website debugx5.qq.com on wechat and open the TBS kernel Inspector debugging function
4. Debug uc browser
4.1 What can be done?
What if all the above mentioned browsers have been debugged correctly, but only the UC browser has debugging problems? Don’t worry, our UC also has debugging methods. You can use a separate UC developer tool for debugging. However, according to my actual use, it is not particularly easy to use, but UC developer tool is also a conscience, we only encounter problems in UC, recommend to use.
4.2 How to Use it?
You’ll need: an Android phone, a Windows PC.
I’m not going to go into details here, but you can go to Chat series to talk about mobile debugging and search for “4 UC Browser.”
At present, I have not encountered any problems with UC browser debugging. When encountered, I will come back to supplement.
5, vConsole debugging “is in the mobile side debugging, not in the PC side debugging”
5.1 What can BE Done?
Tencent produced the Web debugging panel, I believe that many front-end partners have used. VConsole adds a little floating button to your web page that you can click to open and close the debug panel and view DOM, Console, Network, local storage, etc. It can basically meet the needs of common front-end development.
5.2 How to Use it?
Step 1: Install through NPM or directly import the js file of online CDN on the required page
npm install vconsole
Copy the codeStep 2: Initialize VConsole with new VConsole()
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
Copy the codeStep 3: Debug on your phone’s Chrome browser
6, Weinre “no NEED for USB debugging, but need the same LAN”
6.1 What can I Do?
Weinre is a very good web inspection tool, you can start a local Weinre service, and to mobile web embedded with a section of JAVASCRIPT to achieve communication with the computer, has achieved similar browser development tool debugging effect, its interface is similar to vConsole. This includes viewing DOM, Console, Network, etc., but it’s all done on a computer, not a phone.
It can debug all browsers. Its principle is to add a section of JS to the page to debug, and then by this section of JS, support computer and mobile phone debugging and call. Since Weinre is based on js injection, wechat and other built-in browsers can also use Weinre for debugging.
6.2 How do I Use it?
Step 1: Install Weinre
// NPM install -g weinre // NPM install weinreCopy the code
Step 2: enable the weinre service and bind the weinre service to localhost. The port number of port 8090 can be changed, but do not use port 80 because 8888,8080 and other software occupy the port
Weinew startup parameters:
- HttpPort: Sets the port number used by Wninre. The default is 8080
- Ip boundHost: [hostname | | – all -] : default is’ localhost ‘.
- The debug (true | false) : this option is similar to “verbose, the output will be more information. The default is false.
- ReadTimeout [seconds] : specifies the timeout period for the Server to send information to Target or Client. The default value is 5s.
- DeathTimeout [seconds] : The default readTimeout is 3 times. If the page does not respond after this time, the connection will be disconnected.
weinre --httpPort 8090 --boundHost -all-
Copy the codeRun the above line to enable port 8090
Step 3: Open http://localhost:8090/ as prompted and find that the service is already started
Step 4: Click debug client user interface to enter the debugging page. The targets field is empty.
Step 5: We need to import the generated JS in the page we are debugging. Note: replace localhost with your computer’s IP address
<! DOCTYPE html> <html> <head> <meta charset="utf-8" />
</head>
<body>
<script src="http://192.168.2.43:8090/target/target-script-min.js#anonymous"></script> <h1> Page to be debugged </h1> </body> </ HTML >Copy the codeStep 6: start a Server locally, either VSCode’s Live Server plug-in or http-server. After startup, visit the web page to be debugged on the mobile terminal, and then you will find that records are added under targets.
Step 6: Tap Elements to debug. You can view console information and modify styles. This will work on the phone, but the limitation is that you cannot debug breakpoints
6.3 special Tips
① Weinre cannot debug breakpoints, which is a limitation
② After debugging, don’t forget to delete the embedded script
To explore the link
- Mobile debugging pain point? Five front-end development tools for you
- 9102, you still don’t know mobile real machine debugging? Mobile debugging is difficult
- [Talk about series] Talk about mobile debugging
- Summary of mobile debugging methods
- Mobile Debugging Artifact (ERUDA)
- Every day a little website optimization: Web page mobile debugging
- Front-end real machine debugging of various positions
- Remotely debug Android device web pages
- Mobile web front-end debugging page several ways
- How do I test a Web mobile project on my phone