Chrome 73 DevTools 新功能之 Logpoints

前言

今天早上 Chrome 更新到 73 版本，其中 Logpoints 對於經常使用 console.log 的開發者來講，有較大的便捷性。

版本說明

本篇文章提到的 Chrome 73 的版本爲： 73.0.3683.75（正式版本） （32 位）。

什麼是 Logpoints

簡單來講， Logpoints 是使用相似斷點的方式，來實現控制檯的輸出。

Logpoints 的優點

1. 減小調試代碼，提升代碼的整潔性。
2. 直接在 面板 添加 控制檯輸出，調試更加方便。
3. 線上的網站也能夠直接添加 控制檯輸出。

Logpoints 如何使用

1. 在 Sources 面板找到須要添加 控制檯輸出 的代碼，這裏我列舉輸出 img 常量；

2. 右擊當前代碼的行數，在菜單中選擇 Add logpoint... ;

3. 在彈出的輸入框中，輸入 輸出信息 而後回車，這裏我輸出 img 常量；

4. 刷新頁面，就能夠在控制檯看到輸出信息了。

總結

我的感受 chrome 73 中的 Logpoints 對於調試來講有兩點很方便：

1. 避免了在代碼中添加 console.log ，而後返回瀏覽器刷新頁面，最後又返回編輯器刪除 console.log 這個複雜步驟。
2. 查看線上的網站時，也能夠經過 Logpoints 來輸出信息，方便調試代碼的運行狀況。