1. 程式人生 > >瀏覽器控制臺

瀏覽器控制臺

assert htm true 控制 信息 site 變量聲明 ons xpath

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("耗時");
var num=0; for(var i=0;i<=10000000;i++){ num=num+i; } console.timeEnd("耗時");

瀏覽器控制臺