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