前言

如何讓手機充當第二個顯示器，用來隨時預覽PC端的程式碼？前一陣子寫程式碼時，一直在琢磨這個問題。

因為辦公室電腦配置低下，且只配備一個17寸顯示器，每當反覆除錯預覽網頁時，都要儲存，重新整理。用過

brackets即使預覽功能，總是不太習慣。於是就想到手頭的高配android，完全可以當做第二塊屏。

原理

當我修改*.html/*.css/*.js時，按下Ctrl + S的瞬間，檔案監控就捕捉到了這個變動，於是執行adb命令，向android傳送瀏覽器請求，開啟本機localhost。

方法

檔案監控：node.js fswatch

網上掃了一眼監控程式，沒有自己想要的。看了手頭現有的python、node.js，網上給的python程式碼好怪異，還是使用node.js，最初想的是把網頁伺服器與監控模組寫到一個檔案中，後來試了試，沒搞定，就單獨寫了。

watch.js

'use strict';
var exec = require('child_process').exec;
var fs = require('fs');

var count = 0;
var time = 0;
var phoneScreenTime = 30;
//手機暗屏的時間，我的是30秒。後面要根據這個加點亮螢幕的判斷
var id, cmd;


setInterval(function() {
    time++;
}, 1000)
//每秒自增的time,為每次發生更改時，執行操作的間隔，用來判斷手機是否黑屏的依據


fs.watch('./resume/', { persistent: true
 
, recursive: true }, function(event, filename) {
//recursive引數作用是fs.watch的監控子目錄，不支援linux系統
//./resume/ 是我監控的檔案目錄

    count++;
    if (filename && count == 2) {
    //此處count==2的意味為，只執行一次操作。
    //因為nodepad++修改檔案後儲存，是先刪除檔案所有內容，再儲存修改後的內容，相當於更改了兩次檔案的狀態。（不曉得為什麼）

        if (time <= phoneScreenTime) {
            cmd = '1.cmd'
 
;
        } else {
            cmd = 'screen.cmd';
        }


        //exec只能call,我貼上完整的命令會報錯，不知道為什麼
        exec('call ' + cmd, function(error, stdout, stderr) {
            if (error !== null) {
                console.log('exec error: ' + error);
            }
        });

        //清除時間、檔案二次更改
        count = 0;
        time = 0;
    }
});

console.log('watcher is running');

控制android開啟指定網頁：cmd + adb

兩個watch.js呼叫的cmd

1.cmd

不包含點亮螢幕的命令，只有瀏覽器訪問localhost

@echo off
F:\Users\liu\Downloads\adb.exe shell am start -a android.intent.action.VIEW -d http://192.168.1.100/resume/index.html
"F:\Program Files\Google\Chrome\Application\chrome.exe" http://192.168.1.100/resume/index.html

screen.cmd

@echo off
F:\Users\liu\Downloads\adb.exe shell input keyevent 82
F:\Users\liu\Downloads\adb.exe shell am start -a android.intent.action.VIEW -d http://192.168.1.100/resume/index.html
"F:\Program Files\Google\Chrome\Application\chrome.exe" http://192.168.1.100/resume/index.html

通過adb執行命令需要注意的是，手機要與電腦用USB連線好，在同一網路內（WIFI ?）（安裝USB驅動，開啟除錯模式，與電腦連線除錯好，手機無需ROOT）。

完成

配置好上面的內容。開啟node watch.js，修改儲存你的html，等待手機響應。

不出意外，應該有如圖效果。

當然，你可以隨意配置cmd內容，如不使用android，只需要PC隨即預覽，可將cmd內容改為

@echo off
"F:\Program Files\Google\Chrome\Application\chrome.exe" http://192.168.1.100/resume/index.html

如圖

也可不使用cmd進行操作，你當然可以使用python或exe來實現不同響應方式。

其他

這只是一個簡易的原理實現方法，可以進行更多的方案優化。

在看adb的相關網頁時，我還看到使用adb直接螢幕錄影的內容，這讓我想到Chrome控制手機外掛Vysor的實現原理應該也不復雜，它應該也是通過adb除錯進行的，因為剛開始因為Vysor的驅動，我adb連線不上手機，誤使我以為非root無法使用adb。這方面的內容以後有機會了可以深入研究。

總結：網路上的內容有很多不準確，比如fs.watch這塊，百度上說什麼原生模組不支援子檔案監控，為此我還費勁寫了好幾個資料夾的監控。我看了官方文件才知道，加個引數就行了。有什麼問題，還是以文件為主，切莫輕易看了網上幾句話就否決一種想法。