如今在移動設備上測試網站變得越來越重要了，我們會經常發現在移動設備的瀏覽器上面網站會表現 的和桌面瀏覽器不一樣，因此在開發網站時用真機測試變得非常重要。
大多數在桌面電腦的開發服務器都只是在 localhost 中打開一個端口，然後通過 URL http://localhost1234 來訪問內容。這種方式在電腦端非常管用，但你不可以把這個 URL 複製到手機端測試。 一種可行（通常都可以）但並不高明的方式是先查找電腦端當前的 IP 地址，然後移動端通過 http://<ip-address-of-desktop>:<port> 來訪問網站。
然而，基於電腦端的 IP 地址來調試是非常煩人的，因爲這個地址會經常發生變化。這意味着你不能保存該地址到書籤中，而且當 IP 地址發生變化的時候，你將會丟失該域下的 數據，如 cookies, localStorage 等等。 然而，有一種簡單的方式去解決這個問題， 這種方式只需要設置一次，不會受到 IP 地址變化的影響，甚至不需要數據線！ 你只需要一臺 Mac 和 Safari 即可。這個方案可以用在 macOS 10.12（Sierra）， 10.13（High Sierra），10.14（Mojave），可能可以用在更老的 macOS 版本中。
在你的移動設備中打開 localhost:port
先假設你的測試服務器在 localhost 中打開了 8080 端口。在你的電腦端，你當然可以打開 localhost:8080 來訪問網網站了。現在我們要讓你的移動設備來打開它。實際上，我們不會使用 localhost:<port> 或者 <ip-address>:<port>，因爲有一種更好的方式來代替它：計算機名。
你可以在 系統偏好設置 -> 共享 中找到你的計算機名(注意，接下來我會用 <computer-name> 來指定計算機名)。
接下來你需要至少激活一種在列表中共享服務，激活哪個都沒所謂。這可能有點蠢，或者你可以激活打印機共享，因爲通常只有你會使用到。
現在確保你的 Mac 和 iOS 設備處在同一網絡環境中，然後在你的 iOS 設備中打開 http://<computer-name>.local:8080。現在你的網站就會顯示在你的 iOS 設備上了！
你還是打不開網站嗎？ 看起來你需要設置你的服務器，用 0.0.0.0 代替 localhost （並且允許從 *.local 建立的鏈接）。把你的 IP 地址改成 0.0.0.0 會讓你的服務器可以從外部訪問（在同一 WiFi 內）。
如果你正在使用 webpack-dev-server 的話，你只需要稍微改動一下配置就可以了。默認情況下，它會在 localhost 上創建服務器，並且不會允許外部鏈接（例如通過手機訪問）。所以你需要修改一下 webpack dev server 的配置文件（準確來說就是 host 和 allowedHosts 字段）：
devServer: {
host: '0.0.0.0',
allowedHosts: [
'.local',
],
},注意我們添加 .local 到 allowedHosts 中，這會讓所有 .local 結尾的 host 可以 訪問到我們的網站，這樣當我們需要共享的時候非常有用。 重啓服務器，你的 iOS 設備應該可以正常訪問網站了！如果你收到報錯信息 invalid host header 的話，那很可能你的計算機名輸錯了。
實際上同一 WiFi 下的所有 iPhone， iPad，Mac 都可以訪問到你開發環境中的網站的，而且 iOS 上的 Firefox 和 Chrome 都可以訪問到。然而，你不可以在 Firefox 和 Chrome 中使用遠程調試。
遠程調試
現在你的手機和平板電腦都可以訪問網站了，你可能通過它們來遠程調試。設置起來是非常簡單的。打開 Safari 的 偏好設置 -> 高級 然後啓用 在菜單欄中顯示“開發”菜單。
在移動端，啓用 設置 -> Safari 瀏覽器 -> 高級 -> Web 檢查器，然後用數據線連接你的 Mac。用移動端的 Safari 打開網站，然後在 Mac 上的 Safari 選擇 開發 -> <設備名字> -> <你想調試的 Tab>。如果你是第一次設置的話，那麼你需要點擊信任設備。
現在所有的設置已經完成了。當你點擊 <你想調試的 Tab> 的時候，Mac 上的 Safari 會創建一個調試用的 session，它會允許你在 Mac 的 Safari 中調試 iOS 設備。
遠程調試（無數據線）
其實你不需要用數據線連接電腦也可以遠程調試移動端的 Safari 的，但這種情況下你需要在 Mac 上安裝 Safari Technology Preview，因爲當前穩定版的 Safari 並不支持無線遠程調試。
重複上面做的事情，用數據線連接電腦然後打開 iOS 上的 Safari。在 Safari Technology Preview 中，確保你已經啓用了 在菜單欄中顯示“開發”菜單，然後啓用 Develop -> <Your mobile Device Name> -> Connect via Network。現在你可以把數據線拔掉，看看 Develop -> <Your mobile Device Name> 是否還顯示在 Safari Technology Preview 中。
然後選擇你想調試的 Tab 就可以了。Safari Technology Preview 會在 macOS 中建立一條無線連接到 iOS 設備上，這樣你就可以在 Mac 上調試 iPhone 和 iPad 了。看，不需要數據線吧。
Happy Testing!
譯註
按照我的經驗，用 Safari Technology Preview 來無線調試用起來是非常舒服的，但有個致命缺點就是非常不穩定。經常調試着調試着就搜不到設備了。
當出現這種情況的時候，可以試着把Safari Technology Preview 殺掉然後重啓，看看能不能找到設備，如果找不到， 就把 iOS 上的 Safari 殺掉再重啓，再測試。多試幾次通常就能正常調試了。
如果還是找不到，那過一段時間（通常是 5 ～ 10 分鐘左右）再打開 Safari Technology Preview 試試。
實在不行又趕着調試的話，還是乖乖插上數據線調試算了。(然而體驗過無線調試之後就回不去有線調試了 XD)。
出處
http://scarletsky.github.io/2...
完。