如何實用便捷的在本地真機除錯WEB端HTML5網頁

池中物willian發表於2014-11-27

先簡單介紹兩款常用但需要一定條件或限制的工具

 


 

1、如果你能FQ

chrome在32版本後就自帶了移動端排程工具,可以在Android直接聯調,但唯一遺憾的是,在我大天朝要FQ後才能行的通,我自己試了後公司好幾個機器聯不上…

 

2、如果你有蘋果電腦和iphone

蘋果電腦上的safari 6.0版本後就可以直接連線iphone手機除錯手機版上safari正在瀏覽的web頁面,前提是你得有個蘋果電腦和iphone手機,但如果你是Android的話,就沒辦法了

 

符合前端B格的“小蘋果”


 

自己在公司裡也是開發Mobile端的HTML5頁面的,也深受除錯頁面之苦,移動端的WEB頁面坑又多,所以用node-webkit技術做了一個客戶端,專門用來除錯,現在每天工作之前都先開啟“小蘋果”

小蘋果用的是node-webkit技術打包成客戶端,其實內部實現都是web 頁面與nodejs技術,所以特別符合前端B格。而且由於用了node-webkit技術,客戶端可以跑在windows和mac電腦上,齊活兒了

小蘋果官方網站

裡邊有下載及安裝和使用的方法

有圖有真像

 

小蘋果的好處


 

1、自帶本地伺服器

無需複雜的配置,不像apache或tomcat,一大堆設定,我們要的就是簡單,小蘋果本地服務其實就是用nodejs來寫的

 

2、開啟就用

將weinre移動端遠端除錯工具整合到了裡邊,開啟就用,可以除錯iphone,android上的web頁面,webview中的頁面一樣可以遠端真機除錯

再也不需要自己到官網下載nodejs,再下載weinre, 再通過配置,再執行 ..

 

 

結束語


 

小蘋果自己在公司的幾個移動端專案中一直用,覺得很簡單實用,所以推薦給大家用用看,當然了,現在只是alpha版本,存在很多不足,請見諒,希望我有時間慢慢把功能與體驗做的更好吧;

本人書讀的不多,技術有限,做的不好請噴,歡迎技術交流..

 

特別感謝:盛大文學

 

 

 

======================================================== 

相關技術資源

weinre: http://people.apache.org/~pmuellr/weinre-docs/latest/

node-webkit: https://github.com/rogerwang/node-webkit

nodejs: http://www.nodejs.org/

======================================================== 

轉載處請註明:部落格園(王二狗)willian12345@126.com

 

相關文章