使用 Windows Chrome 除錯 iPad iPhone 網頁錯誤

11 月 25, 2022

--

平板、手機網頁發生錯誤,如果無法用 F12 模擬需要直接在設備上除錯,可以參考以下作法

--

先安裝 git ,如果沒安裝發生錯誤,後面有直接補救的方法

  1. 安裝 iTunes - 下載並使用 Windows 10 版 iTunes
  2. 安裝 Scoop - Scoop - A command-line installer for Windows
  3. 將 iPad 的「網頁檢閱器」開啟:設定 → Safari → 進階 → 網頁檢閱器 → On
  4. 使用 Power Shell 執行以下指令
  5. 打開 Windows Chrome 進入 chrome://inspect/#devices
  6. 點選 Open dedicated DevTools for Node 新增 9000 port
    localhost:9000
  7. 插入 iPad 如果出現信任詢問請選信任,開啟要除錯的網頁
  8. 回到 Windows Chrome chrome://inspect/#devices 畫面
  9. 找到除錯網頁,點擊 inspect

--

這次 iOS 10.3.4 網頁的錯誤有兩個

一個是 Javascript 變數名稱和 id 名稱相同,這個就改其中一個名稱就好了

另一個是 bootstrap class 的問題,因為 class 設定問題導致整個 <form> 無法操作,真的是非常離譜,難怪有人會說比 IE 更痛恨 safari

--

remotedebug-ios-webkit-adapter failed to run with the following error: ios_webkit_debug_proxy.exe not found. Please install 'scoop install ios-webkit-debug-proxy'

ios-webkit-debug-proxy 有可能會被防毒軟體誤判,當發生這個問題的時候檢查一下防毒軟體

--

 1,040 total views,  3 views today

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。