用iPhone查看pc電腦上寫的html(Mac電腦Charles)簡單版

時間 2019-11-21

標籤 iphone 查看電腦寫的 html mac charles 簡單欄目 iPhone 简体版

原文原文鏈接

對於客戶端同窗開發來講，寫一段代碼想在真機上看看，是很是容易的。css

那麼在這麼一個大前端的環境下，客戶端開發想寫點html和js代碼，又想在手機上看看效果，怎麼辦呢？html

須要如下幾個步驟：前端

大致流程：1. 安裝webstorm，並設置webstorm，2，安裝Charles，並設置charles。3. 設置手機代理。web

1. 電腦端安裝webstorm或者其餘前端開發工具（webstorm的工程運行起來，是以localhost:開頭的，幫你建好一個localhost（即127.0.0.1.:63342）了，方便手機訪問電腦）windows

安裝webstorm（略）瀏覽器

2. 安裝完webstorm，對webstorm進行Debugger設置，目的是讓手機能夠訪問webstorm創建的localhost，如圖：服務器

勾上兩個選項， Can accept external connections和 Allow unsigned requestswebstorm

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屬性