UC Browser Developer Edition debug Phone page

1 About RI

Currently, using a browser to access a webpage on a mobile phone does not make it easy to debug the page language. Mobile phone screen is relatively small and inconvenient to operate, directly on the phone web data debugging is not very realistic.

Therefore, we use technology to separate the debugging information of the mobile phone, and realize a development tool--remoteinspector (RI) that can be used to debug a small screen and a low-profile mobile browser on a large screen and a high-profile PC.

1.1 Main functions

Android Platform UC Browser Developer Edition, mainly supports the following features:

• Dom View and modify
• JavaScript debugging, CSS debugging
• Network Status View
• Resource File View
• Console Console

2 Preparation Work 2.1 mobile phone side

Go to the UC official website Developer Center (website address), download the Android platform UC Browser developer version, install to the phone.

2.2 PC Side

PC and install Chrome or Safari on your PC (Chrome is recommended). Supports CHROME15–CHROME21, as well as Safari5.1.4 or later versions.

Download the ADB tool into your PC.

2.3 Connecting your phone to your PC

Android Platform UC Browser Developer Edition, remote debugging supports two modes of USB connection, Wi-Fi connection. For Mac Platform Please refer to: User manual for UC browser developer (Android platform). pdf

• Wi-Fi Connection mode

  Wi-Fi mode, make sure the phone and PC are in the same wireless network segment.

• USB connection Mode

  USB connection mode requires a ANDROIDSDK development environment or the installation of ADB tools.

    //附Windows操作系统上的adb安装参考  1)在PC上，通过网络下载安装豌豆荚（Android手机助手）；  2)在手机上打开USB调试模式：  设置>应用程序>开发>USB调试

    3)连接手机与PC，若PC无手机驱动，豌豆荚会自动下载驱动并安装；  4)将手机与PC连接，能被豌豆荚识别则为正常连接  5)将adb_tool.zip解压到C:\WINDOWS\system32目录下  6)开始>运行>输入cmd.exe进入Windows命令提示符窗口，输入adb，   如果无错误提示，并能够看到”AndroidDebugBridgeversion1.0.26”的提示，则表明adb安装成功

  After setting up the ANDROIDSDK development environment or installing the ADB tools, port mapping is done through the ADB command.

    在Windows命令提示符窗口（cmd.exe）运行：adbforwardtcp:9998tcp:9998

3 Debug mode

Launch the UC Browser developer version on your phone and open the page you want to debug. Open Chrome or Safari on your PC

• If Wi-Fi connection mode, then enter in the Address bar: Phone ip+:9998

  example, the phone IP is 192.168.112.244, then enter 192.168.112.244:9998. At this point, the UC Browser developer version of the phone will pop up a dialog box, as follows:

  Select OK to allow debugging.

• In the case of USB connection mode, type in the Address bar: http://localhost:9998

  Once you have successfully accessed the URL, you will see the Open index page for the UC Browser developer version:

  Next, click on any page you want to debug to debug. The debugging method is similar to the debugging method for Chrome or Safari developer Tools on your PC. Take the UC product download station as an example and click on the Debug page:

  When a Web page of the UC browser developer is debugged by a remote browser, the system notification bar displays the wrench icon, prompting the UC browser-debug mode to open, indicating that the current phone page is in the debug state.

  All the work is ready and then you can go into the commissioning phase.

UC Browser Developer Edition debug Phone page