How to Debug website on Mobile Device – 如何在手機上做網頁debug / debug HTML5 Hybrid App

最近開始研究使用Ionic Framework 來開發一些Hybrid App [用HTML5/ Javascript / CSS 和一些 Library 來開發..之後可以CompileAndroid/IOS/Windows Phone 的應該程式的 開發工具]
不久之後便發現要Debug這些Hybrid App很像不太容易..
因為他們不像可以在Android StudioDebug..
他們又沒有Console Windows可以用來檢查 Console.log的結果

做了一會research之後發現

原來我們可以使用Google Chrome 來 Debug我們手機上的網頁的

解決方法:
我們可以在Google ChromeAddress bar 上輸入以下網址

chrome://inspect/#devices

e.g. try the link below
chrome://inspect/#devices

之後可以按一下Inspect 去 選擇inspect那一個 Web AppWebsite
Chrome Inspect devices

之後便可以像平時 debug website 一樣 debug這個 Web App或 Website 了
Chrome Developer Tools - Mobile Web App

Hope you find it useful


style=”display:inline-block;width:336px;height:280px”
data-ad-client=”ca-pub-4266560994470212″
data-ad-slot=”3788424641″>

Leave a Reply