您好,登錄后才能下訂單哦!
不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的,針對這個(gè)問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
隨著瀏覽器的逐漸強(qiáng)大,絕大多數(shù)情況下的代碼調(diào)試都是可以通過瀏覽器自帶的一些調(diào)試工具進(jìn)行解決。然而對于一些特殊情況仍然無法享受到瀏覽器的強(qiáng)大 調(diào)試能力,比如QQ客戶端內(nèi)嵌web的調(diào)試(雖然說QQ目前已經(jīng)可以編譯開發(fā)者工具,但是仍需要安裝指定文件包或工具)、非正常瀏覽器web、移動(dòng)場景下 的內(nèi)嵌等場景。 基于這個(gè)場景我們團(tuán)隊(duì)已經(jīng)在nohost下引入了weinre,并得到了廣泛的使用。 但是weinre是有一定的局限性,只能做到console.log和DOM查看等,不能支持?jǐn)帱c(diǎn)調(diào)試。
本文重點(diǎn)講解不依賴瀏覽器控制臺(tái)能力,單純通過JavaScript方式來實(shí)現(xiàn)斷點(diǎn)調(diào)試的能力,為大家解決問題提供另一種思路和方法。首先會(huì)給出工具的使用方法,讓大家有感性認(rèn)識(shí),然后再講解具體實(shí)現(xiàn)原理。
【測試使用】
1、cmd命令下執(zhí)行”npm install breakpoint -g”(npm安裝不贅述,-g為了全局安裝且注冊bin命令) |
2、cmd命令行下執(zhí)行”breakpoint”(會(huì)給出使用幫助,并默認(rèn)啟動(dòng)測試目錄:可以直接通過URL訪問); |
3、開啟兩個(gè)現(xiàn)代瀏覽器如chrome和safari,分別打開提示的兩個(gè)URL。 |
好了,簡單三步就可以在瀏覽器里測試了。這個(gè)ui/index.html操作方法如下:
是不是很簡單:),下面我們來給出實(shí)戰(zhàn)例子;
【實(shí)戰(zhàn)使用】
【參數(shù)說明】
Usage: breakpoint -d htdocsDir -r passbyRule
-d 指定本地靜態(tài)目錄,這里的HTML文件head里會(huì)被注入調(diào)試腳本。
-r 指定透傳規(guī)則,通常用于將CGI請求透傳給現(xiàn)網(wǎng)服務(wù)器;如果是需要透傳給指定服務(wù)器,則需要在本地hosts文件中做一下指向;
-h 當(dāng)存在多網(wǎng)卡的情況下,可以使用-h指定某一IP;
breakpoint執(zhí)行后會(huì)在本地啟用3個(gè)端口,80(用于提供訪問服務(wù))、8000(用于控制器)、8500(用于文件重寫);
【實(shí)戰(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會(huì)返回本地目錄e:\svn \trunk\htdocs\a.html的內(nèi)容。
但是此時(shí)直接在瀏覽器中訪問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)成功走了本地,且自動(dòng)在頭部加上了調(diào)試腳本,這就搞定了。
但是往往調(diào)試的時(shí)候,我們又希望某些文件訪問現(xiàn)網(wǎng)資源或者其他服務(wù)器的資源,這個(gè)時(shí)候,可以通過-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來實(shí)現(xiàn)斷點(diǎn)調(diào)試?
斷點(diǎn)調(diào)試的核心問題就是要讓腳本在某行代碼暫停執(zhí)行,那么Aleksander Kmetec同學(xué)給出的解決方案是:通過在每行JavaScript前面加一個(gè)斷點(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)容會(huì)判斷:1、HTML文件則會(huì)默認(rèn)在head***行加入調(diào)試腳本的script(該腳本包括調(diào)試所需要的方法,如break();) 2、JS文件則會(huì)在每一行腳本前增加break();函數(shù)的調(diào)用。
4、重寫服務(wù)返回?cái)?shù)據(jù)給瀏覽器
5、當(dāng)瀏覽器執(zhí)行JS的時(shí)候,會(huì)先遇到break();則發(fā)起同步的XHR請求,阻塞住瀏覽器的執(zhí)行。
6、如果通過調(diào)試服務(wù)UI界面設(shè)置過斷點(diǎn),調(diào)試服務(wù)則會(huì)hold住在break()里的XHR請求,直到調(diào)試服務(wù)UI發(fā)出新的命令(比如跳過、下一行等)
關(guān)于不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。