目次
1. 如何用手機連上 local 的環境
2. 如何用 Android debug Chrome
3. 如何用 iOS debug Safari
4. 如何用 iOS debug Chrome
在開發上，Mobile 的體驗在網頁開發上佔了很大的重要性
但像是 Chrome 的開發者工具的手機模擬器，又不一定是真實的情況
甚至機型等等的，也會有影響
這時候用測試機測試並 debug 就很重要了
這裡提供幾個常用的方法給大家參考，讓開發更順利
如何用手機連上 local 的環境
之前有分享過 ngrok 的教學，讓非同網域的人也可以看到本機開發的網頁
但如果只是自己開發需要看手機版的樣式，或是只是想分享給連同網域的同事看
ngrok 免費帶來的缺點，此時就會暴露出來
常常因為 reguest 太多而當機
這時候其實我們並不一定要使用 ngrok，畢竟是連同一個網域
直接用我們自己的 IP 位置開 local 的環境即可
如何找自己的 IP 位置
有兩種方式，看你習慣 GUI 還是 CLI 的方式！
- 點擊 Wi-Fi 圖示 > 打開網路偏好設定
2. 打開 Terminal 下這個指令
ifconfig
如何使用指定的 IP 位置開 local 環境
若你是使用 React Native
HOST=192.xxx.x.xxx npm start若你是使用 React Native 的
react-app-rewired套件
HOST=192.xxx.x.xxx npx react-app-rewired start在手機上貼上 http://192.XXX.X.XXX:3000/ 就可以了
若你是使用 Vue CLI，他自己就會附上了XD
在手機上貼上 http://192.XXX.X.XXX:8000/ 就可以了
qrcode-terminal
如果你有 N 個測試機要測試覺得還要打字或是要分享給同事很麻煩
可以使用這個套件 qrcode-terminal
npm install -g qrcode-terminal只要在 Terminal 下這個指令
qrcode-terminal 'http://github.com'
就會產生URL的 QRcode
在多機型測試上真的很好用呢！很推薦
如何用 Android debug Chrome
現在我們的手機可以連上 local 了，但要怎麼開發呢？
Google 早就幫你想到了，只要幾個步驟就可以完成！
- 在電腦開啟分頁，輸入 chrome://inspect/#devices
- 打開 DevTools 設定遠端 debug
- 在你的 Android 設備進行設定
- 用 USB 線接上你的 Android 裝置
- 開啟分頁 debug！
就可以開始 debug 了～
現在就來一一說明步驟吧！
到 chrome://inspect/#devices
這邊要注意一下，你的手機和電腦必須要使用同一個 Google 帳戶登錄到 Chrome
遠程調試在 隱身模式 或 訪客模式下是無法運行的！
假設你今天使用的是測試機
你又不知道測試機的帳密，必須在測試機上登入自己的帳號該怎麼辦呢？
切換使用者帳號
首先，最直接的就是先加入你的 google 帳號在手機的 Chrome 裡
但要怎麼切換呢？！
很簡單，打開無痕分頁搜尋 https://google.com
點擊登入，然後登入你的帳號
關閉所有分頁後，點擊 google 頭像就能切換帳號了
打開 DevTools 設定遠端 debug
打開 DevTools 點擊 Main Menu > More tools > Remote devices
在 Android 設備進行設定
在 Android 設備上，選擇 Settings > Developer Options > Enable USB Debugging
講得簡單，但每一個設備路徑都不相同，有些真的超複雜的
我以 SAMSUNG Galaxy A21s 做舉例
進入到 設定
- 點擊 關於手機
- 點擊 軟體資訊
- 找到 版本號碼
接著就是重點了！
請連續點擊他 7 下！
他還會提醒你你還剩下幾下 XD 蠻有趣ㄉ
- 回到上上頁，我們就可以在 設定 裡點擊 開發人員選項
- 開啟 USB 偵錯
- 點擊確定，我們就設定完成啦！！！
真的每支手機都不太一樣，有些不是很好找
像是那個點 7 下我就覺得蠻有趣的 XD
網路上有很多影片教你怎麼找
如果真的不知道怎麼開還是有資源可以救你的
將手機接上電腦
請再務必確認你的 USB偵錯 有沒有開啟
他也可能需要你允許一些手機的金鑰等等的
現在的 Android 接頭很多元，我自己是有買一個有三個接頭的轉接器
雖然是很便宜的那種但蠻好收納的
但應該還是堪用大家可以參考，如果你常常要測試
買一個多頭的線會比較方便
阿我是在我家附近買的，大家可以挑好一點的哈哈
如果有成功的話，chrome://inspect/#devices
就會顯示你的裝置的分頁有哪些了
開始 debug
首先，在你的 Chrome 開啟你要 debug 的分頁
我們以 Medium 做舉例
- 在手機的 chrome 前往要測試的網址
這時候在 chrome://inspect/#devices 就會出現 medium 的分頁
- 點擊 inspect
就會出現新的 Dev Tool ，這就是你在手機的環境了！
可以自由的 debug、看 Network 等等
不僅如此！！
inapp browser 也可以測得到！
目前我確定的是 FB 貼文可以，但 Messenger 和 Line 不行
- 點擊分享的連結
開啟 FB 的 inapp browser
- 點擊 inspect 就可以 debug 了，非常方便！
如何用 iOS debug
iOS 比較麻煩，他只能使用原生的 Safari 環境無法使用 Chrome debug
如何用 iOS debug Safari
- 下載並開啟 xcode
- 開啟 iOS 設備的遠端除錯選項：Setting > Safari > Advanced，打開 Web Inspector
- 將手機接上電腦
- 打開 safari 的開發工具
- 開始 debug
下載並開啟 xcode
首先我們必須先下載 xcode
如果你想下載最新的就可以前往 這裡
登入 apple 帳戶後
如果你是第一次下載，一開始應該會請你同意一些項目
如果你不想下載最新版可以到這個網址，找舊版來下載：
https://developer.apple.com/download/more/
他檔案很大要下載蠻久的，要耐心等待一陣子
在解壓縮時，如果他跳通知說空間不足
你可以搬去加目錄解壓縮
接著按照他的步驟安裝即可
開啟 iOS 設備的遠端除錯選項
- 首先到 設定 點擊 safari
- 點擊最下方的 進階選項
- 打開 網頁檢閱器
將手機接上電腦
這時會跳出這個通知，按同意即可
打開手機的 safari 並開啟分頁前往 Medium
打開 safari 的開發工具
- 點擊 開發 > 「你的手機名稱」> 要檢視的分頁
此時你的手機會長這樣
如果我已經安裝 xcode 但我的開發模式沒有我的手機怎麼辦？
我自己是的方法是：打開 xcode、重整一下網頁就有了
開始 debug
點擊 medium.com 就會出現 Dev Tool 了
不過他跟 Chrome 很不一樣的是，當你點擊 元件 選擇某一個 DOM
他是會反映在手機介面的
個人覺得是一種很特別的體驗XD
但可惜的是
他不能 debug inapp browser
所以我們就要想辦法讓 iOS 在 chrome://inspect/#devices debug
如何用 iOS debug Chrome
首先你必須要先完成幾件事情：
- 手機的設定
- 下載套件：iOS WebKit Debug Proxy
- 啟動ios_webkit_debug_proxy
- 連線到 local
- 設定 Dev Tool UI 介面的 URL
- 訪問 chrome://inspect/#devices debug
- 開始 debug
brew install ios-webkit-debug-proxy啟動 ios_webkit_debug_proxy
ios_webkit_debug_proxy
這時候再接上手機，比較容易成功！
連線到 local
他現在聽的 port 是 9221，我們就連線到 http://localhost:9221/
點擊連結就可以看到我們連接的裝置和網頁
直接點擊的話就會到這樣的畫面
除此之外我們也可以使用原本的 Dev Tool debug
加上 -f 參數直接指定使用 Chrome 的 Dev Tool 作前端
Chrome Dev Tools UI 的網址固定是：http://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html
因此只要下這個指令
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html在操作手機的同時，可使用 Chrome DevTools 檢視頁面
但不幸的，我們可能會遇到這樣的錯誤
因為在最新版本的 Chrome 和 Safari 中，Chrome 遠程調試協議和 Webkit Inspector 協議之間存在重大差異，也就是說：
所以要使用 Chrome DevTools
建議使用 RemoteDebug / remotedebug-ios-webkit-adapter 的專案
brew unlink libimobiledevice ios-webkit-debug-proxy usbmuxd
brew uninstall --force libimobiledevice ios-webkit-debug-proxy usbmuxd
brew install --HEAD usbmuxd
brew install --HEAD libimobiledevice
brew install --HEAD ios-webkit-debug-proxy2. 安裝 remotedebug-ios-webkit-adapter
npm install remotedebug-ios-webkit-adapter -g如此一來就完成了！
3. 啟動 Adapter 並指定 port 為 9000
remotedebug_ios_webkit_adapter --port=9000ios-webkit-debug-proxy 也會自動啟動，不需要再另外啟動 XD
訪問 chrome://inspect/#devices
打開 Chrome 訪問 chrome://inspect/#devices 或是 http://localhost:9000
我們就可以成功使用了！
開始 debug
本來應該要是這樣的結果的……
但悲傷的是他最近似乎壞了QQQQQ
請看這張最近的 issue ：Unable to connect to chrome-devtools-frontend.appspot.com:80
到現在都還沒修好，看來最近是無法使用了 QQ
希望 remotedebug-ios-webkit-adapter 早日康復 QQQQ
若他有好起來我會再更新文章的
有關注的朋友也可以留言最新狀況！
拍個手讓我知道，這個文章對你們有幫助 ♥(´∀` )人
