黑田

因為平常串接apple pay ，而apple pay須要使用safari才能使用。

而safari又是在ios平台上，如iphone或者ipad等等，自然而然要debug就得用MAC來DEBUG。

不過，昨天我碰到一個問題。那就是我忘記帶電源線，而我的MAC沒電了，只剩下windows 10可以幫我debug，所以只好靠以下步驟解決。

1.先下載最新版的iTunes，並且安裝好。不一定要安裝在C槽。

2.安裝好最新版的Node.js。

3.以管理員身分執行Windows PowerShell。

4.安裝npm的套件，指令如下：

npm install remotedebug-ios-webkit-adapter -g

5.因為現在ios的版本都是超過ios11以上，所以須要先下載這個git hub裡面的程式碼。

https://github.com/google/ios-webkit-debug-proxy/releases
我自己使用v1.8.3是可以正常使用的。

如果你使用ios11以下，可以直接跳到步驟9。

如果你跳到步驟9但你的power shell 出現scoop install ios-webkit-debug-proxy 這種訊息，那你還是乖乖從6繼續做吧。

6.到你電腦的這個資料夾。
%AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\node_modules\vs-libimobile\
底下，創一個新的資料夾叫做ios-webkit-debug-proxy-1.8-win64-bin

創好之後會是

%AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\node_modules\vs-libimobile\ios-webkit-debug-proxy-1.8-win64-bin

如果沒有vs-libimobile，就自己手動創建吧。

7.把步驟5抓下來的檔案解壓縮放進6.創好的資料夾底下。

8.編輯這個檔案

%AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\out\adapters\iosAdapter.js

把第132行的proxy 變數改成以下這樣:

const proxy = path.resolve(__dirname, '../../node_modules/vs-libimobile/ios-webkit-debug-proxy-1.8-win64-bin/ios_webkit_debug_proxy.exe');

9.把你的ios裝置從電腦拔掉，重新開機、重新以管理員身分開啟你的power Shell以及Chrome。重新裝上你的裝置到windows電腦。

10.在powershell 打上

remotedebug_ios_webkit_adapter --port=9000

其中port你可以替換。

11.允許windows 跳出來的防火牆警告。

12.如果他開始跑了，你在powershell應該會看到這個:

13.打開你的Chrome，網址輸入： chrome://inspect/#devices

14.你會看到這個畫面，按下Configure

15.新增"localhost:9000"到列表中。

16.在你的裝置允許信任這部電腦，有的需要輸入密碼。

   註：你的裝置上必須要先讓safari可以debug，可以在設定->Safari->進階->允許Javascript和網頁檢閱器。

17.在你的裝置上用safari打開須要檢測的網頁。

18.在你的windows電腦的chrome頁面，一旦接上了，你應該可以馬上在步驟13開出來的頁面下方，看見你裝置上的網站。

19.看你是要檢測哪個網站，在那個目標下方按下inspect即可。

20. 成功囉~
 

整個過程最花時間的地方是安裝iTunes，因為我電腦空間不夠了，要重裝兩三次。
 

本篇參考:

https://washamdev.com/debug-a-website-in-ios-safari-on-windows/