寫在前面 本文包括瀏覽器除錯,不包括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...