你不知道的Console命令

2022-07-20 10:45:08 字數 2358 閱讀 1094

1: 

2: 3:7: 8:14:

15:

最常用的就是console.log了。

console上述的集中度支援printf的佔位符格式,支援的佔位符有:字元(%s)、整數(%d或%i)、浮點數(%f)和物件(%o):

佔位符作用

%s字串

%d or %i

整數%f

浮點數%o

可展開的dom

%o列出dom的屬性

%c根據提供的css樣式格式化字串

1:
效果:

%o、%o都是用來輸出object物件的,對普通的object物件,兩者沒區別,但是列印dom節點時就不一樣了:

// 格式成可展開的的dom,像在開發者工具element面板那樣可展開 

console.log('%o',document.body.firstelementchild);

// 像js物件那樣訪問dom元素,可檢視dom元素的屬性

// 等同於console.dir(document.body.firstelementchild)

console.log('%o',document.body.firstelementchild);

文字輸出

console.log("%chello world,歡迎您!","color: red; font-size: 20px");
輸出

由於 console不能定義img,因此用背景代替。此外,console不支援width和height,利用空格和font-size代替;還可以使用padding和line-height代替寬高。

不想這麼麻煩,可以試試console-image這個外掛程式。

1: 

2: 3:7: 8:25:

26:

效果:

console.dir()可以顯示乙個物件所有的屬性和方法。

1:
效果:

console.dirxml()用來顯示網頁的某個節點(node)所包含的html/xml**。

1: 

2: 3:7: 8: 9:10: 程式愛好者:259280570,歡迎你的加入

11:

12:16:

17:

效果:

console.assert()用來判斷乙個表示式或變數是否為真。如果結果為否,則在控制台輸出一條相應資訊,並且丟擲乙個異常。

1:
1是非0值,是真;而第二個判斷是假,在控制台顯示錯誤資訊

console.trace()用來追蹤函式的呼叫軌跡。

1:
控制台輸出資訊:

console.time()和console.timeend(),用來顯示**的執行時間。

1:
執行時間是38.84ms

效能分析(profiler)就是分析程式各個部分的執行時間,找出瓶頸所在,使用的方法是console.profile()。

1:
輸出如圖:

你不知道的那些console

前一陣在查詢問題的時候,偶然間發現了console的乙個用法,彷彿開啟了我新世界的大門,原來console還有這麼多的用法,這讓一直以來只用console.log 的我情何以堪啊,所以在這裡記錄一下我認為有意思和比較實用的幾種用法。console.log 文字資訊 console.info 提示資訊...

你不知道的console除錯

瀏覽器的開發者工具我們經常用,console.log我們也經常用,但是console還有其它一些方便除錯的命令,我總結了幾個常用的記錄在下面,供以後開發時參考,相信對其他人也有用。var start new date 執行js var end new date console.time 執行時間 執...

你所不知道的 Console

1.凡人視角 列印字串 console.log i am a 凡人 列印提示訊息 console.info yes,you arm a 凡人 列印警告訊息 console.warn 凡人你居然敢窺視我 列印錯誤訊息 console.error 天兵天將,把這個凡人給我打入地獄 列印除錯資訊 cons...