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 來輸出資訊，方便除錯程式碼的執行情況。