最近小編一直在犯病（拖延癥）中图柏，沒能更新過相關文章序六。也是最近小編在忙者寫公司的Android項目，現(xiàn)在項目耗時半月左右蚤吹，小編的Android商城模塊已經(jīng)完成例诀，所有趁著空閑實現(xiàn)總結(jié)下在商城模塊下面使用的原生和html之間的通信遇到的問題随抠，以及js調(diào)試報錯這一塊，主要針對iOS繁涂，小編Android技能還是有限拱她，所以只能下次更新嘍，期待與你們相遇扔罪。

先介紹下公司的項目吧
公司的項目是個秉沼，以舊換新的購物回收的項目，主要功能是兩塊：
1.舊貨回收矿酵，抵扣G幣（虛擬幣）
2.商城模塊唬复，京東發(fā)貨，價格抵扣G幣全肮。

其實公司項目沒什么新穎之處敞咧，就是回收舊貨，以舊換新辜腺，好點的衣服休建、書籍等會捐出去，算了不扯這些了评疗，和咱們的技術(shù)沒什么關系丰包，我們還是聊下技術(shù)吧，現(xiàn)在公司有專一的網(wǎng)站壤巷，也同樣有手機站邑彪，App等。因為App的更新是需要審核的胧华，而公司的活動是多變寄症，只能使用了Native+html結(jié)合來寫活動頁面，但是同一個后臺去兼容iOS矩动，Android有巧、手機站三個板塊，后臺寫的js的調(diào)試就是哥比較單單的憂傷了悲没。特變是手機站要兼容兩個手機系統(tǒng)ios 和Android篮迎。

何為手機站##

個人理解：就是使用了手機加載網(wǎng)頁。公司使用的是微信微站一類的示姿。利用微信公眾號甜橱，進入網(wǎng)頁。（目前還沒開發(fā)小程序栈戳，正在準備）

iPhone手機調(diào)試js##

大家都知道岂傲，網(wǎng)頁上面的展示效果、動畫等子檀，都是需要用的js來實現(xiàn)的镊掖，但是我們把網(wǎng)頁運行都愛瀏覽器的時候乃戈，并不能看到debug和斷點模式，調(diào)試起來就有點淡淡的憂傷了,現(xiàn)在我來教大家來實現(xiàn)html加載瀏覽器的時候亩进，可是使用debug和斷點模式.

準備材料：MacBook Pro 電腦一個症虑，iPhone 手機一部

1.首先打開手機的開發(fā)著模式，只要手機連接到Pro上面以后归薛，開發(fā)模式就會顯示出來谍憔。（一般的情況是不顯示的，插進電腦后苟翻，就會顯示）

Paste_Image.png

2.再打開Safari瀏覽器韵卤，打開Safair的開發(fā)模式

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

3，在手機上使用Safair瀏覽器打開你想調(diào)試的html頁面（小編大家的是我們手機站首頁）

Paste_Image.png

4.打開pro上面Safair瀏覽器的的開發(fā)模式

Paste_Image.png

5崇猫，這個時候在你電腦上面就會出現(xiàn)一個彈框

Paste_Image.png

解釋下什么意思：
1.當前手機Safair瀏覽器顯示的頁面的所有內(nèi)容標簽寫法.
2.當前頁面需要下載的js和css所有的文件沈条。
3.監(jiān)聽你每次請求的時間，完成情況等诅炉。
4.請求所耗的時間蜡歹。
5.調(diào)試器，就是我們的重點涕烧≡露可以打斷點。（下面詳解）
6.儲存空間议纯，當前瀏覽器下面是否時有數(shù)據(jù)庫儲存父款。
7.控制臺，就是debug模式瞻凤，打印的東西憨攒，錯誤信息。
8.全站搜索阀参。
9.錯誤,必須解決的 就是加載當前頁面鎖出現(xiàn)的錯誤肝集。（小遍的全部是超時）
10.警告,不解決也沒事，你懂的蛛壳。

調(diào)試器界面

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

2.手機站調(diào)試##

因為手機站是使用微信內(nèi)置瀏覽器打開的html衙荐。所以調(diào)試起來就比較麻煩捞挥，有的明明在Safair上面可以完全使用，但是就是在微信里面打開會報錯赫模，這就有淡淡的憂傷了树肃，其實就是微信那些孩子改了些東西，沒辦法瀑罗，那也得調(diào)試胸嘴，不然飯都沒得吃。幸好微信前段時間出了開發(fā)小程序的開發(fā)工具斩祭，同樣也是微信瀏覽器的測試工具劣像。
沒錯，就是玩意兒摧玫，剛開始還不讓玩只能破解版耳奕，但是現(xiàn)在好了，隨便可以下載了诬像。

Paste_Image.png

Paste_Image.png

Paste_Image.png

配置網(wǎng)絡信息

Paste_Image.png

Paste_Image.png

Paste_Image.png

看到下面的Response body 吧溃论，也是可以查看響應體的。

手機站調(diào)試Android手機###

Paste_Image.png

誰用X5 Blink 調(diào)試必須要先打開TBS內(nèi)核調(diào)試功能痘昌，掃二維碼钥勋，設置打開就可以了。調(diào)試的界面就和Safait其實是一樣的辆苔。

Paste_Image.png

重要申請說三遍算灸，###

設置代理后要重啟微信，不調(diào)試要關閉代理驻啤。

設置代理后要重啟微信菲驴，不調(diào)試要關閉代理。

設置代理后要重啟微信骑冗，不調(diào)試要關閉代理赊瞬。

以上就是小魚兒在手機上調(diào)試js的一些心得和總結(jié)先煎，希望對你有幫助。你的關注巧涧，是小魚兒前進的動力薯蝎。