摘要：而就是告訴程序在那里停下來進(jìn)行單步調(diào)試，俗稱斷點(diǎn)。面向，專為異步而生的斷點(diǎn)調(diào)試功能。中的調(diào)試技巧元素的控制臺書簽開發(fā)者工具和都提供了書簽功能，用于顯示你在元素標(biāo)簽頁或標(biāo)簽頁中最后點(diǎn)擊的元素。
和它的innerHTML，由于document.getElementsByTagName是動態(tài)的，所以這個(gè)得到的結(jié)果肯定是動態(tài)的
對象輸出
var o = {
name:"Lily",
age: 18
};
console.dir(obj);//顯示對象自有屬性和方法
對于多個(gè)對象的集合，你可以這樣，輸出更清晰：
var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];
console.log(stu);
console.table(stu);
成組輸出
//建立一個(gè)參數(shù)組
console.group("start"); //引號里是組名，自己起
console.log("sub1");
console.log("sub1");
console.log("sub1");
console.groupEnd();
函數(shù)計(jì)數(shù)和跟蹤
function fib(n){ //輸出前n個(gè)斐波那契數(shù)列值
if(n == 0) return;
console.count("調(diào)用次數(shù)");//放在函數(shù)里，每當(dāng)這句代碼運(yùn)行輸出所在函數(shù)執(zhí)行次數(shù)
console.trace();//顯示函數(shù)調(diào)用軌跡(訪問調(diào)用棧）
var a = arguments[1] || 1;
var b = arguments[2] || 1;
console.log("fib=" + a);
[a, b] = [b, a + b];
fib(--n, a, b);
}
fib(6);
計(jì)時(shí)
console.time() //計(jì)時(shí)開始
fib(100); //用上述函數(shù)計(jì)算100個(gè)斐波那契數(shù)
console.timeEnd() //計(jì)時(shí)結(jié)束并輸出時(shí)長
console.assert(true, "我錯了");
console.assert(false, "我真的錯了");
性能分析
function F(){
var i = 0;
function f(){
while(i++ == 1000);
}
function g(){
while(i++ == 100000);
}
f();
g();
}
console.profile();
F();
console.profileEnd();
debugger
這個(gè)重量級的是博主最常用的，可能是c++出身，對于單步調(diào)試由衷的熱愛。單步調(diào)試就是點(diǎn)一下，執(zhí)行一句程序，并且可以查看當(dāng)前作用域可見的所有變量和值。而debugger就是告訴程序在那里停下來進(jìn)行單步調(diào)試，俗稱斷點(diǎn)。
右邊按鈕如下：
Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行（程序執(zhí)行到下一斷點(diǎn)停止）。
Step over next function call：執(zhí)行到下一步的函數(shù)調(diào)用（跳到下一行）。
Step into next function call：進(jìn)入當(dāng)前函數(shù)。
Step out of current function：跳出當(dāng)前執(zhí)行函數(shù)。
Deactive/Active all breakpoints：關(guān)閉/開啟所有斷點(diǎn)（不會取消）。
Pause on exceptions：異常情況自動斷點(diǎn)設(shè)置。
其實(shí)右側(cè)還有很多強(qiáng)大的功能
Watch：Watch表達(dá)式
Call Stack: 棧中變量的調(diào)用，這里是遞歸調(diào)用，肯定是在內(nèi)存棧部分調(diào)用。
Scope：當(dāng)前作用域變量觀察。
BreakPoints：當(dāng)前斷點(diǎn)變量觀察。
XHR BreakPoints：面向Ajax，專為異步而生的斷點(diǎn)調(diào)試功能。
DOM BreakPoints：主要包括下列DOM斷點(diǎn)，注冊方式見下圖
當(dāng)節(jié)點(diǎn)屬性發(fā)生變化時(shí)斷點(diǎn)（Break on attributes modifications）
當(dāng)節(jié)點(diǎn)內(nèi)部子節(jié)點(diǎn)變化時(shí)斷點(diǎn)（Break on subtree modifications）
當(dāng)節(jié)點(diǎn)被移除時(shí)斷點(diǎn)（Break on node removal）
Global Listeners：全局事件監(jiān)聽
Event Listener Breakpoints：事件監(jiān)聽器斷點(diǎn)，列出了所有頁面及腳本事件，包括：鼠標(biāo)、鍵盤、動畫、定時(shí)器、XHR等等。
chrome中的調(diào)試技巧
DOM元素的控制臺書簽
Chrome開發(fā)者工具和Firebug都提供了書簽功能，用于顯示你在元素標(biāo)簽頁（Chrome）或HTML標(biāo)簽頁（Firebug）中最后點(diǎn)擊的DOM元素。如果你依次選擇了A元素、B元素和C元素，那么$0 表示C元素，$1 表示B元素，$2 表示A元素。（這個(gè)和正則表達(dá)式的$符號類似，不過順序不同）
如果你想調(diào)試f函數(shù)，用debug(f)語句可以增加這種斷點(diǎn)。
Sources標(biāo)簽頁左側(cè)面板上有一個(gè)代碼片段（Snippet）子標(biāo)簽頁，可用于保存代碼片段，幫你調(diào)試代碼。
可以用Chrome開發(fā)者工具Sources標(biāo)簽頁中的格式化按鈕（Pretty Print Button）格式化壓縮后的代碼。
在Network面板，選擇一個(gè)資源文件，右鍵Copy Response可快速復(fù)制響應(yīng)內(nèi)容。
利用媒體查詢，這個(gè)主要是在Device Mode調(diào)節(jié)不同的分辨率顯示。
選擇Elements，按 Esc > Emulation > Sensors進(jìn)行傳感器模擬。
點(diǎn)擊漸入效果樣式圖標(biāo)（紫色圖標(biāo)），可以預(yù)覽動畫效果，并可對相應(yīng)的貝塞爾曲線(cubic-bezier)進(jìn)行調(diào)節(jié)動畫效果。
在Source中按住Alt鍵并拖動鼠標(biāo)進(jìn)行多列內(nèi)容選擇。
Elements面板右鍵執(zhí)行DOM元素節(jié)點(diǎn)，選擇Force Element State或者點(diǎn)擊右側(cè)Toggle Element State圖標(biāo)可以出發(fā)偽類。
Network面板中選擇一張圖片，在右側(cè)圖片上鼠標(biāo)右鍵選擇copy it as a Data URI,就可以獲取圖片的Data URL (base64編碼)。
通過按住Ctrl鍵可以添加多個(gè)編輯光標(biāo)，同時(shí)對多處進(jìn)行編輯。按下Ctrl + U可以撤銷編輯。
Elements面板右側(cè)的Style編輯器中，點(diǎn)擊顏色十六進(jìn)制編碼前的小色塊，會彈出一個(gè)調(diào)色板。
按下Alt鍵并且鼠標(biāo)雙擊選擇DOM元素前面的箭頭，就會展開該DOM元素下的所有字節(jié)點(diǎn)元素.
快捷鍵：
快速定位到行： 快捷鍵Ctrl+O (Mac:CMD+O ),輸入：行號:列號 來進(jìn)行定位
元素搜索： 快捷鍵Ctrl+F (Mac:CMD+F ),試試在搜索欄輸入ID選擇符或者類選擇符就可以定位到元素啦
調(diào)試過程注意事項(xiàng)
1.避免記錄引用類型
var arr = [{ num: 0 }];
setInterval(function(){
console.log(arr);
arr[0].num += 1;
}, 1000);
這里，第一個(gè)屬性中對象引用的值是不可靠的。當(dāng)你第一次在開發(fā)者工具中顯示這個(gè)屬性時(shí)，num的值就已經(jīng)確定了。之后無論你對同一個(gè)引用重新打開多少次都不會變化。
2.盡可能使用 source map。有時(shí)生產(chǎn)代碼不能使用source map，但不管怎樣，你都不應(yīng)該直接對生產(chǎn)代碼進(jìn)行調(diào)試。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/54583.html
摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。然而，這還不是最嚴(yán)重的，因?yàn)榈恼Z法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有。總結(jié)前端在調(diào)試代碼的時(shí)候，知道開發(fā)工具上的小技巧，可以提高查找問題的效率。
Web前端開發(fā)過程中必然會用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔...
摘要：前言除了我們?nèi)粘Ｊ褂玫恼{(diào)試方法，在中，其含有一些有意思的方法，有助于提高我們的開發(fā)調(diào)試效率。而在調(diào)試中我們可以使用是與來作為選擇器，省去大串代碼，如下。測試用時(shí)測試用時(shí)關(guān)閉界面
前言：除了我們?nèi)粘Ｊ褂玫恼{(diào)試方法，在Chrome中，其含有一些有意思的方法，有助于提高我們的開發(fā)調(diào)試效率。
Sources頁
command + p 文件跳轉(zhuǎn)
使用Sublime的人或習(xí)慣用command +...
摘要：在控制臺中使用，當(dāng)?shù)竭_(dá)傳入的函數(shù)時(shí)，代碼將停止。但除了私有和匿名函數(shù)這可能是找到調(diào)試函數(shù)的最快方法。在控制臺中輸入，當(dāng)調(diào)用時(shí)，將以調(diào)試模式停止屏蔽不相關(guān)代碼現(xiàn)在，我們經(jīng)常在應(yīng)用中引入幾個(gè)庫或框架。
譯者：SlaneYang原文：https://raygun.com/javascript-debugging-tips
以更快的速度和更高的效率來調(diào)試JavaScript
熟悉工具可以讓工具...
CODING 2019-08-21 17:27
評論0
摘要：三如何在線映射到本進(jìn)行調(diào)試在這種情況下，我們大多數(shù)時(shí)間是使用這類抓包工具進(jìn)行路徑的映射，或者是修改文件進(jìn)行域名的跳轉(zhuǎn)。一、如何查看dom元素的事件
某種情況我們在頁面交互上發(fā)現(xiàn)一個(gè)問題，肯定是非常想知道這個(gè)交互觸發(fā)執(zhí)行的入口，這會使我們更直接、快速的進(jìn)行代碼的跟蹤、調(diào)試和分析。其實(shí)在chrome瀏覽器這很簡單就實(shí)現(xiàn)了，如下 百度一下 按鈕 監(jiān)聽的事件列表：如圖，我們就可以很清楚的看出 百度一...
v1 2019-04-23 13:35
評論0
摘要：而就是告訴程序在那里停下來進(jìn)行單步調(diào)試，俗稱斷點(diǎn)。面向，專為異步而生的斷點(diǎn)調(diào)試功能。中的調(diào)試技巧元素的控制臺書簽開發(fā)者工具和都提供了書簽功能，用于顯示你在元素標(biāo)簽頁或標(biāo)簽頁中最后點(diǎn)擊的元素。
寫在前面本文包括瀏覽器調(diào)試，不包括web移動端調(diào)試。本文調(diào)試均在chrome瀏覽器進(jìn)行
alert
這個(gè)不用多說了，不言自明
console
基本輸出
想必大家都在用console.log在控制...
fantix 2019-08-29 16:38
評論0
男| 高級講師
閱讀 1815· 2019-08-30 13:54
閱讀 2728· 2019-08-29 17:27
閱讀 1114· 2019-08-29 17:23
閱讀 3354· 2019-08-29 15:20
閱讀 1229· 2019-08-29 11:28
閱讀 1570· 2019-08-26 10:39
閱讀 1318· 2019-08-26 10:29
閱讀 642· 2019-08-26 10:13
