Chrome 除錯技巧

2021-08-27 18:59:48 字數 3254 閱讀 9975

,可快速關注)

alert

console

基本輸出

console.log在控制台輸出點東西,其實console還有其它的方法:

console.log(

"列印字串"

);//在控制台列印自定義字串

console.error(

"我是個錯誤"

);//在控制台列印自定義錯誤資訊

console.info(

"我是個資訊"

);//在控制台列印自定義資訊

console.warn(

"我是個警告"

);//在控制台列印自定義警告資訊

console.debug(

"我是個除錯"

);//在控制台列印自定義除錯資訊

cosole.clear();

//清空控制台(這個下方截圖中沒有)

格式化輸出

console.log(

"%s年"

,2016

);//%s表示字串

console.log(

"%d年%d月"

,2016,11

);//%d表示整數

console.log(

"%f"

,3.1415926

);//%f小數

console.log(

"%o"

,console);

//%o表示物件

console.log(

"%c自定義樣式"

,"font-size:30px;color:#00f"

);

console.log(

"%c我是%c自定義樣式"

,"font-size:20px;color:green"

,"font-size:10px;color:red"

);

dom輸出

var

ul = document.getelementsbytagname(

"ul"

);

console.dirxml(ul);

//樹形輸出table節點,即和它的innerhtml,由於document.getelementsbytagname是動態的,所以這個得到的結果肯定是動態的

物件輸出

var

o = ;

console.dir(obj);

//顯示物件自有屬性和方法

var

stu = [,,];

console.log(stu);

console.table(stu);

成組輸出

//建立乙個引數組

console.group(

"start"

); //引號裡是組名,自己起

console.log(

"sub1"

);

console.log(

"sub1"

);

console.log(

"sub1"

);

console.groupend(

"end"

);

函式計數和跟蹤

function

fib(n)

fib(

6);

計時

console.time() 

//計時開始

fib(

100);

//用上述函式計算100個斐波那契數

console.timeend()

//計時結束並輸出時長

console.

assert

(true

, "我錯了"

);

console.

assert

(false

, "我真的錯了"

);

效能分析

function

f()

function

g()

f();

g();

}

console.profile();

f();

console.profileend();

debugger

當節點屬性發生變化時斷點(break on attributes modifications)

當節點內部子節點變化時斷點(break on subtree modifications)

當節點被移除時斷點(break on node removal)

chrome中的除錯技巧

\$1表示b元素,\$2表示a元素(這個和正規表示式的\$符號類似,不過順序不同)。

除錯過程注意事項

var

arr = ;

setinterval(

function

(),

1000

);

【關於投稿】

② 示例:

【投稿】《不要自稱是程式設計師,我十多年的 it 職場總結》:

③ 最後請附上您的個人簡介哈~

Chrome 除錯技巧

前言 除了我們日常使用的除錯方法,在chrome中,其含有一些有意思的方法,有助於提高我們的開發除錯效率。使用sublime的人或習慣用command p 進行檔案的跳轉,在chrome dev tools中其實也有類似的跳轉方法。command p command p 檔名 數字 sublime中...

chrome 除錯技巧

利用devtool 提供的copy 實現快速複製。ctrl shift p 搜尋screen下的capture full size screenshot實現快速截圖。ctrl shift p 搜尋 theme 相關的選項,實現明亮 暗黑兩種主題之間的切換 console.log li 會直接渲染成e...

Chrome 除錯技巧

寫在前面本文包括瀏覽器除錯,不包括web移動端除錯。本文除錯均在chrome瀏覽器進行 這個不用多說了,不言自明 注意上面輸出的error和throw出的error不一樣,前者只是輸出錯誤資訊,無法捕獲,不會冒泡,更不會中止程式執行。除此以外,console還支援自定義樣式和類似c語言的 print...