溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的

發(fā)布時(shí)間:2021-11-17 15:12:19 來源:億速云 閱讀:143 作者:柒染 欄目:web開發(fā)

不依賴瀏覽器控制臺(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)試。

          不依賴瀏覽器控制臺(tái)的JavaScript斷點(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。    
 不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的

好了,簡單三步就可以在瀏覽器里測試了。這個(gè)ui/index.html操作方法如下:

不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的

不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的

是不是很簡單:),下面我們來給出實(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)容。

不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的

但是此時(shí)直接在瀏覽器中訪問abc.com是不行的,需要先通過fiddler等工具將abc.com指向本地IP(參考Step 1的)。

不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的

然后再訪問   http://10.64.53.85:8000/ui/index.html 打開控制器;訪問:  http://abc.com/a.html 訪問資源內(nèi)容。

不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的

不難發(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)圖】

不依賴瀏覽器控制臺(tái)的JavaScript斷點(diǎn)調(diào)試方法是怎樣的

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í)。

向AI問一下細(xì)節(jié)

免責(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)容。

AI