Remote Debugging and chromedebugging for mobile Web development and Debugging

Remote Debugging and chromedebugging for mobile Web development and Debugging

Before smartphones are deployed in a timely manner, alert is everywhere for mobile device debugging. This is probably the most common method. In the past, many times, to preview the effect of a page on a mobile device, you must first upload the page to the test server, enter the url in the device browser, or use a third-party QR code scanning application, you can use mobile device access to view the actual effect. You must repeat these operations every time you change the device. If there are too many pages, these complicated things are particularly annoying. With the rise of smart hardware and the popularization of mobile devices, the mobile Internet wave has made front-end engineers more professional and more front-end engineers have to do, in particular, the rise of many mobile phone manufacturers in China, large and small, and a wide range of mobile phone models, relying solely on Firebug and debug tools that come with Chrome/Safari is far from enough to meet their needs. Tedious and repetitive work takes a considerable amount of time. Fortunately, there are more and more front-end automation tools. More and more convenient debugging tools are nothing more than a good news for front-end engineers.

 

In recent years, browser vendors have also released their own RemoteDebugging tools. For example, Opera Mobile can use its cross-device cross-platform desktop developer tool Opera Dragonfly for remote debugging, iOS Safari allows you to enable the Web checker for remote debugging on Mac OS X. Android 4 + Chrome for Android can be used with ADB (Android Debug Bridge) for Remote Desktop debugging, the desktop version of Chrome 32 + supports remote debugging of mobile device pages/webviews without installing ADB. The domestic UC browser Developer Edition also released its own remote debugging tool RemoteInspector (RI ).

 

In addition to browser vendors, many remote debugging tools developed by third parties have emerged, such as Weinre and Adobe Edge Inspect CC that support full-platform debugging and MIHTool, a dedicated iOS tool developed by Chinese people.

 

This article mainly describes the Chrome RemoteDebugging method, and has encountered some pitfalls before. I have summarized some experiences and shared them as follows.

Chrome DevTools debugging mobile device Brower Page Tabs/WebViews

 

Android remote debugging currently supports debugging in all operating systems (Windows, Mac, Linux, and Chrome OS .).:

● Debug the website page

● Debug WebView In the android native App

● Display the screen images of Android devices to the development machine in real time.

● Interactive debugging between Android mobile devices and Development servers is achieved through port forwarding and virtual host mapping.

 

Debugging requirements:

● Development Environment Android desktop edition Chrome32 +

● A usb data cable connects the computer and mobile devices, and installs a USB driver of the corresponding model. Driver: http://developer.android.com/tools/extras/oem-usb.html

If software such as Baidu mobile assistant and 360 mobile assistant is installed on the computer, the USB driver can be automatically installed after the connection.

● For webpage debugging, Chrome forAndroid must be installed on mobile devices and the Android system must be Android 4.0 +

● For APP WebView debugging, the system must be Android 4.4 + and the Webview in the native application must be configured with the corresponding debugging declaration.

Note: remote debugging requires that the desktop Chrome browser version be higher than the Chrome version of Android mobile devices. It is best to use Chrome's Canary Special Edition Chrome Canary (Mac/Windows) or Chrome desktop development edition Chrome Dev channel release (Linux) if conditions permit ).

 

Step 1: Enable the USB debugging mode on the mobile device.Method:

● Android 3.2 +, open settings-Application-development, and select "USB debugging ".

● Android 4.0 ~ Android 4.1, open settings-developer options-and go to the USB debugging page.

● Android 4.2 +, open settings-about mobile phone-mobile phone configuration information-"version number" seven times in connection, and return to the upper layer to see the "Developer options" displayed, check the USB debugging page.

Step 2: connect the device with a USB data cableAfter the driver is connected successfully, you may see a dialog box on the device requesting to allow the computer to debug through usb

 

 

 

Select and click "OK ".

Step 3: Open the Chrome menu on your computer-more tools-check the device(Chromemenu> More tools> Inspect Devices), or directly enter chrome: // inspect or about: inspect in the address bar of the browser.

After DevTools is enabled, check the Discover USB devices

 

If the USB connection is successful, we can see the mobile device model and the running page on the device and the list of webviews that allow debugging. Find the target page for debugging, click inspect to open DevTools, Click reload to reload the current debugging page, click the focus tab to top the tab, close to close the current page. You can also enter the URL in the input box to open a new page.

 

Click inspect to open DevTools. You can select the DOM Element on the page, highlight the corresponding Element in the device, or use Inspect Element in DevTools to select the target Element, you can interact with the mobile device page in real time to locate the problem and debug the code.

 

Enter a new URL in the input box and click Opoen to open the new page you want to debug.

Note: DevTools may be different because of different Chrome versions. For example, my Chrome38.0.2125.104 m version does not open the url input box on the new page. After upgrading to v39, it will return to normal. If you know the reason, please leave a message.

1. In the DevTools window, use the F5 shortcut key (CMD + R for Mac) to reload the page.

2. Use the Network panel to observe the loading of resources on the page in the actual Network environment of the mobile phone in real time.

3. The Timeline panel can be used to analyze page rendering and CPU usage. Generally, mobile devices have lower performance than computers.

4. Write a script on the Console of DevTools to execute the script, and the page will be displayed in the mobile device check.

5. If you want to debug a local server program, you need to use port forwarding and virtual host ing so that the page content in your local environment can be displayed on the device.

 

WebView debugging must meet the requirements of Android 4.4 +. In addition, you need to configure the corresponding code in your APP and call the static method setWebContentsDebuggingEnabled in the WebView class, as shown below:

  if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {     WebView.setWebContentsDebuggingEnabled(true);  }

The preceding configuration method applies to all WebView scenarios in Android applications.

Whether Android WebView can be debugged does not depend on the debuggable variable of manifest in the application. To allow remote debugging of WebView only when debuggable is true, use the following code segment:

if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {    if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE))    { WebView.setWebContentsDebuggingEnabled(true);}  }

The available list of WebView is as follows:

The listed information includes the page title, url address, page size, and the relative position of the page relative to the device screen.

 

Live screencasting)

When debugging a mobile device, it is too inconvenient for the video line to switch back and forth between the screens of the two devices. screencast synchronizes the screen of the mobile device and DevTools of the development environment, you can use screencast to perform interactive operations on the content on mobile devices.

 

Screencast only displays the content of the page, but does not display the toolbar address bar, device keyboard, and other device interfaces. These are displayed as transparent parts in Screencase.

 

Android 4.4 is a mobile phone operating system developed and developed by Google, codenamed KitKat. the name of the new Android version was announced in the early morning of January 1, September 4, 2013, Beijing time, android 4.4 (codenamed KitKat Qiqiao ). It is reported that the Code is from Nestle's KitKat chocolate. For KitKat 4.4.3, screencast can be implemented not only on the Tab page, but also on the WebView.

 

Click the Screencast icon in the upper-right corner of DevTools to enable the Screencast view. The screen of a mobile device is displayed in the Screencast panel on the left.

The DevTools version of Chrome32 + supports native USB debugging for connected devices. For lower version numbers, you must install ADB or ADB plugin to debug Chrome pages on mobile devices. Because I have been using ADB plugin for debugging before, I have found that the high version is more convenient and practical. Due to the scattered information on the Internet, the key things are not mentioned, and there are many pitfalls, this is the reason for writing this article.

 

Once we installed the Android SDK, we had to execute commands like adb forward tcp: 9001 localabstract: chrome_devtools_remote to start debugging. Now we can get rid of these tedious commands.

The development machine installs ADB plugin After Chrome 28 +, which is different from the previous Android SDK package, and Chrome for Android 28 + must be installed on mobile devices. After the ADB extension is successfully installed, a gray Android startup icon appears next to the Chrome menu.

Click the Android icon and then click ADB. Once ADB has started, the menu icon turns green and displays the number of devices currently connected, if any.

Click View inspection Targets. The List displays the devices connected to each connection and their tab pages. Find the page to debug and click inspect next to the URL to start the DevTools debugging window.

 

It is particularly important to use DevTools: If you click inspect to open a blank DevTools window and the refresh is ineffective, it is very likely that it is caused by the wall, you can try to ping appspot.com.(Both goagent and redapricot are good. Add appspot.com to the whitelist.) Of course, you still need a google account.

 

Additional instructions,If no connected device is displayed after the USB cable is connected, perform the following steps:

● Check whether your device is connected to USB and the USB data cable.

● Ensure that the command column of the device ADB is available. If not, check whether USB debugging is enabled on your device.

● In Windows, check whether your USB driver is correctly installed. Reference http://developer.android.com/tools/extras/oem-usb.html

● Open Chrome in the desktop chrome browser: // inspect to check whether Discover USB devices is selected

● Make sure that the desktop browser version is higher than the Chrome version of mobile devices

● If the Chrome for Android version is low, check the Chrome browser settings on the mobile device to ensure that USB debugging is enabled. This setting is not required in later versions.

● If the display is still unavailable, try to re-unplug the USB data cable.

 

 

Port forwarding)

 

Your mobile phone and development machine are sometimes in two different networks (for example, local servers and online servers in two different network environments), and the page content of the development environment may not be obtained on your mobile phone. Besides, sometimes your development environment is in the network under the company's security control restrictions.

 

Port forwarding in Chrome For Android solves this problem and testing your website on your mobile phone instantly becomes easy. The working principle is to create a listening TCP port on the mobile device, which is mapped to the specific TCP port of the development machine. The two ports communicate through the USB cable, therefore, this connection does not depend on the configuration of the network environment.

 

Before entering the topic, you must explain in advance the points that need to be paid attention to when setting up a local server. Install the local server. Here the wamp integration package is installed. After one-click installation, You need to modify some Apache settings.

1. Open the configuration file httpd. conf in the Apache installation directory and add multiple listening ports.

# Listen: Allows you to bindApache to specific IP addresses and/or# ports, instead of the default. See also the <VirtualHost># directive.## Change this to Listen on specific IP addresses as shown below to# prevent Apache from glomming onto all bound IP addresses.##Listen 12.34.56.78:80Listen 80Listen 8888Listen 8999Listen 1818

 

After the Apache service is enabled, run the netstat-n-a command to check whether the configured port is enabled.

If you have enabled the IIS service in your local environment, you can modify the default port of Apache as described above to avoid conflict between the two. After modifying the settings, do not forget to restart the Apache service.

How to change the IIS port: If you keep Apache and IIS services running at the same time and do not want to change the default port 80 of Apache, you can only change the IIS port as follows: Start-> Run-> enter: inetmgr-> Internet Information Service-> Local Computer-> website-> right-click "default website"-> properties-> select "website" tag-> modify TCP port. Finally, restart the IIS service.

 

2. Enable the virtual host configuration in the httpd. conf file.

# Virtual hosts#Includeconf/extra/httpd-vhosts.conf

Remove the # sign in front of the second line to allow the extension configuration to be loaded.

 

1. the default path of the Apache server is htdocs under the installation directory. To change the default directory, you can modify httpd. modify the DocumentRoot and Directory in the conf file to the Directory you specified.

## DocumentRoot: The directoryout of which you will serve your# documents. By default, allrequests are taken from this directory, but# symbolic links and aliasesmay be used to point to other locations.#DocumentRoot "E:/wamp/www/" ## This should be changed towhatever you set DocumentRoot to.#<Directory "E:/wamp/www/">

Open the httpd-vhosts.conf profile under the extra directory and set the virtual host directory for the listening ports at the end of the file

## Use name-based virtual hosting.#NameVirtualHost *:80 ## VirtualHost example:# Almost any Apache directive may go into a VirtualHostcontainer.# The first VirtualHost section is used for all requests that donot# match a ServerName or ServerAlias in any <VirtualHost>block.#<VirtualHost *:80>    ServerAdminwebmaster@dummy-host.example.com    DocumentRoot "E:/wamp/www /dummy-host.example.com"    ServerName dummy-host.example.com    ServerAliaswww.dummy-host.example.com    ErrorLog"logs/dummy-host.example.com-error.log"    CustomLog"logs/dummy-host.example.com-access.log" common</VirtualHost> <VirtualHost *:80>    ServerAdminwebmaster@dummy-host2.example.com    DocumentRoot"E:/wamp/www"    ServerName localhost    ErrorLog"logs/dummy-host2.example.com-error.log"    CustomLog"logs/dummy-host2.example.com-access.log" common</VirtualHost> <VirtualHost *:8888>    ServerAdminprograms@dummy-host2.example.com    DocumentRoot"E:/wamp/www/programs"    ServerName localhost    ErrorLog"logs/programs-host2.example.com-error.log"    CustomLog"logs/programs-host2.example.com-access.log" common</VirtualHost> <VirtualHost *:8999>    ServerAdminprograms@dummy-host2.example.com    DocumentRoot"E:/wamp/www/site"    ServerName localhost    ErrorLog"logs/programs-host2.example.com-error.log"    CustomLog"logs/programs-host2.example.com-access.log" common</VirtualHost> <VirtualHost *:1818>    ServerAdmin webapp@dummy-host2.example.com    DocumentRoot"E:/wamp/www/webapp"    ServerName a.test.com    ErrorLog"logs/webapp-host2.example.com-error.log"    CustomLog"logs/webapp-host2.example.com-access.log" common</VirtualHost>

To take effect of a.test.com, you must add the ing relationship 127.0.0.1 a.test.com to the local host file.

Then let's test it. Enter the host name and port number you configured in the browser, and the url points to the file you want to open.

If the above prompt appears, check whether your VM directory is correct. If the directory is set correctly, the page is displayed.

 

In general, the default directory access permission is:

## First, we configure the"default" to be a very restrictive set of# features. #<Directory />    Options FollowSymLinks    AllowOverride All    Order deny,allow    Deny from all</Directory>

Many people directly set

## First, we configure the"default" to be a very restrictive set of# features. #<Directory />    Options FollowSymLinks    AllowOverride All    Order allow ,deny    Allow from all</Directory>

For security reasons, depending on the debugging personnel and actual needs, I personally prefer to set different permissions for a specific directory, for example:

## First, we configure the"default" to be a very restrictive set of# features. #<Directory />    Options FollowSymLinks    AllowOverride All    Order deny,allow    Deny from all</Directory> <Directory "E:/wamp/www/webapp">    Options FollowSymLinks    AllowOverride All    Order deny,allow    Deny from all    Allow from 192.8</Directory> <Directory "E:/wamp/www/programs">    Options -Indexes FollowSymLinks    AllowOverride All    Order deny,allow    Deny from all    Allow from 192.8.102. 192.8.104. 192.8.22.</Directory>

After the configuration is complete, restart the Apache service to take effect.

Security is safe, but there is a problem. when accessing the page under localhost, this situation occurs:

In fact, we can add Allow from127.0.0.1: 1 localhost to solve this problem. As follows:

<Directory "E:/wamp/www/programs">    Options -Indexes FollowSymLinks    AllowOverride All    Order deny,allow    Deny from all    Allow from 192.8.102. 192.8.104. 192.8.22.    Allow from 127.0.0.1 ::1 localhost</Directory>

Restart and try again. The page is displayed normally. For example:

Now the local server has been set up, and several listening ports have been enabled. Go to the topic and talk about port forwarding.

To use the Port forwarding function, the following conditions must be met:

1. Open Chrome in the chrome browser of the development machine: // inspect

2. Click PortForwarding to bring up the setting window.

 

3. In the device port input box, enter the port number that the mobile device wants to listen to (8080 by default)

4. Enter the domain on the Host and enter the current IP address (or Host name, for example, localhost) of the web application running with the port number. The IP address can be any local address that the development machine can access. Currently, the port number range must be 1024 ~ Between 65535 (inclusive)

5. Select Enableport forwarding.

6. Click Done.

When the port number in the chrome: // inspect window is flashing green, it indicates that the port forwarding configuration has taken effect. Now you can open the local page on the mobile device for debugging.

The port forwarding function is limited before Chrome29. If you have any problems, please ensure that your Chrome version is upgraded to 29 or above before use. In Chrome31 +, port forwarding is not a test function, but a function officially released.

 

We have already set up a local server environment. Connect to the USB cable, open chrome: // inspect/# devices, and set the port forwarding parameters of the corresponding DevTools according to the listener port set by Apache, such:

 

 

After configuring port forwarding, You can debug the page in the local environment.

Enter the url to open the local page.

For example

Http: // localhost: 1818/taskmarket/index.html

Http: // localhost: 8888/christmas/index.html

 

As shown in:

 

Virtual Host apping)

 

When you Debug on the localhost domain name (or the IP address of your local development machine), port forwarding is excellent. However, if you want to use a custom local domain name for debugging, it will not work.

If you are using a JavaScriptSDK that can only run under a domain name in a specific whitelist, you have set a correspondence relationship such as 127.0.0.1 xxx.com in the host file. Maybe you have configured personalized domain names on Web servers (MAMP, wamp, xampp, etc.) with virtual hosts.

 

If you want a mobile device to display the page content under a specific domain name, you need to use the above port forwarding technology and proxy server technology. The proxy server can map requests on mobile devices to the correct locations of hosts.

 

Build proxy

 

Currently, there are many tools for building Proxy servers, such as Charles Proxy on Mac, Fiddler in Windows, Squid cache in Linux, and Squid as an open-source Proxy service software, it can also be used as a Web Cache Server to achieve high-speed Web access requirements. The agent server is installed on the host. All requests from Android mobile devices are forwarded to the agent server.

 

The proxy service construction method is not detailed here. If you are interested, refer to my article or search for it yourself.

 

To configure a port forwarding proxy, follow these steps:

1. Install the agent service software and build a proxy server on the host.

2. Enable the proxy service and make sure that the port running on the proxy server is different from the port set by Chrome port forwarding.

3. Open "check device" in Chrome browser chrome: // inspect

4. Click Port forwarding to bring up the setting window.

5. Fill in the port to be listened to by the Android device, for example, 9000.

6. For the Host IP address, enter localhost: xxxx, for example, localhost: 9000, or enter the local domain name a.test.com: 1818 that I configured above.

7. Check Enableport forwarding.

8. Click the Done button to complete parameter configuration.

 

Mobile device proxy service parameter settings:

1. Enable settings-WLAN (Settings> Wi-Fi)

2. Long-pressed wireless network currently connected (proxy service settings apply to each wireless network)

3. Click modify Network (Modify network)

4. Select advanced options (Advanced options). The following settings are displayed:

 

5. Click "proxy "(Proxy) Select "Manual" from the menu "(Manual)

6. In the "proxy server host name "(Proxyhostname) Enter localhost or 127.0.0.1.

7. On the "proxy server port "(Proxy portEnter the port number, for example, 9000.

8. Click Save ).

With the above parameter settings, all requests on mobile devices are forwarded to the proxy server of the host. The proxy server sends requests on behalf of Android mobile devices, the request sent to a specific domain name is properly resolved. Now you can debug the page under a specific domain name.

 

Note: In order not to affect the normal internet browsing of mobile devices, you must restore the proxy settings after disconnecting the USB data cable.

Fiddler uses port 8888 by default, and my local server occupies port 8888. Therefore, set the listening port to unused port 10000 in the Fiddler-Tools menu,

After setting the parameters for the mobile agent, enable ChromeDevTools for debugging. Click inspect to view the page displayed in the mobile browser. Start debugging now.

My test page is http://a.test.com: 1818/taskmarket/index.html

Debug the DevTools instance as follows:

 

Real-time in Mobile Chrome for Android is as follows:

 

Note that the host must be in the same LAN as the mobile device.

If you have any questions, you can leave a message or view other related articles on my blog. Chrome remote debugging is now available. The mobile client debugging is not over yet. In the next section, I will introduce the Weinre remote debugging techniques and detailed tutorials.

 

Article: Remote Debugging on Androidwith Chrome https://developer.chrome.com/devtools/docs/remote-debugging