調試移動端頁面

標籤：電腦ip   usb   位置   工具   chrome   網路服務   調試   code   還需   

調試移動端頁面分為兩種

• 開發時，行動裝置串連上PC起的服務
• 調試行動裝置上的頁面

手機串連PC的本地服務

在開發行動裝置頁面時，常用CHROME內建的類比行動裝置外，還需要有真機去測試一下，而不是布到測試服務上去之後，再使用真機測試。

第一步：手機串連上電腦的區域網路，之前在網上找的教程，想的是可能是手機和電腦都使用公司的無線網路，然而這是不可以的。正確的姿勢是使用電腦共用一個網路服務，再使用手機連上電腦的網路。
我使用的WIN10裡內建了行動熱點，電腦使用無線串連網路時也可以使用這個熱點共用，手機串連上這個網路

第二步：本地使用工具起本地服務，在電腦上可以使用localhost:3000訪問，手機則需要使用IPV4去訪問這個網路

查詢電腦IPV4的方法，在電腦的命令列裡，輸入ipconfig即可查詢到

最在在手機瀏覽器裡輸入IPV4 + 連接埠號碼即可訪問到那個頁面

調試手機上的頁面

電腦和手機同時使用chrome瀏覽器

第一步：電腦輸入chrome://inspect/#devices進入等待手機插入

第二步：使用行動數據線，串連電腦，注意手機要調成USB偵錯模式，每個手機具體開啟位置就百度吧

第三步：使用手機CHROME開啟想要調試的頁面，這個時候就可以在電腦上看到

手機處於串連狀態可調試狀態了，這個時候點擊調試，卻發現頁面一直處於loading狀態，這個時候就需要FQ，在FQ之後，就可以正確地開啟頁面了

調試移動端頁面