chrome 適配除錯 Chrome 除錯技巧

2021-10-13 10:53:21 字數 1460 閱讀 2583

寫在前面 本文包括瀏覽器除錯,不包括web移動端除錯。 本文除錯均在chrome瀏覽器進行

alert

這個不用多說了,不言自明

console

基本輸出

console.log("列印字串");//在控制台列印自定義字串

console.error("我是個錯誤");//在控制台列印自定義錯誤資訊

console.info("我是個資訊");//在控制台列印自定義資訊

console.warn("我是個警告");//在控制台列印自定義警告資訊

console.debug("我是個除錯");//在控制台列印自定義除錯資訊

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

注意上面輸出的error和throw出的error不一樣,前者只是輸出錯誤資訊,無法捕獲,不會冒泡,更不會中止程式執行。

格式化輸出

除此以外,console還支援自定義樣式和類似c語言的printf形式

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輸出

下面幾個比較簡單的,就不舉例子了,簡單說一下:

varul =document.getelementsbytagname("ul");

console.dirxml(ul);//樹形輸出table節點,即

物件輸出

varo =,,];

console.log(stu);

console.table(stu);

成組輸出

//建立乙個引數組

console.group("start");//引號裡是組名,自己起

console.log("sub1");

console.log("sub1");

console.log("sub1");

console.groupend("end");

函式計數和跟蹤

functionfib(n)];

setinterval(function(),1000);

這裡,第乙個屬性中物件引用的值是不可靠的。當你第一次在開發者工具中顯示這個屬性時,num的值就已經確定了。之後無論你對同乙個引用重新開啟多少次都不會變化。

2.盡可能使用 source map。有時生產**不能使用source map,但不管怎樣,你都不應該直接對生產**進行除錯。

Chrome 除錯技巧

可快速關注 alert console 基本輸出 console.log在控制台輸出點東西,其實console還有其它的方法 console.log 列印字串 在控制台列印自定義字串 console.error 我是個錯誤 在控制台列印自定義錯誤資訊 console.info 我是個資訊 在控制台列...

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...