Date: 2019-08-16 17:00:00 Tags: -JavaScript categories

Debugging is an integral part of web development. PC debugging can be done through the Debugger and console. If you are interested in console, refer to Console for Chrome debugging tips

However, if our Web pages need to be mobile-compatible, debugging becomes less easy. In this article, I’ll introduce several third-party tools to help you debug the mobile Web.

There are many mobile debugging tools, and the following are popular in the current market. Tools have different features and are suitable for different scenarios. You can choose them according to your own needs.

The name of the Compatible mobile browser The debug environment Whether to modify the source code The hardware advantages disadvantages
Mac+Ios+Safari safari MAC browser no Cable + iphone/ipod, MAC You don’t have to change the code Poor compatibility, need data line
Chrome+Android The android browser PC chrome no Data line + Android phone/tablet + any computer You don’t have to change the code You need cables. You need to climb the wall
weinre all PC Chrome/Safari is Any mobile device No data line, easy debugging You need to change your code
vConsole all Current web page on mobile terminal is Any mobile device No other equipment, easy to debug Need to modify the code, will change the mobile page style, may cause conflicts, poor performance
Eruda all Current web page on mobile terminal is Any mobile device No other equipment, easy to debug The need to modify the code will change the mobile page style, which may cause conflicts

1.Mac+Ios+Safari Chrome+Android

Mac+Ios+Safari

If you have a MAC and an iPhone or iPad, you can connect the computer to the mobile phone via a cable and then debug a web page that opens in the iPhone’s Safari browser on the MAC.

This method applies when the following points are met

  • Senior (You Qian) developer with MAC and iPhone/iPad
  • The page only needs to work in Safari, not wechat or Android

Here’s how to use it

The first step is to open the developer mode of the iPhone. The process is as follows: [Settings] -> [Safari] -> [Advanced] -> Open the Web Inspector, as shown in Figure 1.1

Step 2: Open Safari developer mode on Mac. The process is [Safari] -> [Preferences] -> [Advanced] -> [Show “Development” menu in the menu bar] check

Connect iPhone and MAC with data cable, follow the process in Safari of computer: [development] -> [phone name] -> [website being debugged]

Finally, you can debug ios pages in the same way you debug PC pages

2.Chrome+Android

  • Android 4.0 or above, mobile Chrome browser
  • Chrome on PC

Method of use

1. Connect the mobile segment with PC using USB;

2. In the move section, select “Developer options “->”USB Debug”;

3. Open Chrome on the PC and enter Chrome ://inspect in the address box to select Discover USB Devices. You can see our mobile device, as shown below

  • Advantages: Can debug JS
  • Cons: Chrome only

3.weinre

API reference: people.apache.org/~pmuellr/we…

Vein as principle

  • Debug Client: A local WebInspector that remotely debugs the client.
  • Debug Server (Agent) : a local HTTPServer that communicates with the Debug client for the Debug target page.
  • Debug Target page: The page being debugged that has embedded weinre’s remote JS.

HTTP communication between the client, the target page, and the Debug server is performed using XMLHttpRequest (XHR). Your typical use scenario is to set up the Debug client and server on the desktop development environment, and the target page on the mobile device. The Weinre debug client is developed based on Web Inspector, which is compatible with WebKit core browsers. Therefore, you can only open the Weinre client in Chrome or Safari for debugging.

Weinre Usage

Embed the script in the head of the page to be tested

<script src="http://myIp:port/target/target-script-min.js#anonymous" type="text/javascript"></script>
Copy the code

Or install Weinre through NPM

// Global install command
sudo npm instal -g weinre
Copy the code

Next, type on the command line

weinre --boundHost [hostname | ip address |-all-] --httpPort [port] / / start vein as
Copy the code
  • BoundHost is the device that can access the Weinre server. The default is localhost. We can set it to all to ensure that weinre can be used on both mobile devices and local environments.
  • The httpPort must be idle. The default port is 8080. If 8080 is used, manually set it to another port
  • Ensure that the device where the debugging page resides resides in the same network segment as the current development environment (including the Debug client and Debug server)

Finally, use chrome or Safari to open the IP and port you set when you started Weinre, such as the startup command I used

weinre --boundHost 10.131.91. --httpPort 8889
Copy the code

The page I open in the browser is http://10.13.1.91:8889/

If your Weinre is successfully launched, the home page should look like this

Click the debug client user interface link. In the Targets directory, you can view all the pages monitored by weinRE

  • The ID on the URL corresponds to the ID added after script # embedded in the page
  • TAB is used in the same way as Chrome
  • Do not break the screen on the mobile terminal during debugging; otherwise, the connection will be lost

4.vConsole Eruda

VConsole and Eruda are presented together because they are similar in usage and functionality.

eruda

Website github.com/liriliri/er…

Method of use

First install erUDA with NPM

npm install eruda --save
Copy the code

Then add the following code to the page’s head

<! -- Import eruda configuration file from directory -->
<script src="node_modules/eruda/eruda.min.js"></script>
<! -- Or import directly through CDN without installation -->
<script src="//cdn.jsdelivr.net/npm/eruda"></script>

<script>eruda.init();</script>
Copy the code

Finally, the erUDA logo will appear in the lower right corner of the page after execution. Tapping the logo will pop up a debugging box at the bottom of the current page

vConsole

VConsole is a mobile debugging tool developed by Tencent official website: github.com/Tencent/vCo…

Method of use

Embed the following code in head

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
</script>
Copy the code

Results the following

Click on vConsole to bring up the debug box

Advantages and disadvantages of ErUDA and vConsole

  • Advantages: no need for other hardware, only need to have a mobile terminal, you can carry out page debugging. Debugging can be performed in any browser, so it can be used to resolve compatibility bugs.
  • Disadvantages: The use of the debugging tool depends on the normal loading of the page. If the page cannot be opened, the button will not appear. The debugging box occupies most of the page, resulting in low debugging efficiency. For example, there is a classic problem in ios system, which is the out-of-focus problem caused by the page shift after the input box pops up. When debugging with Eruda or vConsole, clicking the button is equivalent to moving the page, and the problem no longer exists.

Summary of Mobile Web debugging:

With the popularity of mobile Web development, debugging of mobile Web pages becomes more important. The previous article summarized several popular mobile debugging tools, but they all have various problems. At this stage, students can go back to the table at the beginning of the article and choose a tool according to their own needs when they encounter problems related to mobile debugging.