webstorm實現手機預覽頁面

效果：在webstorm中開發頁面，複製該頁面在電腦中的瀏覽網址，發給手機，在手機上點擊連接，能夠直接訪問本地開發的頁面。而且，電腦上修改後保存，手機上刷新便可看到效果。

步驟：

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

 

二、選擇 Deployment，按照下圖配置。

 

三、剛建立的 myTest 的第一個菜單 Connection ，按下圖說明配置。

 

 四、myTest 的第二個菜單 Mappings ，通常不用設置，打開看下，和 Connection 中的 Folder 設置一致就行。

 

 

五、點擊設置面板右下角的 Apply ，而後點擊 OK 關閉面板。

 

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

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

 

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