瀏覽器控制臺
1.常用命令
console.log(‘hello‘) 打印文本
console.warn(‘warn‘) 打印文本(帶有警告標識)
console.error(‘error‘) 打印文本(帶有錯誤標識)
2.占位符
2.1 整數(%d或%i或%s)
console.log("%d年%d月%d日",2018,8,29); //2018年8月29日
2.2 浮點數(%f)
console.log("圓周率是%f",3.14); // 圓周率是3.14
2.3 樣式支持(%c)
console.log(‘%chello\n\bhttp://baidu.com‘,‘color:red‘)
3.分組
console.group("第一組信息");
console.log("第一組第一條");
console.log("第一組第二條");
console.groupEnd();
4.顯示節點代碼
4.1 console.dirxml()
console.dirxml($(".top").get(0)) //輸出的就是對應html/xml
4.2 審查元素
審查元素 - 右鍵 - Copy - Copy outerHTML - ctrl + v 出來
(擴展下:通過控制臺可以獲取很多重要的信息,比如:可以看到一個節點的 outerHTML、selector、Xpath、
當前裝備的css、box預覽、全部應用樣式及其所在資源位置、
及其可能的 :active :hover :focus :visited 各種狀態、
綁定事件...
)
5.斷言(就是通過比較得出結論:true/false)
5.1 直接與 true比較
0==true //false
5.2 console.assert()
console.assert(0==true)
6. 追蹤函數的調用軌跡 (console.trace(); 放置於被追蹤函數內部使用)
function add(a, b) { console.log(0); console.trace(); return a + b; } var x = add3(1, 1); function add3(a, b) { console.log(3); return add2(a, b); } function add2(a, b) { console.log(2); return add1(a, b); } function add1(a, b) { console.log(1); return add(a, b); } // 3 2 1 0 (函數聲明提升並解析 - 變量聲明 - 函數順序執行(add3 - add2 - add1 - add )) 7.代碼運行耗時統計 console.time("耗時");
瀏覽器控制臺