當前位置:編程學習大全網 - 編程語言 - 如何用手機進行本地前端調試

如何用手機進行本地前端調試

第壹步:連接電腦與手機

1. 手機打開“開發者選項”

安卓手機進入“設置”—>“關於手機”—> 在“版本號”上點7次(或其他的版本號位置,壹個個試肯定有……)

然後“開發者選項”就出現在“設置”裏面了。

2. 手機打開“USB調試”

進入“開發者選項”—>打開“USB調試”(如果想手機長亮還要打開“不鎖定屏幕”)

3. 連接並允許調試

用USB數據線將手機與電腦連接—>手機上出現“允許該電腦調試”時點“允許”(可能會晚點出現,先去第二步)

第二步:用電腦啟動手機瀏覽

1. 打開chrome的inspect

在電腦chrome地址欄中輸入chrome://inspect—>勾選“Discover USB devices”

如無意外在Devices中會出現手機型號。

如果沒有,再確認下:開發者選項、USB調試、允許該計算機調試

2. 手機打開chrome app

在手機中打開chrome,這時電腦的chrome inspect中會出現輸網址的地方。

3. 測試手機瀏覽的控制

在電腦chrome inspect輸入框中隨便輸個在線網址,點Open,手機chrome就會打開該頁面。用電腦chrome可以控制刷新、關閉,但是用來調試的inspect點開是空白,應該是被墻了。

第三步:用手機測試本地頁面

1. 開啟本地服務器

對的,很遺憾手機chrome不能進行靜態頁面的調試。

所以必須開本地服務器,所幸現在有gulp+webserver,用法這裏不講了。

總之,完成這壹點後,妳應該在電腦上用 http://localhost 來瀏覽網頁了。

2. 電腦chrome開啟端口轉發

在chrome inspect中點“Port forwarding...”—>把端口和localhost鏈接輸進去(比如8000和localhost:8000)—>勾選“Enable port forwarding”—>Done

3. 打開手機瀏覽localhost

如:輸入http://localhost:8000 點Open

這樣手機就能打開頁面了。

  • 上一篇:python數據分析的包 哪些
  • 下一篇:Mc編程貓
  • copyright 2024編程學習大全網