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

池裡養些魚蝦，坡上滿是山茶。

不見霧霾黃沙，只有朝陽晚霞。

牛羊伴著雞鴨，瓜田李下小麻。

孫兒承歡膝下，老伴陪與床榻。

縱是滿口假牙，卻也笑靨如花。

現在的移動端開發主要流行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();
				}
			}
		}
	}
}
 

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() {
        @Override
        public 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;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        connect();
    }

    @Override
    protected void onDestroy() {
        close();
        super.onDestroy();
    }

    @Override
    public 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() {
            @Override
            public 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;//ip
        private int port;//port >1023

        private 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;
        }

        @Override
        public 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;
    }

}
 

最後怕很多小白不知道怎麼用，總結下使用方式：

第一步：把服務端程式AppServer跑起來；

第二步：把Android程式碼中的Socket地址改成你自己電腦的地址；要是覺得改來改去不方便，可以自己做一個Android端的IP/Port配置介面；

第三步：連線成功後，在後端控制檯輸入要除錯的URL地址敲上回車就可以了。服務端我用的是Eclipse，你可以用任意的IDE或者命令列只要你喜歡！！！

第四步：經過上述操作，在手機端就能實時顯示後端輸入的網頁了。

最後，再次說明這只是一個DEMO，純屬筆者無聊花了一小時寫的，要是用著不安逸可以自己修改完善，比如Socket重連啊這些。如果要求很高可以用WebSocket，程式碼會更加簡單，重連這些也都有實現。

完整附件地址：請點我。