【譯】遠程調試 iOS Safari

現在在移動設備上測試網站變得愈來愈重要了，咱們會常常發如今移動設備的瀏覽器上面網站會表現 的和桌面瀏覽器不同，所以在開發網站時用真機測試變得很是重要。
大多數在桌面電腦的開發服務器都只是在 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...

完。

參考資料

(Wireless) Remote Debugging with Safari on iOS