WEB前端開發和調試的工具

前端開發在線課程：

http://yun.lu/student/course/list/8

 

一、HBuilder：WEB開發IDE工具

hbulider，內核是eclipse，Dcloud公司出品；

能夠用builder 同時進行項目的編輯，能夠和eclipse同步同時進行修改。這樣能夠利用到hbulider的強大的h5編輯功能；

從Frontpage、Dreamweaver、UE，到Sublime Text和JetBrains的WebStorm，Web編程的IDE已經更換了幾批。HBuilder是 DCloud（數字天堂）推出一款支持HTML5的Web開發IDE。

快，是HBuilder的最大優點，經過完整的語法提示和 代碼輸入法、代碼塊等，大幅提高 HTML、 js、 css的開發效率。

 

二、chrome瀏覽器：

更多工具

開發者工具

dock side

在控制檯中，輸入信息，則能夠在頁面中顯示出來；

能夠顯示調試的各類信息；

chrome中進行設置：



 

三、firefox瀏覽器

firefox中安裝firebug

firefox中安裝httprequester

 

四、使用HBulider進行web 頁面開發：

 

HBuilder內置的web服務器只支持html靜態頁面，若是是動態頁面，則須要使用外部web服務器；

http://127.0.0.1:8020/mobileWeb/index.html

 

 

五、使用chrome瀏覽器進行調試：

JS調試語句：

console.log(「hello」);／／普通日誌

console.info();／／普通消息

console.warm();／／告警消息

console.error();／／錯誤消息

window.alert();調試語句

直接使用alert也能夠彈出：

alert(‘i love you’);

 

六、外網訪問和反向代理

ip地址：localhost對應的是127.0.0.1

動態分配的192.168.41.126

http://127.0.0.1:8020/mobileWeb/firsthtml5.html

http://192.168.41.126:8020/mobileWeb/firsthtml5.html 也能夠顯示和訪問

 

firefox的二維碼，能夠經過掃描來訪問：



 

 

手機安裝瀏覽器獵豹，掃描二維碼，用微信就能夠掃描此二維碼，顯示出此網頁出來。能夠經過二維碼發佈一個網頁。

 

將本地地址映射爲XXX，發佈到公網上，主要使用ngrok，其實是一個反向代理。

ngrok是一個反向代理，能夠從公網創建一個安全隧道到本地的web服務。ngrok 抓取和分析全部的通過數據，用於以後的檢查和重放。

http://www.cnblogs.com/wangshuo1/p/4502459.html 微信學習總結 02 ngrok 部署本機代碼，使外網能夠訪問。

 

https://ngrok.com/download 這個上面下載，不能使用了。使用國內提供的一個ngrok的服務：

http://www.ittun.com

 

 

當啓動ngrok服務以後，驗證可否訪問tomcat服務；

http://127.0.0.1:8080 這是tomcat對外默認端口

打開ngrok it tun以後：

it tun提供一個服務，http:// XXX.ittun.com 映射爲 http://127.0.0.1:8080

這樣就能夠經過訪問http:// XXX.ittun.com，來訪問內部網頁了，就能夠用手機二維碼來掃描

經過ngrok命令設置監聽的端口

 

啓動ngrok服務，監聽端口：

ngrok 8020

ngrok 8080