在大型項目中的前端測試與開發，通常使用git clone將整個工程目錄下載下來，然后本地運行調試。
然而，當一個項目已經發布到測試機上，需要臨時查看某個頁面的效果或修改某個頁面時，clone整個工程目錄顯然並不是個好辦法。
本文同時考慮PC本地調試方法及在手機端查看的方法，其總方法如下圖所示，具體細節會在后文詳細介紹。
一、PC本地查看（調試)方法
如果是靜態頁面，最簡單的方法就是把這個單一頁面下載（復制）到本地，然后本地運行調試代碼或者看效果。
但是如果是動態頁面，如最終預發布生成的地址為 www.xxx.com/y.html。當頁面內包含數據請求接口時，該接口域名應與www.xxx.com一致。
由於本地測試模擬的環境域名與線上並不一致，所以會導致接口請求變成跨域請求導致請求失敗。所以需要進行上圖部分1的步驟映射本地host為請求接口的域。其具體方法如下：
- 使用該方法首先需具備一個服務器環境用於模擬真實的服務器，即apache、nginx等。
- 將本地的host（127.0.0.1或本地IP）指向接口所在域，這里的域為www.xxx.com。 具體方法在chrome下可以使用比較簡單的hosts文件管理插件，如下圖。
- 將需要查看/調試的文件下載到網絡目錄中，localhost/test.html，其中test.html為目標文件。
- 在瀏覽器地址欄中輸入 http://本地IP/test.html,頁面本地顯示成功。
二、手機端（無線端）查看及簡單測試方法
這種方法僅能用於在手機端查看上文所述的PC端的頁面，並能進行簡單的數據攔截mock操作。
其方法如上圖的第2、3部分，具體步驟如下：
- PC端安裝代理軟件，本文使用fiddler
- PC端安裝頁面二維碼生成插件，如chrome二維碼插件的安裝
- 手機端設置網絡代理指向PC端本地IP，端口8888
- 手機安裝二維碼掃描軟件
- 打開fiddler，手機端掃描PC端待檢測頁面生成的二維碼，即可查看頁面成功
在這個過程中，可以在fiddler中查看到詳細的數據傳輸及數據請求過程，可以通過fiddler對數據的更改從而mock數據查看頁面結果。
可以看到，步驟有些復雜，那么為什么不直接在手機中輸入：PC端ip/頁面文件目錄 呢？
由於頁面中動態數據的請求，其host地址被PC端所映射。而在手機端，並未設置host，會導致跨域請求從而最終導致頁面接口的請求失敗。所以手機端實際上需要PC端做好hosst地址的映射工作，直接從PC端配置好的服務器環境中瀏覽數據。所以使用fiddler將PC端服務器環境中已經生成好的（數據請求之后的）最終頁面代理一下直接發送到手機端，同時手機端的操作也通過fiddler進行數據代理返回給PC端，由PC端進行數據處理。這樣就避免了數據請求跨域的問題。