Day9 Console Tricks!

發表於 | 分類於 | 閱讀次數:
| 300

Demo

平常我們只會用console.log
這邊介紹開發者工具的console的更多功能。
未來可以在開發者工具塞入一些客製化元素了…
像是臉書我們按F12可以看到他給我們的警告

以前的疑問：為什麼他們的字那麼大!?還有顏色!?

這邊可以直接開啟開發人員工具試著輸入看看，就不多放預覽圖了:

一般用法

1
console.log('hello');

使用參數

1
console.log('我是--> %s <--參數!','💩');

樣式

1
console.log('%c 自訂樣式', 'font-size:18px; background:red;font-family:"微軟正黑體"')

警告

1
console.warn('常看到的警告');

錯誤

1
console.error('常看到的錯誤');

資訊

1
console.info('一般資訊');

清除

1
console.clean()

這codepen練習的時候滿常用到的，就是清除所有前面console出來的資訊。

還有很多

其實還有很多就不多做贅述了

  • table -在前面Day4有用到，可以印出表格滿方便的。
  • assert -介紹
  • dir -介紹

我們的腦容量有限，當需要用到時，只要想到以前好像有看過這個東西，再查閱即可。多用幾次就記下來了。

0%