webstorm實現手機預覽頁面

來源:互聯網
上載者:User

標籤:配置   png   區域網路   file   dep   TE   編輯   img   一個   

效果:在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實現手機預覽頁面

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.