Console物件的常用api學習記錄

水冗水孚發表於2022-05-31
物件API

Console物件

js中也有萬物皆物件的定義，所以我們常用的console也是一個物件，自然是物件，那麼其身上就會自帶一些方法和屬性。大家F12開啟控制檯以後，直接輸入console回車，就可以看明細啦，如下圖：

本文記錄一下常用的console的api，細節來自於官方文件：Chrome DevTools中文手冊：https://leeon.gitbooks.io/dev... 裡面還有其他很多谷歌開發工具的使用細節，大家沒事的時候，可以多逛逛，必當大有裨益^_^

Console控制檯api

1. console.assert()方法，一般使用的不多，相當於一個條件判斷。比如有如下程式碼：

let isLogin = true
console.assert(isLogin, 'isLogin為false，當前處於未登入狀態')
// 此時isLogin為true不會執行列印，如果為false的時候，就會列印提示：isLogin為false，當前處於未登入狀態
// 相當於：
if(!isLogin){console.log('isLogin為false，當前處於未登入狀態')} //圖示如下：


2. console.clear()方法，也可以清空控制檯,清空控制檯，並輸出 Console was cleared，圖示如下：

3. console.count()方法，這個方法有點雞肋，就是用來計數的，計數的話，我們使用console.log也是可以計數的。看程式碼就知道了

let arr = ['甲', '乙', '丙', '丁']
for (let i = 0; i < arr.length; i++) {
    console.count('console.count計數')
    console.log('console.log計數', i + 1)
} // 結果如下圖：

4. console.debug()方法，和console.log()基本上一樣，用的也少，不贅述

5. console.dir()方法，一般用於列印dom物件，查詢其身上的屬性，挺常用的。圖示如下：

6. console.dirxml()方法，用於列印XML/HTML文件結構的方法，挺好。示例如下：

<body>
    <h1>
        <span>
            <h2>你好console.dirxml()</h2>
        </span>
    </h1>
    <script>
        let span = document.querySelector('h1')
        console.dirxml(span)
    </script>
</body>
// 列印圖如下：

7. console.error()和console.exception()方法，用於丟擲錯誤到控制檯，我們在編碼過程中遇到的框架（vue/react）報錯資訊，都是被這個方法丟擲來的。或者我們自己封裝的函式方法，如果使用者沒有按照正確的方式去使用，我們也可以使用這個方法，做一個拋錯提示在控制檯上，有助於更好的開發

8. console.warn()方法，同上，只不過這個是丟擲警告，沒有上面的丟擲錯誤那麼嚴重。畢竟對於程式設計師而言，警告不用管，報錯才去看，哈哈

console.info()丟擲一個資訊

9. console.log()，萬能狗皮膏藥，最常用的方法，不贅述。畢竟遇事不決，console大法！

10. console.table()方法，用於在控制檯列印一個table表格，比如我們把專案更新的版本號時間之類的資訊，以表格的形式呈現在控制檯上，程式碼和示例圖如下：

let arr = [
    // 每個物件的key是表格每一列表頭的資料，value是每一行的資料
    {
        edition: 'v1.0',
        author: '孫悟空',
        time: '2020-06-06',
    },
    {
        edition: 'v2.0',
        author: '豬八戒',
        time: '2021-07-07',
    },
    {
        edition: 'v3.0',
        author: '沙和尚',
        time: '2022-08-08',
    },
]
console.table(arr)

點選一下表頭，還可以排序呢

11. cosole.time和console.timeEnd方法 用於計時的，看看自己的程式用了多久，一般用於效能優化時候的排查、時間監控之類的。比如可以算算一個迴圈執行了多長時間、比如可以可以算算一個遞迴執行了多長時間之類的。cosole.time相當於開始掐秒錶，console.timeEnd相當於結束掐秒錶。程式碼圖示如下：

console.time() // 開始掐表表
for (let i = 0; i < 100; i++) { }
console.timeEnd() // 結束掐秒錶

console.timeLog相當於記錄中間的時間日誌，用的不是特別多

12. console.trace()與console.log()基本上一樣，不贅述

特殊控制檯列印

  • %s 字串格式（用的少）
  • %i 或 %d 整型格式（用的少）
  • %f 浮點格式（用的少）
  • %o DOM節點（用的少）因為：console.log('%o',document.body) == console.dirxml(document.body)
  • %O JavaScript 物件（用的少）因為：console.log('%O',document.body) == console.dir(document.body)
  • %c 對輸出的字串使用css樣式，樣式通過第二個引數指定。有幾個%c 就要有幾個對應的第二個引數。第二個引數，使用逗號分隔開（用的多、用的多、用的多）舉例如下：
// 這裡分別給孫悟空、豬八戒、沙和尚指定不同的樣式
let content = "%c 孫悟空 %c 豬八戒 %c 沙和尚"
let styleSunWuKong = "color: white; background: black; padding:5px;"
let styleZhuBaJie = "color: green; background: pink; padding:5px;"
let styleShaHeShang = "color: yellow; background: purple; padding:5px;"
console.log(content, styleSunWuKong, styleZhuBaJie, styleShaHeShang); // 效果圖如下：

  • 列印圖片（背景圖url的方式），程式碼效果圖如下：
console.log(`%c `, `background-image: url(http://ashuai.work/static/img/avantar.66bb7908.png);
                    padding: 120px 120px;
                    background-size: cover;
                    background-repeat: no-repeat;
                    `
            )

谷歌開發者工具常用快捷鍵

  • F12開啟控制檯（Console皮膚）
  • Ctrl + Shift + I開啟控制檯（Console皮膚）
  • Ctrl + Shift + J開啟控制檯（Console皮膚）
  • Ctrl + Shift + C開啟控制檯（Elements皮膚）
  • Ctrl+[ 和 Ctrl+]（在控制檯不同的皮膚切換）
  • Ctrl + F當前頁面搜所文字內容（除了程式碼中查詢也可以在頁面中查詢對應的文字）
  • clear()在控制檯輸入即可清空控制檯。或者在控制檯獲取焦點的情況下使用Ctrl + L也可以清空控制檯
  • shift + enter可在控制檯換行輸入

除錯滑鼠懸浮彈出層樣式步驟

比如el-menu滑鼠懸浮出現二級彈框內容，但是滑鼠移動走，二級彈框就消失了，這樣就不太方便我們審查元素樣式。於是乎，我們可以這樣操作，圖示如下：

每天學點新知識，記錄一下吧 ^_^

相關文章