關於app上頁面和js的調試

標籤：

不久前折騰了一晚上關於app上的頁面和js的調試:

首先得準備幾個比較比較常用的工具：

1、chrome(這個都沒有你還幹啥fe呀)

2、Fiddler(抓包神器,基本也是必備咯)

3、sublime(編輯器至少得有一個吧)

then?

開啟Fiddler,配置設定啥的都不在這裡說了，篇幅有點長，PS：（不過比較方便的一個東西就是Fiddler上可以配hosts，不用再hosts檔案下去配hosts了）

這裡說一下app裡面的調試和一般的M端web調試的不同，在M端調試時把頁面和js代理到本地修改就ok了，但是app裡面就不一樣了，app裡面的頁面和js很倔強，走緩衝走的很嚴重，所以在這裡我們簡單敘述一下app的頁面和js調試；

then?

假如前面的工具和配置都OK了，能正常抓包

一、頁面html調試

1、抓包：開啟Fiddler，用手機訪問需要調試的頁面，這時Fiddler上面會抓到一個記錄，如：

then?

2、ctrl+u拷貝出抓到的地址放到chrome裡面訪問，這樣就可以看到手機上面訪問的頁面了，then在chrome裡面再ctrl+u就可以查看頁面源碼，把源碼copy出來單獨起一個頁面，在Fiddler裡面把線上訪問的頁面代理到本地，注意這裡我們把單起的頁面的title改一下方便我們觀察是否代理本地成功了：

3、我們在代理的時候需要注意到的是在app裡面訪問Fiddler抓到的地址的最後包括os和webaddress，如果是安卓的機器的話你需要手動吧os改成ios才能正確訪問；

另外一個問題就是webaddress在每次訪問的時候都會動態改變，所以我們在代理的時候不要把後面的webaddress=xxxxxx加上，否者，你懂得

4、像上面的這樣代理成功後訪問app上面的頁面，......頁面咋沒變? 當然沒變咯我們在做一下處理，改一下頁面顯示(在代理到本地的html頁面上的顯示部分加點東西)，像這樣：

好了頁面代理差不多就是這樣，你可以在本地任意修改你的頁面了，app上也會有和chrome同步的變化

then?

二、app上js的調試：

1、首先你的指導你要調試那個js，也就是那個js出問題了，這個定位問題的速度需要經驗，不如說對全站商務邏輯比較熟悉的話，一看就知道是啥出了問題，是哪個js出了問題

一般來說我們是通過bug的view表現頁面元素去找對應的id或者class，或者知道一些實現的方法名/參數名，然後通過在chrome裡面搜尋對應的js

2、ok，找到相應的js後又把它代理到本地，這裡需要注意的是我們一般去svn找到最新的代碼down下來放到本地，然後把線上的js代理到本地，

new.js是從svn上down下來的mclient.publish2.js，

3、代理好了之後，在new.js裡面加點可以證明代理好了的代碼，alert()最好，為啥?因為app上不認console，試著在chrome上看看(當然這裡也需要注意到一點就是為了方便看到js是否真正代理到本地了，我們也需要像html一樣做，在js第一行做一些標記，表明這個不是線上的js)，被嚇到了吧，啥反應都沒得；為什麼呢？

模板上載入的js明明是：

<script type="text/javascript" charset="utf-8" src="http://pic2.58.com/m58/app58/m_static/js/mclient.publish2.js?cachevers=575"></script>

也把它代理到了本地：

為什麼就不行呢?這就是app上比較倔強的地方，由於app裡面會緩衝已經載入好了的js，app上面也不能像瀏覽器一樣可以清除緩衝和強制重新整理，所以基本都是通過?加上版本號碼來更新js(這個不同公司更新方法不同，具體的請移步張雲龍老師的blog靜態資源的緩衝更新)，版本號碼一致的話，app將不會更新這個js(不會發出請求)，所以代理的js不會生效，

解決辦法就是讓它更新，在模板裡面把載入的js版本號碼改變一下：

ok，改好了，然後又試試!......還是不行，為什麼，應該大家都懂，當時搗騰這個的時候進入了一個誤區，代理的時候的地址帶了版本號碼575的，然而模板裡面請求的是帶版本號碼576的js，很明顯代理不成功嘛，

then

解決辦法有兩個：

a、把代理的時候的地址帶了版本號碼575改成576，這個辦法比較挫，因為每次修改完本地的new.js你需要看到修改後的效果你都需要做兩件事情，1就是把模板裡面載入的js版本號碼增加一下，2就是需要把代理的版本號碼也改成和模板載入的js版本號碼一致

b、代理的時候不帶版本號碼：

這樣的話就不需要你每次修改本地js都去改代理的js版本號碼了，而只需要把模板上的版本號碼增加一下就ok了

then?

end

文章沒review，有錯請大家指出

 

關於app上頁面和js的調試