對於客戶端同學開發來說，寫一段代碼想在真機上看看，是非常容易的。
那么在這么一個大前端的環境下，客戶端開發想寫點html和js代碼，又想在手機上看看效果，怎么辦呢？
需要以下幾個步驟：
大體流程：1. 安裝webstorm，並設置webstorm，2，安裝Charles，並設置charles。3. 設置手機代理。
1. 電腦端安裝webstorm或者其他前端開發工具（webstorm的工程運行起來，是以localhost:開頭的，幫你建好一個localhost（即127.0.0.1.:63342）了，方便手機訪問電腦）
安裝webstorm（略）
2. 安裝完webstorm，對webstorm進行Debugger設置，目的是讓手機可以訪問webstorm建立的localhost，如圖：
勾上兩個選項， Can accept external connections和 Allow unsigned requests
3. 使用Charles（mac端）的map Remote功能或者fiddler（windows端），以Charles為例
設置map remote。以便使用自定義域名（這里我用簡單好記的abc）訪問固定ip。可以理解為：手機訪問abc就是訪問電腦的127.0.0.1.:63342
4. 手機設置代理.
不再累贅，客戶端開發同學應該都設置過。設置服務器(電腦的ip地址)和端口寫死8888
5. 最后來驗證，在webstorm中新建一個project。再在工程中創建一個html。寫一行helloworld
webstorm在瀏覽器中運行一遍記錄瀏覽器中的地址(path)。我這邊是：http://localhost:63342/untitled/helloworld.html?_ijt=il909a3u95a2cd4v71bvjivm4h
再在手機上輸入，剛才自定義的abc的域名，即http://abc/untitled/helloworld.html?_ijt=il909a3u95a2cd4v71bvjivm4h。這樣手機上就可以預覽webstorm中的html了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello world!
可以在手機上查看html了
</body>
</html>
手機端效果
在最后一步，有些情況是只有html顯示成功了，css，js文件都是404未找到，導致界面顯示錯亂，只有文字沒有格式。我也是找了很久原來是http頭referer的問題。index.html是沒有referer頭的，index.html中的css和js有referer頭，導致應答404了。如圖：js文件標紅了，未成功。如果單獨請求css文件(灰色的)是成功的.對比之后發現是referer的問題。
解決辦法：在index.html中添加meta屬性
<meta name="referrer" content="never">