建站
咨詢
售后
建站咨詢
新聞中心
隨著瀏覽器的逐漸強(qiáng)大，絕大多數(shù)情況下的代碼調(diào)試都是可以通過(guò)瀏覽器自帶的一些調(diào)試工具進(jìn)行解決。然而對(duì)于一些特殊情況仍然無(wú)法享受到瀏覽器的強(qiáng)大 調(diào)試能力，比如QQ客戶端內(nèi)嵌web的調(diào)試（雖然說(shuō)QQ目前已經(jīng)可以編譯開(kāi)發(fā)者工具，但是仍需要安裝指定文件包或工具）、非正常瀏覽器web、移動(dòng)場(chǎng)景下 的內(nèi)嵌等場(chǎng)景。 基于這個(gè)場(chǎng)景我們團(tuán)隊(duì)已經(jīng)在nohost下引入了weinre，并得到了廣泛的使用。 但是weinre是有一定的局限性，只能做到console.log和DOM查看等，不能支持?jǐn)帱c(diǎn)調(diào)試。這里之前老文章已經(jīng)有過(guò)一些描述，可參見(jiàn) http://www.webryan.net/2013/04/talk-about-remote-debugging-on-mobile-phone/。
本文重點(diǎn)講解不依賴瀏覽器控制臺(tái)能力，單純通過(guò)JavaScript方式來(lái)實(shí)現(xiàn)斷點(diǎn)調(diào)試的能力，為大家解決問(wèn)題提供另一種思路和方法。首先會(huì)給出工具的使用方法，讓大家有感性認(rèn)識(shí)，然后再講解具體實(shí)現(xiàn)原理。
【測(cè)試使用】
| 1、cmd命令下執(zhí)行”npm install breakpoint -g”（npm安裝不贅述，-g為了全局安裝且注冊(cè)bin命令） |
| 2、cmd命令行下執(zhí)行”breakpoint”（會(huì)給出使用幫助，并默認(rèn)啟動(dòng)測(cè)試目錄：可以直接通過(guò)URL訪問(wèn)）； |
| 3、開(kāi)啟兩個(gè)現(xiàn)代瀏覽器如chrome和safari，分別打開(kāi)提示的兩個(gè)URL。 |
好了，簡(jiǎn)單三步就可以在瀏覽器里測(cè)試了。這個(gè)ui/index.html操作方法如下：
是不是很簡(jiǎn)單：），下面我們來(lái)給出實(shí)戰(zhàn)例子；
【實(shí)戰(zhàn)使用】
【參數(shù)說(shuō)明】
Usage: breakpoint -d htdocsDir -r passbyRule
-d 指定本地靜態(tài)目錄，這里的HTML文件head里會(huì)被注入調(diào)試腳本。
-r 指定透?jìng)饕?guī)則，通常用于將CGI請(qǐng)求透?jìng)鹘o現(xiàn)網(wǎng)服務(wù)器；如果是需要透?jìng)鹘o指定服務(wù)器，則需要在本地hosts文件中做一下指向；
-h 當(dāng)存在多網(wǎng)卡的情況下，可以使用-h指定某一IP；
breakpoint執(zhí)行后會(huì)在本地啟用3個(gè)端口，80（用于提供訪問(wèn)服務(wù)）、8000（用于控制器）、8500（用于文件重寫(xiě)）；
【實(shí)戰(zhàn)舉例】
假設(shè)我們域名是：abc.com；本地靜態(tài)文件（HTML、CSS和JS等）目錄是：e:\svn\trunk\htdocs\，那么可以通 過(guò)”breakpoint -d e:\svn\trunk\htdocs”將所有的請(qǐng)求轉(zhuǎn)發(fā)到本地目錄，比如：http://abc.com/a.html會(huì)返回本地目錄e:\svn \trunk\htdocs\a.html的內(nèi)容。
但是此時(shí)直接在瀏覽器中訪問(wèn)abc.com是不行的，需要先通過(guò)fiddler等工具將abc.com指向本地IP（參考Step 1的）。
然后再訪問(wèn) http://10.64.53.85:8000/ui/index.html 打開(kāi)控制器；訪問(wèn)： http://abc.com/a.html 訪問(wèn)資源內(nèi)容。
不難發(fā)現(xiàn)，訪問(wèn)內(nèi)容已經(jīng)成功走了本地，且自動(dòng)在頭部加上了調(diào)試腳本，這就搞定了。
但是往往調(diào)試的時(shí)候，我們又希望某些文件訪問(wèn)現(xiàn)網(wǎng)資源或者其他服務(wù)器的資源，這個(gè)時(shí)候，可以通過(guò)-r參數(shù)來(lái)正則匹配放過(guò)對(duì)應(yīng)的請(qǐng)求。比 如：abc.com指向本地IP后，希望abc.com/cgi-bin/下的所有請(qǐng)求都發(fā)送到現(xiàn)網(wǎng)。 那么只需要執(zhí)行”breakpoint -d e:\svn\trunk\htdocs\ -r cgi-bin”即可。
【原理分析】
如何通過(guò)JavaScript來(lái)實(shí)現(xiàn)斷點(diǎn)調(diào)試？
斷點(diǎn)調(diào)試的核心問(wèn)題就是要讓腳本在某行代碼暫停執(zhí)行，那么Aleksander Kmetec同學(xué)給出的解決方案是：通過(guò)在每行JavaScript前面加一個(gè)斷點(diǎn)函數(shù)。而斷點(diǎn)函數(shù)是通過(guò)AJAX的同步屬性來(lái)阻塞瀏覽器。
那么JavaScript修改前后的情況如下：
| 修改前 | 修改后 |
|
var a = 1; var b =2; function test(){ var c = ‘init’; c=’change’; } |
Break();var a = 1; Break();var b =2; Break(); function test(){ Break(); var c = ‘init’; Break(); c=’change’; } |
這樣通過(guò)break函數(shù)里發(fā)起同步AJAX請(qǐng)求即可確定斷點(diǎn)位置和阻塞瀏覽器執(zhí)行后面的腳本了，真是很聰明的做法。
【breakpoint結(jié)構(gòu)圖】
1、通過(guò)瀏覽器發(fā)起網(wǎng)頁(yè)請(qǐng)求；
2、請(qǐng)求通過(guò)fiddler等方式指向到我們的重寫(xiě)服務(wù)，重寫(xiě)服務(wù)根據(jù)請(qǐng)求鏈接來(lái)處理流程。如果是匹配了-r的正則規(guī)則，則直接轉(zhuǎn)發(fā)到現(xiàn)網(wǎng)服務(wù)器，否則則請(qǐng)求本地-d目錄下的內(nèi)容。
3、透?jìng)鞯膬?nèi)容直接不處理，其他的內(nèi)容會(huì)判斷：1、HTML文件則會(huì)默認(rèn)在head***行加入調(diào)試腳本的script（該腳本包括調(diào)試所需要的方法，如break();） 2、JS文件則會(huì)在每一行腳本前增加break();函數(shù)的調(diào)用。
4、重寫(xiě)服務(wù)返回?cái)?shù)據(jù)給瀏覽器
5、當(dāng)瀏覽器執(zhí)行JS的時(shí)候，會(huì)先遇到break()；則發(fā)起同步的XHR請(qǐng)求，阻塞住瀏覽器的執(zhí)行。
6、如果通過(guò)調(diào)試服務(wù)UI界面設(shè)置過(guò)斷點(diǎn)，調(diào)試服務(wù)則會(huì)hold住在break()里的XHR請(qǐng)求，直到調(diào)試服務(wù)UI發(fā)出新的命令（比如跳過(guò)、下一行等）
原文練級(jí)：
網(wǎng)站欄目：不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法
當(dāng)前URL：http://fisionsoft.com.cn/article/djippos.html
