When the smartphone is not yet popular, mobile device debugging everywhere is alert, which is the most commonly used method. A lot of times in order to preview the effect of the page on the mobile device, you need to upload the page to the test server, and then enter the URL into the device browser, or use a third-party QR code to scan the code application, through the mobile device access to open the actual effect, each change device to repeat these operations, These tedious things are especially annoying when you have more pages. The wave of mobile internet, along with the rise of intelligent hardware and the popularization of mobile devices, so that the front-end engineer This career become more professional, front-end engineers to do more and more, especially the rise of large and small domestic handset manufacturers, mobile phone models of a wide range, relying solely on Firebug and chrome/ The debug tool that comes with Safari is far from enough to meet your needs. Tedious repetitive labor takes a considerable amount of time, and fortunately there are more and more automation tools in the front end. More and more convenient debugging tools are nothing more than a great boon for front-end engineers.
In recent years, browser vendors have launched their own remote debugging (remotedebugging) tools, such as opera Mobile can use the cross-device cross-platform desktop developer Tool Opera Dragonfly for remote debugging, IOS Safari You can turn on Web inspector for remote debugging in MAC OS x systems. Android 4+ on the system of chrome for Android can be used in conjunction with ADB (Android debug Bridge) for desktop remote debugging, desktop Chrome 32+ has supported the free installation of ADB can be implemented remotely debugging mobile device page/webview. The domestic UC Browser developer version has also launched its own remote debugging tool, Remoteinspector (RI).
In addition to browser vendors, there are many third-party development of remote debugging tools, such as support for full-platform debugging weinre and Adobe Edge Inspect CC, the Chinese self-developed iOS special tools Mihtool.
This article mainly says the Chrome remotedebugging method, has also encountered some pits before, has summed up some experiences, has shared the following.
Chrome devtools Debug Mobile device brower Page Tabs/webviews
Android remote debugging currently supports debugging in all operating systems (WINDOWS,MAC, Linux, and Chrome OS), supported by :
To debug a site's page
Debug WebView in Android native app
Display the Android device's screen image in real time to the development machine.
Enable interactive debugging of Android mobile devices and development servers via port forwarding and virtual host mapping (Vsan mapping).
Commissioning Requirements:
Development environment Android Desktop version chrome32+
A USB cable that connects the computer to the mobile device and installs the USB drive of the appropriate model. Drivers:http://developer.android.com/tools/extras/oem-usb.html
If you are debugging a webpage, the mobile device needs to install Chrome Forandroid and Android 4.0+
For the app WebView debugging, the system needs to be Android 4.4+ and the WebView within the native application must be configured with the corresponding debug declaration.
Description: Remote debugging requires that the desktop version of Chrome is higher than the chrome version number of the Android mobile device. The best way to use Chrome's Canary Special edition is Chrome Canary (mac/windows) or Chrome desktop development Chrome Dev Channel release (Linux).
First step: Start the USB debug mode on the mobile device first. Method:
Android 3.2+, open Settings – application – development, tick on "USB Debug"
Android 4.0~ Android 4.1, open Settings-developer options-Go to the "USB Debug" tab on the tick.
Android 4.2+, open settings-about mobile phone-phone configuration information-connected to the "version number" 7 times, back to the top you can see the "Developer Options" display, in the "USB debugging" tick.
Second step: Connect the device with the USB cable , the driver is installed after the connection is successful, you may see a frame request on the device to allow the computer to be debugged via USB
Tick and click "OK".
Step Three: Open the Chrome menu on your PC – more tools – Check your device (Chromemenu > More Tools > Inspect Devices) or enter it directly in the browser's address bar chrome:// Inspect or About:inspect
After opening the Devtools, make sure to tick discover USB devices
If the USB connection succeeds, we can see the model of the mobile device and the page running on the device and the WebView list that allows debugging. Find the target page that needs debugging, click Inspect to open Devtools, click Reload to reload the current debug page, click Focus tab to pin the tab, close to close the current page. You can also open a new page by typing the URL in the input box.
Click Inspect Open Devtools, you can select the DOM element in the page, while the corresponding element in the device is also highlighted, you can also use the inspect element in Devtools to select the target element, you can interact with the mobile device page in real-time, easy to locate the problem, For code debugging.
Enter a new URL in the input box and click Opoen to open the new page you want to debug.
Note: Due to different versions of Chrome, Devtools may also have some differences, such as my Chrome38.0.2125.104 M version has not opened a new page URL input box, upgrade to v39 after the return to normal, know the reason of the welcome message.
1. devtools window Reload page using F5 shortcut key (cmd+r for MAC)
2. Use the network panel to see in real time the loading of the page in the actual network environment of the mobile phone.
3. The timeline panel can be used to analyze page rendering and CPU usage, and generally the performance of mobile devices is lower than on the computer.
4. Script execution in the console console of Devtools, which synchronizes pages that are checked on mobile devices.
5. If you are debugging a locally built server program, you need to use port forwarding and virtual host mapping so that the content of the page in your local environment can be rendered on the device.
The debug WebView needs to meet Android version 4.4+ already on. And you need to configure the appropriate code within your app, call the static method setwebcontentsdebuggingenabled in the WebView class, as follows:
if (Build.VERSION.SDK_INT >=build.version_codes. KITKAT) { webview.setwebcontentsdebuggingenabled (true); }
The above configuration method is suitable for all webview situations within the Android app.
Whether the Android WebView can be debugged does not depend on the manifest flag variable debuggable in the app, if you want to allow WebView remote debugging only when Debuggable is true, use the following code snippet:
if (build.version.sdk_int>= build.version_codes. KITKAT) { if (0! = (getapplicationinfo (). Flags &=applicationinfo.flag_debuggable)) { Webview.setwebcontentsdebuggingenabled (True);} }
The list of available WebView is as follows:
The information listed includes the Title,url address of the page, the size of the page, and its relative position relative to the device screen.
Live screen projection (live screencasting)
When you're debugging a mobile device, it's inconvenient to switch back and forth between the screens of the two devices, Screencast enables the mobile device screen to synchronize with the development environment Devtools, and you can interact interactively with the content on your mobile device screencast.
Screencast renders only the contents of the page, not the toolbar address bar, the device keyboard, and other device interfaces, which appear as transparent portions of the screencase.
Android 4.4, a phone operating system codenamed KitKat, produced and developed by Google, unveiled its new version of Android 4.4 in the early hours of September 4, 2013 in Beijing, with the name KitKat Kit Kat. It is reported that the code is from Nestle KitKat Chocolate. For KitKat 4.4.3,screencast not only can be implemented on the tab page, but also can be synchronized interactively on the webview.
Click the screencast icon in the upper-right corner of the Devtools to open the Screencast view, and the mobile device screen will be displayed in real time on the Screencast panel on the left.
The chrome32+ version of Devtools supports native USB debugging for connected devices. Some of the lower version numbers require you to debug the Chrome Web page on your mobile device by installing ADB or adb plugin. Because before has been the use of ADB plugin mode debugging, now a toss to find a higher version more convenient and practical features, because the online information is scattered, the key things are not mentioned, pits are many, this is precisely the reason for writing this article.
Development machine Installation ADB plugin is the way after Chrome 28+, which differs from the previous need to install the entire Android SDK kit while mobile devices are installing chrome for Android 28+. After the ADB extension is successfully installed, a gray Android will appear next to the Chrome menu. OID start icon.
Click the Android icon, and then click ADB to start. Once the ADB has started, the menu icon turns green and shows the number of devices currently connected, if there is a connection device.
Click View Inspection targets open: The list shows each connected device and its tab page. Find the page you want to debug and click Inspect next to the page link URL to launch the Devtools Debug window.
It is particularly important to use Devtools: If you click the Inspect Open Devtools window blank, and the refresh is not valid, it is probably due to the wall, You can try to appspot.com whether you can ping the pass, if you can't ping, then you have to go through the wall now (goagent or red apricot are good, will appspot.com whitelist), of course, you need to have a Google account.
To add a note, if you do not see any connected devices after connecting to the USB cable, follow these steps to troubleshoot:
Check that your device is connected to USB and check the USB data cable.
Make sure that your device is issued with an ADB device command listed as available. If not, check to see if USB debugging is enabled on your device.
If the Windows system, check that your USB drive is installed correctly. Reference http://developer.android.com/tools/extras/oem-usb.html
Desktop Chrome browser open chrome://inspect Check Discover USB devices is selected
Make sure your desktop browser version is higher than the chrome version number of your mobile device
If the chrome for Android version is low, check the Chrome browser settings on your mobile device to make sure that USB debugging is enabled in the settings. There is no such setting in the High version, no setup is required.
If it still fails to display, try reseating the USB cable.
Ports forwarding (port forwarding)
Your phone and development machine can sometimes be in two different networks (such as on-premises servers and two different network environments on your online servers), and you may not get page content on your phone for your development environment. Moreover, sometimes your development environment is in the network under the control of the company for security reasons.
Port forwarding in Chrome for Android solves this difficulty, and it's easy to test your development site instantly on your phone. It works by creating a listening TCP port on a mobile device that maps to a development machine-specific TCP port and two ports to communicate over a USB line, so this connection does not depend on the configuration of the network environment in which it is located.
Before you get to the point, you need to be aware of some of the points that you should pay attention to building your local server. Install the local server, where the Wamp integration pack is installed. Once the installation is complete, you need to modify some Apache settings.
1. Open the configuration file httpd.conf the Apache installation directory to increase the number of listening ports.
# listen:allows 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 A Pache from glomming onto all bound IP addresses.# #Listen 12.34.56.78:80listen 80Listen 8888Listen 8999Listen 1818
After you turn on the Apache service, you can use the command netstat–n–a to see if the configured port is turned on.
If your local environment also opens the IIS service, in order to avoid a conflict between the 80 ports, you can modify Apache's default port as described above. Do not forget to restart the Apache service after modifying the settings.
How to change the IIS port: If you keep the Apache service running concurrently with the IIS service and do not want to change the Apache default 80 port, you can only change the IIS port, as follows: Start-to-run, input: inetmgr->internet Information Service- > local computers, Web site, right-click Default Web Site, properties, select the Web Site tab, and modify the TCP port. Finally, restart the IIS service.
2. Turn on the virtual host configuration in the httpd.conf file
# Virtual Hosts#includeconf/extra/httpd-vhosts.conf
The # number before the second line is removed, that is, to allow the extension configuration to be loaded.
1. Apache Server default path is the installation directory Htdocs, if you want to change the default directory, you can modify the httpd.conf file under DocumentRoot and directory, modify both paths to the directory you specify.
# # Documentroot:the Directoryout of which you'll serve your# documents. By default, Allrequests is taken from the This directory, but# symbolic links and Aliasesmay is used to the other Locati Ons. #DocumentRoot "e:/wamp/www/" # # This should is changed towhatever you set DocumentRoot to.#<directory "e:/wamp/www/ ">
Open the httpd-vhosts.conf configuration file in the extra directory, set the virtual host directory for the listening port, respectively, at the last location of the file
# # Use name-based virtual hosting. #NameVirtualHost *:80 # VirtualHost example:# almost any Apache directive could go into a virtualhostcontainer.# the first VirtualHost section are used for all requests that donot# match a ServerName or Serverali As in any <virtualhost>block.#<virtualhost *:80> [email protected] DocumentRoot "E:/wamp/www/dummy -host.example.com "ServerName dummy-host.example.com serveraliaswww.dummy-host.example.com ErrorLog" Logs/dummy-ho St.example.com-error.log "Customlog" Logs/dummy-host.example.com-access.log "Common</virtualhost> < VirtualHost *:80> [email protected] 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> [email protected] 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> [email protected] DocumentRoot "e:/wamp/www/site" ServerName localhost errorlog "logs/programs-host2.example.com-err Or.log "Customlog" Logs/programs-host2.example.com-access.log "common</virtualhost> <VirtualHost *:1818 > ServerAdmin [email protected] documentroot "E:/wamp/www/webapp" ServerName a.test.com errorlog "logs/w Ebapp-host2.example.com-error.log "Customlog" Logs/webapp-host2.example.com-access.log "Common</VirtualHost >
where a.test.com to take effect also requires a mapping relationship to be added to the local host file: 127.0.0.1 a.test.com
Then we test, in the browser enter your configured host name and port number, the URL points to the file you want to open.
If you are prompted above, check that your virtual host directory is correct. If the directory is set up correctly, you can open the page.
In general, the Directory access permissions are by default:
# 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 are directly set up for convenience
# 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, I personally prefer to set different permissions for specific directories, depending on the people and actual needs of the debugs, as shown in the following 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 to allow from 192.8</directory> <directory "E:/wamp/www/programs" > Options-indexes followsymlinks allowoverride all Order deny,allow deny from all to 192.8.102.192.8.104. 192.8.22.</directory>
Restart the Apache service after Setup is complete.
Security is safe, but there is a problem with accessing the page under localhost that the scenario would appear:
In fact, let's add one more allow from127.0.0.1:: 1 localhost to resolve this issue. As follows:
<directory "E:/wamp/www/programs" > options-indexes followsymlinks allowoverride all Order deny, Allow Deny from the all to 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 properly. Such as:
Now set up the local server, opened a number of listening ports, go to the point, and then the port forwarding.
To use the port forwarding feature, the following conditions are required:
1. Open Chrome://inspect in the Chrome browser of the development machine
2. Click portforwarding to eject the settings window
3. In the Device port input box, fill in the port number to be monitored by the mobile device (default is 8080)
4. In the host host input domain, fill in the current IP address (or host name, such as localhost) to run the Web app and add the port number. The IP address can be populated with any local address that the development machine can access. Currently, the port number range must be between 1024~65535 (including)
5. Select Enableport Forwarding.
6. Click Done to finish.
When the port number of the Chrome://inspect window is flashing green, it indicates that the ports forwarding configuration is in effect. You can now debug by opening the local page on your mobile device.
Port forwarding is limited before Chrome29, and if you encounter problems, make sure that your Chrome version is upgraded to more than 29. The chrome31+ port forwarding has not been an experimental feature, but a feature that is officially released.
We have built a local server environment. Connect the USB cable, open the chrome://inspect/#devices, according to Apache's listening port, set the corresponding Devtools port forwarding parameters, such as:
Once the port forwarding settings have been completed, we are ready to 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 the following:
Virtual Host mapping (Vsan hostmapping)
Port forwarding is useful when you are debugging under a localhost domain name (or your local development machine IP). However, if you want to use your own custom local domain name to debug it doesn't work.
If you are using a javascriptsdk in a domain name that can only run on a specific whitelist, you set up a correspondence like 127.0.0.1 xxx.com in the host file. Perhaps you have a Web server (MAMP,WAMP,XAMPP, etc.) with a virtual host configured with a personalized domain name.
If you want the mobile device to display the content of the page 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 the mobile device to the correct location on the host.
Build agent
There are many tools to build proxies, such as Charles Proxy on Mac, squid cacheunder the Windows system Fiddler,linux,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 . A proxy server is installed on the host and all requests from the Android mobile device will be forwarded to the proxy server.
How to build a proxy service here is not a detail to look at, interested can refer to my article or self-search.
Steps for Port forwarding agent settings:
1. Install the agent service software and build a proxy server on the host.
2. Turn on the proxy service and make sure the proxy server is running a different port than the Chrome port forwarding port.
3. Chrome browser opens "Check device" Chrome://inspect
4. Click Port forwarding to eject the Settings window.
5. On the device port, fill in the ports that the Android device will listen to, such as 9000.
6. Host IP can fill in localhost:xxxx, such as localhost:9000, can also fill in the local domain name I configured above a.test.com:1818
7. Tick Enableport Forwarding
8. Click the Done button to complete the parameter configuration.
Mobile device Proxy service parameter settings:
1. Open Settings-wlan (settings> Wi-Fi)
2. Long press the currently connected wireless network (proxy service settings apply to each wireless network)
3. Click on Modify Web (ModifyNetwork)
4. Tick the advanced options andThe settings will be displayed:
5. Click on the "Proxy" menu to select "Manual" (Manual)
6. Enter localhost or 127.0.0.1 at "Proxy Server hostname" ( proxyhostname)
7. Enter the port number at proxy port, such as 9000
8. Click Save.
With the above parameter setting, all requests on the mobile device are forwarded to the host's proxy server, the proxy server on behalf of the Android mobile device to send the request, so that the request sent to a specific domain name has been reasonably resolved. Now you can debug the page under a specific domain name.
Note: In order to not affect the mobile device normal internet browsing, disconnect the USB cable must restore the proxy settings.
Fiddler uses port 8888 by default and my local server is 8888 ports, so the listening port is set to unused 10000 port in the Fiddler-tools menu.
After the phone-side proxy settings are complete, open chromedevtools to Debug. Click Inspect to see the page displayed in the mobile browser, now start debugging it.
My test page is http://a.test.com:1818/taskmarket/index.html
The Devtools instance is debugged as follows:
The real-time on mobile Chrome for Android is as follows:
Note that the host needs to be in the same network segment as the mobile device.
Children with problems can leave a message or check out other related articles on my blog. The Chrome remote Debugging section is here. The debugging of the mobile side is not over yet, the next section I will introduce the WEINRE remote debugging tips and detailed tutorials.
Reference article: Remote debugging on Androidwith Chrome https://developer.chrome.com/devtools/docs/remote-debugging
Chrome remote Debugging for mobile Web development Debugging (remotes debugging)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
