1. 程式人生 > >webstorm實現手機預覽頁面

webstorm實現手機預覽頁面

app 9.png ima ppi microsoft col RM folder bsp

效果:在webstorm中開發頁面,復制該頁面在電腦中的瀏覽網址,發給手機,在手機上點擊鏈接,可以直接訪問本地開發的頁面。並且,電腦上修改後保存,手機上刷新即可看到效果。

步驟:

1、webstorm菜單欄,點擊 File ——> settings... ,選擇 Debugger,然後按下圖紅框裏的配置。

技術分享圖片

2、選擇 Deployment,按照下圖配置。

技術分享圖片

3、剛創建的 myTest 的第一個菜單 Connection ,按下圖說明配置。

技術分享圖片

4、myTest 的第二個菜單 Mappings ,一般不用設置,打開看下,和 Connection 中的 Folder 設置一致就行。

技術分享圖片

5、點擊設置面板右下角的 Apply ,然後點擊 OK 關閉面板。

測試:在webstorm中編輯的頁面 test.html,本地打開路徑顯示是 http://192.168.100.3:8080/test/page/test.html?_ijt=ruka0gbhvkrqree8sj0f2d25c3

復制這個地址,發送手機,在手機上打開,即可訪問電腦上的 test.html 。webstorm中修改代碼並保存,手機上刷新,就能看到修改後的效果。

註意電腦和手機必須是在同一局域網內。

webstorm實現手機預覽頁面