前言
撰寫網頁程式時 Debug 很容易,只要開啟瀏覽器的開發者模式即可。
如果是要在手機上進行 Debug,不管是 iOS/Safari 或是 Android/Chrome 都有瀏覽器直接支援。
然而,如果要在 iOS 上的 Chrome 進行 Debug 就麻煩了,因此本文主要介紹這套 weinre 讓開發者得以完成此動作。
若對 weinre 有興趣的朋友可以直接參考官方網站。
Get Started
- 1. 使用 npm 安裝 weinre (假設 npm 已經安裝了)
2. 執行 weinre
weinre --boundHost -all-
執行指令後,可以看到 terminal 打印出了網址,在開啟該網址。
![終端機畫面](https://firebasestorage.googleapis.com/v0/b/wanwaninfo-public-tw/o/codus%2Fimage-editor-Z898YLPCs915833053567631.jpg?alt=media)
開啟網頁後,可以在「Target Script」區塊中看到程式碼,將該段 script 貼到自己的網頁。
![網頁畫面 script位置](https://firebasestorage.googleapis.com/v0/b/wanwaninfo-public-tw/o/codus%2Fimage-editor-WJkjcrepxX15833059661617.jpg?alt=media)
3. 進行 Debug
步驟2在網頁上貼上 script後,在 iPhone Chrome 開啟網頁,再回到步驟2運行 weinre 後終端機給的網址,Access Points 區塊點擊 debug 網址。
![網頁畫面 debug url位置](https://firebasestorage.googleapis.com/v0/b/wanwaninfo-public-tw/o/codus%2Fimage-editor-RzrCYGmpMP15833059606975.jpg?alt=media)
若 iPhone Chrome 開啟的網頁,確實運行了 weinre 給的程式碼,並且手機電腦都在內網,就可以確實在 Access Points 的 debug 網址看到網頁。
![偵測到的網頁](https://firebasestorage.googleapis.com/v0/b/wanwaninfo-public-tw/o/codus%2Fimage-editor-BxKTRZ8UaC15833060790559.jpg?alt=media)
點擊想要 debug 的網頁 taget,會有選取效果
![偵測到的網頁(選取)](https://firebasestorage.googleapis.com/v0/b/wanwaninfo-public-tw/o/codus%2Fimage-editor-2UiWZVXiNo158330622365811.jpg?alt=media)
再點擊上方導覽列的「Elements」,或其他頁籤,就可以開始 Debug了!
![Elements頁籤位置](https://firebasestorage.googleapis.com/v0/b/wanwaninfo-public-tw/o/codus%2Fimage-editor-rFaaLRJDXH158330629848913.jpg?alt=media)
Elements 畫面
![Elements畫面](https://firebasestorage.googleapis.com/v0/b/wanwaninfo-public-tw/o/codus%2Fimage-editor-3NpAP4WHGs158330632467115.jpg?alt=media)
手機版 Chrome 畫面
![手機版 Chrome 畫面](https://firebasestorage.googleapis.com/v0/b/wanwaninfo-public-tw/o/codus%2Fimage-editor-XvGgPKqtnq158330668960019.jpg?alt=media)
npm install -g weinre