主頁 > 知識庫 > 詳解Chrome 實用調(diào)試技巧

詳解Chrome 實用調(diào)試技巧

熱門標簽:鶴壁外呼系統(tǒng)公司 外呼系統(tǒng)號顯示星號怎么看 華創(chuàng)e路航彩票銷售點地圖標注 銀川語音外呼系統(tǒng)中心 臨沂ai電銷機器人招商 高德地圖標注常顯 揭陽電腦外呼系統(tǒng)公司 承德地圖標注公司收費 suitecrm 地圖標注

如今Chrome瀏覽器無疑是最受前端青睞的工具,原因除了界面簡潔、大量的應(yīng)用插件,良好的代碼規(guī)范支持、強大的V8解釋器之外,還因為Chrome開發(fā)者工具提供了大量的便捷功能,方便我們前端調(diào)試代碼,我們在日常開發(fā)中是越來越離不開Chrome,是否熟練掌握Chrome調(diào)試技巧恐怕也會成為考量前端技術(shù)水平的標桿。

介紹Chrome調(diào)試技巧的文章很多,本文結(jié)合我自己的開發(fā)經(jīng)驗,希望從實際運用的角度為大家再一次談一談這些功能,也希望對大家都有所幫助和啟發(fā)。

常用快捷鍵

ctrl+p項目中定位文件,以下查找VueJS庫文件:

ctrl+shif+o文件中定位成員函數(shù),以下定位到VueJS的nextTick接口:

Snippets 隨時編寫代碼

Chrome在souces頁面提供snippets一欄,這里我們可以隨時編寫JS代碼,運行結(jié)果會打印到控制臺。代碼是全局保存的,我們在任何頁面,包括新建標簽頁,都可以查看或運行這些代碼。

我們不再需要為了運行一小段JS代碼而新建一個HTML頁面。snippets的方便之處在于,你只需要打開chrome就可以編寫一份任意頁面都可以運行的JS代碼,而且用過snippets都知道,snippets編輯器是可以和sublime text相媲美的。

某次項目中,我需要將100多頁的word文檔導入到頁面中??紤]后續(xù)樣式編寫,頁面的HTML結(jié)構(gòu)如下:

div class="help-page_row">
  h3 class="help-page_title">title/h3>
  p class="help-page_desc">paragraph/p>
  p class="help-page_desc">paragraph/p>
/div>

手工將100多頁的內(nèi)容組合成上面的HTML結(jié)構(gòu)太過耗費時間,不太現(xiàn)實,所以我決定使用JS來將文檔內(nèi)容的標題和段落解析出來,并進行HTML包裝。

由于不需要視圖的支持,在snippets編寫這段代碼是最好的選擇,經(jīng)過幾次調(diào)試修改,最終成果如下:

最后,將Word文檔內(nèi)容復制到snippets中,執(zhí)行解析函數(shù),最終的解析出來的HTML結(jié)果打印到控制臺:

snippets中可以使用控制臺的copy接口,解析結(jié)果直接拷貝到剪切板會更方便

使用snippets來完成這類輕量級工作時,不需要追求代碼的可讀性、可維護性,我們的代碼只需要在大部分場景下能夠正常運行就足夠了。

但為了滿足大部分場景,代碼也是需要反復調(diào)試修改。snippets最實用之處恰恰在于,隨時編寫,隨時調(diào)試,隨時修改!

copy 格式化拷貝

在項目開發(fā)中,我們可能需要將后臺數(shù)據(jù)拷貝到本地,作為本地數(shù)據(jù)進行調(diào)試。

如果后臺返回沒有格式化的JSON數(shù)據(jù),在本地調(diào)試中我們難免會遇到手動修改數(shù)據(jù)的情況,格式不美觀的JSON數(shù)據(jù)修改起來會異常困難。

說到JSON的格式化,我們首先想到的是JSON.stringify的格式化功能,例如四個空格的縮進:

JSON.stringify({name: 'lxjwlt'}, null, 4);

每次格式化JSON數(shù)據(jù)都要編寫這段代碼實在太麻煩,我們可以使用chrome控制臺的copy接口解決這一問題:

1.請求項的右鍵菜單中選擇Copy Response拷貝響應(yīng)內(nèi)容
2.命令行中使用copy接口處理數(shù)據(jù)
3.得到格式化的JSON數(shù)據(jù)

不僅僅是對象,copy接口對任何數(shù)據(jù)都可以進行拷貝,這里利用的是copy在拷貝數(shù)組或?qū)ο筮^程中,對數(shù)據(jù)進行美化的功能

iframe 調(diào)試

如果我們使用Webpack服務(wù)器工具webpack-dev-server訪問項目的開發(fā)頁面,我們會發(fā)現(xiàn),開發(fā)頁面被內(nèi)嵌到了iframe中進行渲染。

由于Chrome控制臺默認的上下文是window.top,控制臺中無法直接對內(nèi)嵌在iframe的開發(fā)頁面進行操作。如果我們想對iframe中的頁面進行DOM操作,或者執(zhí)行類庫API,首先我們通過contentWindow來獲取到iframe的上下文,然后使用with語句進行調(diào)試:

// html
iframe id="iframe">/iframe>

// 控制臺
with (document.getElementById('iframe').contentWindow) {
  inspect(document.body);

  new Vue({ /* ... */ });

  // do something...
}

以上方法可以在任意瀏覽器上使用,但如果我們使用的是Chrome瀏覽器,Chrome控制臺的上下文切換功能會更加方便:

我們將上下文切換到iframe中,控制臺的代碼都會基于iframe的上下文來執(zhí)行。如果你用webpack-dev-server進行調(diào)試,你會感謝這個功能。

debug 毫無用處?

Chrome控制臺提供debug接口,可以傳入一個函數(shù),當這個函數(shù)下次執(zhí)行的時候,調(diào)試器會自動在該函數(shù)中進行斷點調(diào)試。

我們明明可以在代碼中設(shè)置斷點進行調(diào)試,為什么要用到debug來設(shè)置,是為了舍棄鼠標用命令行裝逼而已嗎?

在我看來,debug函數(shù)還提供了定位功能,它能夠讓我們很快的找到指定的函數(shù)。下面演示怎么調(diào)試VueJS的數(shù)據(jù)驅(qū)動,如何找到VueJS數(shù)據(jù)驅(qū)動的代碼入口。

我們都知道,VueJS的數(shù)據(jù)驅(qū)動是通過defineProperty方法對數(shù)據(jù)的getter和setter進行封裝,在這個封裝中實現(xiàn)數(shù)據(jù)變化驅(qū)動視圖同步修改的功能。如果我們想研究VueJS的數(shù)據(jù)驅(qū)動,那么首先要找到封裝getter和setter的地方,我們可以通過debug接口來進行定位。以下用getter方法舉例。

首先我們知道VueJS實例中的數(shù)據(jù)都是映射_data屬性中的值:

var vm = new Vue({
  data: {
    name: 'lxjwlt'
  }
});

vm.name === vm._data.name; // true

所以我們要找的數(shù)據(jù)實際在VueJS實例的_data屬性中。接下來我們通過getOwnPropertyDescriptor獲取數(shù)據(jù)的getter函數(shù):

Object.getOwnPropertyDescriptor(vm._data, "name").get;

找到了getter函數(shù),我們就可以使用debug接口對其進行斷點調(diào)試:

debug(Object.getOwnPropertyDescriptor(vm._data, "name").get)

這樣,當我們獲取vm.name數(shù)據(jù)時,自然會觸發(fā)該數(shù)據(jù)的getter函數(shù),從而觸發(fā)斷點調(diào)試,自動定位到了函數(shù)所在的地方:

日后要調(diào)試或者定位公共API,不妨試試Chrome的debug接口功能!

條件breakpoint

在Chrome中,我們可以給斷點設(shè)置表達式,當表達式為true時斷點調(diào)試才會生效,這就是條件斷點。

有了條件斷點,我們在調(diào)試代碼的時候能夠更加精確的控制代碼斷點的時機,特別是一段代碼會被反復運行的時候,條件斷點能夠跳過大多數(shù)情況,只關(guān)注我們想要的情景。除了這一點外,條件斷點調(diào)試還有另一個用法。

在斷點調(diào)試中,我們往往會檢查當前代碼的執(zhí)行狀態(tài),如果操作比較繁瑣,那么我們可以使用條件斷點添加自動化操作,幫助我們減少一部分工作量。

比如我們要在斷點發(fā)生后查看DOM元素,那么斷點條件可以這么寫:

// 當DOM元素滿足某個條件進行斷點,同時查看這個元素
elem.hasAttribute('class')  inspect(elem);

如果不清楚操作的返回值,我們可以強行讓該操作返回true,從而不影響斷點的條件判斷:

elem.hasAttribute('class')  (inspect(elem) || true);

或者分行寫:

if (elem.hasAttribute('class')) {inspect(elem); true;}

再比如,在VueJS的調(diào)試中,我們往往需要知道VueJS實例的當前狀態(tài),所以每次觸發(fā)斷點調(diào)試時,我們可以先使用clear接口清除控制臺歷史輸出,再將VueJS實例的當前狀態(tài)打印出來:

vm.sum > 4  (clear() || vm.$log() || true);

如果在條件斷點中定義變量,變量是定義到全局作用域上,即window對象上的

Async調(diào)試

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

在Promise被廣泛應(yīng)用的今天,我們都知道,Promise的回調(diào)是異步執(zhí)行的,沒有開啟Async模式前,調(diào)動棧只記錄到回調(diào)函數(shù)本身,我們無法找到代碼執(zhí)行的順序,這給我們調(diào)試帶來巨大的困難。Async模式可以解決這個問題:

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

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:
  • 通過chrome瀏覽器控制臺(Console)進行PHP Debug的方法
  • Chrome開發(fā)者工具9個調(diào)試技巧詳解
  • 使用Chrome調(diào)試JavaScript的斷點設(shè)置和調(diào)試技巧
  • Chrome 調(diào)試技巧(小結(jié))
  • 利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解
  • 基于Python開發(fā)chrome插件的方法分析
  • 9種使用Chrome Firefox 自帶調(diào)試工具調(diào)試javascript技巧
  • Chrome瀏覽器控制臺console使用詳解

標簽:三沙 七臺河 棗莊 許昌 汕尾 咸寧 萊蕪 忻州

巨人網(wǎng)絡(luò)通訊聲明:本文標題《詳解Chrome 實用調(diào)試技巧》,本文關(guān)鍵詞  詳解,Chrome,實用,調(diào)試,技巧,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《詳解Chrome 實用調(diào)試技巧》相關(guān)的同類信息!
  • 本頁收集關(guān)于詳解Chrome 實用調(diào)試技巧的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章