国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
Chrome - JavaScript調(diào)試技巧總結(jié)(瀏覽器調(diào)試JS)
內(nèi)置了開(kāi)發(fā)者工具(Windows 系統(tǒng)中按下 F12 即可開(kāi)啟),可以讓我們方便地對(duì) JavaScript 代碼進(jìn)行調(diào)試。
為方便大家學(xué)習(xí)和使用,本文我對(duì) Chrome 的調(diào)試技巧做個(gè)系統(tǒng)的總結(jié)。
 
1
一、設(shè)置斷點(diǎn)

有兩種方法可以給代碼添加斷點(diǎn)

方法1:在 Source 內(nèi)容區(qū)設(shè)置

(1)找到要調(diào)試的文件,然后在內(nèi)容源代碼左側(cè)的代碼標(biāo)記行處點(diǎn)擊,即可打上一個(gè)斷點(diǎn)。
(2)刷新瀏覽器,當(dāng)頁(yè)面代碼運(yùn)行到斷點(diǎn)處便會(huì)暫停執(zhí)行。

 

方法2:在 js 文件中設(shè)置

(1)我們?cè)?nbsp;js 源文件中需要執(zhí)行斷點(diǎn)操作的代碼前加上 debugger。
(2)刷新瀏覽器,當(dāng)頁(yè)面代碼運(yùn)行到斷點(diǎn)處會(huì)暫停執(zhí)行

1
二、設(shè)置斷點(diǎn)執(zhí)行條件
(1)右鍵點(diǎn)擊設(shè)置的斷點(diǎn),選擇 Edit breakpoint...
(2)輸入執(zhí)行斷點(diǎn)的條件表達(dá)式,當(dāng)表達(dá)式為 true 時(shí)斷點(diǎn)調(diào)試才會(huì)生效。有了條件斷點(diǎn),我們?cè)谡{(diào)試代碼的時(shí)候能夠更加精確地控制代碼斷點(diǎn)的時(shí)機(jī)
1
三、Call Stack 調(diào)用棧

1,界面介紹

(1)當(dāng)斷點(diǎn)執(zhí)行到某一程序塊處停下來(lái)后,右側(cè)調(diào)試區(qū)的 Call Stack 會(huì)顯示當(dāng)前斷點(diǎn)所處的方法調(diào)用棧,從上到下由最新調(diào)用處依次往下排列。
(2)Call Stack 列表的下方是 Scope Variables 列表,可以查看此時(shí)局部變量和全局變量的值。

2,使用技巧

(1)調(diào)試時(shí)當(dāng)前調(diào)用在哪里,Call Stack 列表里的箭頭便會(huì)指向哪里。同時(shí)當(dāng)我們點(diǎn)擊調(diào)用棧列表上的任意一處,便會(huì)調(diào)到相應(yīng)的位置,方便我們?cè)倩仡^去看看代碼。
(2)如果想重新從某個(gè)調(diào)用方法處執(zhí)行,可以右鍵選擇 Restart Frame。斷點(diǎn)就會(huì)跳到此處開(kāi)頭重新執(zhí)行,同時(shí) Scope 中的變量值也會(huì)依據(jù)代碼重新更改,這樣就可以方便地回退來(lái)重新調(diào)試,省得我們?cè)僦匦滤⑿抡麄€(gè)頁(yè)面。

 

1
四、DOM 元素設(shè)置斷點(diǎn) 

1,DOM Breakpoints 介紹

除了可以給 js 代碼設(shè)置斷點(diǎn),我們還可以給 DOM 元素設(shè)置斷點(diǎn)。因?yàn)槲覀冇袝r(shí)候需要監(jiān)聽(tīng)和查看某個(gè)元素的變化、賦值情況,但是并是不太關(guān)心哪一段代碼對(duì)它做的修改,只想看看它的變化情況,那么可以給它來(lái)個(gè)監(jiān)聽(tīng)事件。

2,使用說(shuō)明

(1)我們右鍵點(diǎn)擊需要監(jiān)聽(tīng)的 DOM 節(jié)點(diǎn),選擇“Break On...”菜單項(xiàng),在出現(xiàn)的三個(gè)選擇項(xiàng)中任選一個(gè)便會(huì)添加斷點(diǎn)。
(2)這三個(gè)選擇項(xiàng)分別對(duì)應(yīng)如下三種修改情況:
  • suntree modifications:子節(jié)點(diǎn)修改
  • attribute modifications:自身屬性修改
  • node removal:自身節(jié)點(diǎn)被刪除

(3)設(shè)置好斷點(diǎn)后,當(dāng) DOM 元素要被修改時(shí),代碼就會(huì)在自動(dòng)停留在修改處。

 

1
五、統(tǒng)一管理所有斷點(diǎn)
我們可能會(huì)在不同的文件、不同的位置添加許多斷點(diǎn)。這些都會(huì)顯示在 Source 頁(yè)面里的 Breakpoints、DOM Breakpoints 區(qū)域中:
  • Breakpoints:js 斷點(diǎn)
  • DOM Breakpoints:DOM 元素?cái)帱c(diǎn)
點(diǎn)擊斷點(diǎn)前面的復(fù)選框可以暫時(shí)“去掉/加上”該斷點(diǎn),點(diǎn)擊斷點(diǎn)可跳轉(zhuǎn)到相應(yīng)的程序代碼處

1
六、快捷鍵

1,快速定位文件

使用快捷鍵:ctrl + p

2,快速定位文件中成員函數(shù)

使用快捷鍵:ctrl + shif + o

 

1
七、格式化

1,js代碼格式化

為了減小體積,有時(shí)候我們發(fā)現(xiàn)一些 js 源碼都是壓縮之后的代碼,我們可以點(diǎn)擊下面的 {} 大括號(hào)按鈕將代碼轉(zhuǎn)成可讀格式。

2,格式化返回的 JSON 數(shù)據(jù)

(1)有時(shí)我們調(diào)試程序時(shí)需要查看服務(wù)端返回的數(shù)據(jù)內(nèi)容,這個(gè)在 Network 選項(xiàng)卡中就可看到。但如果后臺(tái)返回的是沒(méi)有格式化的 JSON 數(shù)據(jù),查看起來(lái)會(huì)異常痛苦
(2)我們可以通過(guò) chrome 控制臺(tái)的 copy 接口來(lái)實(shí)現(xiàn) JSON 數(shù)據(jù)的格式化。
(3)首先請(qǐng)求項(xiàng)的右鍵菜單中選擇 Copy Response 拷貝響應(yīng)內(nèi)容。

(4)命令行中先輸入 copy(),然后將拷貝的數(shù)據(jù)粘貼到括號(hào)中

(5)回車后 copy 接口便會(huì)自動(dòng)將數(shù)據(jù)進(jìn)行格式化,并保存到剪貼板中。我們將其粘貼到文本編輯器中就可以看到效果:

1
八、使用 Snippets 編寫(xiě)代碼片段

1,Snippets 介紹

(1)在 Souces 頁(yè)面下的 Snippets 欄目中,我們可以隨時(shí)進(jìn)行 JS 代碼的編寫(xiě),運(yùn)行結(jié)果會(huì)打印到控制臺(tái)。
(2)代碼是全局保存的,我們?cè)谌魏雾?yè)面,包括新建標(biāo)簽頁(yè),都可以查看或運(yùn)行這些代碼。我們不再需要為了運(yùn)行一小段 JS 代碼而新建一個(gè) HTML 頁(yè)面。
(3)Snippets 的方便之處在于,我們只需要打開(kāi) Chrome 就可以編寫(xiě)一份任意頁(yè)面都可以運(yùn)行的JS代碼

2,使用樣例

(1)點(diǎn)擊“New Snippet”按鈕,創(chuàng)建一個(gè)新的片段文件

(2)在代碼區(qū)域輸入 js 代碼

(3)按下“Ctrl + Enter”或者點(diǎn)擊右下方的按鈕執(zhí)行代碼,可以看到代碼執(zhí)行成功且反應(yīng)到當(dāng)前頁(yè)面上了。

1
九、Async 調(diào)試

  Chrome 調(diào)試器的 Async 模式是為調(diào)試異步函數(shù)所設(shè)計(jì)一個(gè)功能

1,測(cè)試代碼

下面是一段使用 Promise 的代碼:
//做飯function cook(){    console.log('開(kāi)始做飯。');    var p = new Promise(function(resolve, reject){  //做一些異步操作        setTimeout(function(){            console.log('做飯完畢!');            resolve('雞蛋炒飯');        }, 1000);    });    return p;} //吃飯function eat(data){    console.log('開(kāi)始吃飯:' + data);    var p = new Promise(function(resolve, reject){ //做一些異步操作        setTimeout(function(){            console.log('吃飯完畢!');            resolve('用過(guò)的碗和筷子');        }, 2000);    });    return p;} cook().then(eat).then(function(data){    console.log(data);});

2,代碼調(diào)試

(1)我們都知道 Promise 的回調(diào)是異步執(zhí)行的,默認(rèn)情況下調(diào)用棧只記錄到回調(diào)函數(shù)本身,我們無(wú)法找到代碼執(zhí)行的順序,這給我們調(diào)試帶來(lái)巨大的困難。

(2)開(kāi)啟 Async 模式后,異步函數(shù)之前的調(diào)用棧都會(huì)被記錄下來(lái),而且調(diào)用棧中代碼執(zhí)行狀態(tài)也得到了保留。

 

分類: chrome
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
一探前端開(kāi)發(fā)中的JS調(diào)試技巧
Chrome 調(diào)試技巧
似水流年 ? Chrome調(diào)試大全
Chrome的JS調(diào)試工具
Chrome調(diào)試
使用DOM Breakpoints找到修改屬性的Javascript代碼
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服