WebApp网页真机调试工具-（Android）

待我年逾花甲，重新回到乡下。

池里养些鱼虾，坡上满是山茶。

不见雾霾黄沙，只有朝阳晚霞。

牛羊伴着鸡鸭，瓜田李下小麻。

孙儿承欢膝下，老伴陪与床榻。

纵是满口假牙，却也笑靥如花。

现在的移动端开发主要流行Hybrid开发方式，市面上也很多框架提供了前端访问手机硬件相关的API，但是总有不能满足的时候，所以，我们就自己做一个框架来封装提供给js的各种接口（框架不是本文重点），那么问题就来了，如何调试呢？前期开发可以通过打桩的方式来模拟，但是要发布上线必须要真枪实弹的调试通过才行。于是就输出了一个调试网页的DEMO（android/ios app），只能是通过手动输入网页地址来查看界面效果和测试接口的正确性，虽然团队没得微信那么强大开发一个桌面调试工具，但这体验和效率也确实太差了。确实不能忍，所以就写了个小玩意儿来解决这个问题。

思路：通过socket 长连接的的方式，在PC控制台输入调试的网页地址，就能立马在手机上看到网页的效果。

看看效果截图：

要实现这个小玩意儿，需要一个简单的后端程序，代码如下：

package com.lixue;import java.io.DataOutputStream;
import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.Scanner;/*** * @author lh* @date 2016/12/12 11:30*/
public class AppServer {public static void main(String[] args) {new ServerThread().start();}
}class ServerThread extends Thread {boolean flag = false;ServerSocket ss;public void run() {try {ss = new ServerSocket(9999);// 创建服务器,并开放9999端口System.out.println("Server Listening on 9999...");flag = true;} catch (Exception e) {e.printStackTrace();}Socket sc = null;DataOutputStream outputStream = null;Scanner scanner = null;while (flag) {try {// 监听服务器端口，一旦有数据发送过来，那么就将数据封装成socket对象// 如果没有数据发送过来，那么这时处于线程阻塞状态，不会向下继续执行sc = ss.accept();System.out.println(sc.getInetAddress() + " connect...");outputStream = new DataOutputStream(sc.getOutputStream());outputStream.writeUTF("connect successful");scanner = new Scanner(System.in);while (true) {String line = scanner.nextLine();System.out.println("你输入的是:" + line);outputStream.writeUTF(line);}} catch (Exception e) {e.printStackTrace();} finally {try {if (outputStream != null) {outputStream.close();}if (sc != null) {sc.close();}} catch (IOException e) {e.printStackTrace();}}}}
}

Android端代码如下：

package com.lixue.debugwebapp;import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.text.method.ScrollingMovementMethod;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;
import java.io.DataInputStream;
import java.io.IOException;
import java.net.Socket;
/*** @author lh* @version 1.0.0* @filename MainActivity* @description --------------------------------------------------------* @date 2016/12/12 12:00*/
public class MainActivity extends AppCompatActivity {public static final int CONNECT = 99;public static final int SUCCESS = 100;public static final int ERROR = 101;public static final String KEY_CONNECT = "connect";public static final String KEY_SUCCESS = "success";public static final String KEY_ERROR = "error";public static final String ADDRESS = "192.168.191.1";public static final int PORT = 9999;private TextView tv;private WebView webView;private StringBuilder sb = new StringBuilder();private SocketThread socketThread = null;private Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {String str = null;switch (msg.what) {case CONNECT:str = msg.getData().getString(KEY_CONNECT);tv.append("\n" + str);scrollToBottom();break;case SUCCESS:str = msg.getData().getString(KEY_SUCCESS);tv.append("\n" + str);scrollToBottom();if(isUrl(str)) {webView.loadUrl(str);}else{tv.append("\t\t\t不合法的url");}break;case ERROR:str = msg.getData().getString(KEY_ERROR);tv.append("\n" + str);scrollToBottom();break;}}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);init();connect();}@Overrideprotected void onDestroy() {close();super.onDestroy();}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if(webView.canGoBack()){webView.goBack();}else{finish();}return true;}private void init() {tv = (TextView) this.findViewById(R.id.tv_url);tv.setMovementMethod(ScrollingMovementMethod.getInstance());webView = (WebView) this.findViewById(R.id.wv);WebSettings webSettings = webView.getSettings();webSettings.setJavaScriptEnabled(true);webView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {webView.loadUrl(url);return true;}});}private void connect() {if (socketThread == null) {socketThread = new SocketThread(ADDRESS, PORT, handler);socketThread.start();tv.append("发起建立连接请求");tv.append("\n" + ADDRESS + ":" + PORT);scrollToBottom();}}private void close() {if (socketThread != null) {socketThread.closeThread();socketThread = null;}}/*** TV滚动到底部*/private void scrollToBottom() {int offset = tv.getLineCount() * tv.getLineHeight();if (offset > tv.getHeight()) {tv.scrollTo(0, offset - tv.getHeight());}}private class SocketThread extends Thread {private String address;//ipprivate int port;//port >1023private Handler handler;private DataInputStream in;private Socket socket;private boolean flag = false;public SocketThread(String address, int port, Handler handler) {this.address = address;this.port = port;this.handler = handler;}@Overridepublic void run() {try {socket = new Socket(address, port);in = new DataInputStream(socket.getInputStream());String content = in.readUTF();//连接成功发送消息sendMessage(KEY_CONNECT, content, CONNECT);while (!flag) {content = in.readUTF();//数据传输过程发送消息sendMessage(KEY_SUCCESS, content, SUCCESS);}} catch (IOException e) {e.printStackTrace();//发送异常消息sendMessage(KEY_ERROR, e.getMessage(), ERROR);} finally {try {if (in != null) {in.close();}if (socket != null) {socket.close();}} catch (IOException e) {e.printStackTrace();}}}public void sendMessage(String key, String value, int code) {Bundle bundle = new Bundle();bundle.putString(key, value);Message message = handler.obtainMessage();message.what = code;message.setData(bundle);handler.sendMessage(message);}public void closeThread() {flag = true;}}/*** 简单的判断一下是否是网址，严谨性可以自行完善* @param str* @return*/public static boolean isUrl(String str) {boolean isUrl = false;if (str != null) {if (str.startsWith("http://") || str.startsWith("https://") || str.startsWith("ftp://")) {isUrl = true;}}return isUrl;}}

好了，整体比较简单，这只是一个简单的DEMO，但是也应该可以满足网页真机调试的需求了，另外Android的界面相关优化如IP/Port等配置可以自行实现，DEMO打印了相关地址跳转、以及连接错误和异常等信息，如果需要打印输出更多的功能信息，大家可以自行优化。

最后怕很多小白不知道怎么用，总结下使用方式：

第一步：把服务端程序AppServer跑起来；

第二步：把Android代码中的Socket地址改成你自己电脑的地址；要是觉得改来改去不方便，可以自己做一个Android端的IP/Port配置界面；

第三步：连接成功后，在后端控制台输入要调试的URL地址敲上回车就可以了。服务端我用的是Eclipse，你可以用任意的IDE或者命令行只要你喜欢！！！

第四步：经过上述操作，在手机端就能实时显示后端输入的网页了。

最后，再次说明这只是一个DEMO，纯属笔者无聊花了一小时写的，要是用着不安逸可以自己修改完善，比如Socket重连啊这些。如果要求很高可以用WebSocket，代码会更加简单，重连这些也都有实现。

Android代码地址：https://github.com/allmyson/DebugWebApp

完整附件地址：请点我。

WebApp网页真机调试工具-（Android）相关推荐

vs使用android真机调试,UnityVS真机调试Android APP
UnityVS真机调试Android APP 前提:完成UnityVS环境搭建.Unity Android环境搭建.Unity Android打包步骤: 1. USB线连接手机和电脑,在手机的开发者 ...
android编程用真机模拟,android编程的广播，模拟器可接受，但真机不可接受。
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 1.动态注册 //接受广播 IntentFilter intentFilter = new IntentFilter(); intentFilter.ad ...
as真机调试_如何使用真机调试android程序
展开全部第一步:将我们开发所用的Android真机的USB调试功能打开(打开方法为Settings(设置32313133353236313431303231363533e59b9ee7ad94313 ...
android如何用真机测试,android studio如何使用真机测试app
在使用android studio进行项目的调试的时候,模拟器真的有点慢,有时还很卡,大家可能还是更想使用真机进行调试,那么下面来看看android studio如何使用真机测试app的教程. 第一大 ...
idea android 真机,intellij idea 设置用真机测试android
android自带的模拟器是不容置疑的慢,genymontion虽然快,但是觉得有点怪的感觉,哈哈,其实这些都不是重点. 之前是用myeclipse开发android的,虽然一直很想用eclipse来 ...
关于coolpad8190Q连接计算机真机实测android程序
我的手机是酷派8190Q,需要真机实测,就需要相应的usb驱动,在android adk网站中搜索OEM USB Drivers,在最下面就有相应android手机的驱动下载连接,我这里点击 Yulo ...
HbuilderX中真机调试 Android IOS
文章目录一.Android 二.IOS 2.1. 运行到IOS 2.2. 打开调试模式一.Android HbuilderX中 Android 真机调试二.IOS 2.1. 运行到IOS 2.2 ...
移动端html网页真机调试,Mac端调试iphone移动端网页
0.前言今天写好了一个页面,在mac上跑的好好的,结果手机打开直接白屏了.打开chrome的移动端模拟,但是模拟上也是好的,所以就只能开启真机调试了. 1.配置在iOS设备上打开允许调试:设置→S ...
华为荣耀5C真机调试android过程遇到的问题
1.电脑先下载豌豆荚,然后数据线连接,手机会自动提醒下载豌豆荚,下载完成后,打开,cmd中查看adb shell 我手机没有root,无法查看data/data数据,所以adb su,没有结果,之后我 ...

WebApp网页真机调试工具-（Android）

WebApp网页真机调试工具-（Android）相关推荐

最新文章

热门文章