如何使用JavaScript控制檯改進工做流程

做爲Web開發人員，頗有必要了解如何調試代碼。後臺開發咱們常用外部庫來記錄日誌，並在某些狀況下格式化顯示日誌，前端咱們會使用斷點和控制檯，可是咱們瀏覽器的控制檯比咱們想象的要強大得多。

當咱們考慮控制檯時，首先想到的是console.log，對吧？可是它比咱們想像中使用的方法多得多。如今咱們來看一下如何充分利用控制檯，我將爲您提供一些技巧，使這些方法更具可讀性

什麼是控制檯？

JavaScript控制檯是現代瀏覽器中的內置功能，它在相似shell的界面中帶有開箱即用的開發工具。它容許開發人員：

• 查看網頁上發生的錯誤和警告的日誌。
• 使用JavaScript命令與網頁交互。
• 調試應用程序並直接在瀏覽器中遍歷DOM。
• 檢查和分析網絡活動 基本上，它使您可以在瀏覽器中編寫，管理和監控JavaScript。

Console.log，Console.error，Console.warn和Console.info 這些多是最經常使用的方法。您能夠將多個參數傳遞給這些方法。每一個參數都在由空格分隔的字符串中進行計算和鏈接，可是對於對象或數組，您能夠在它們的屬性之間導航。

Console.group

在檢查代碼邏輯和流程時咱們可能會使用不少的console.log()來檢測，可是你會發現控制檯打印出來的很是多。此方法容許您在可摺疊的組下對一系列console.log（以及錯誤信息等）進行分組。語法很是簡單：只需console.log在以前輸入咱們想要分組的全部內容console.group()（或者console.groupCollapsed()若是咱們但願它默認關閉）。而後console.groupEnd()在末尾添加一個關閉組。

Console.table

自從我發現console.table個人生活都發生了改變。在一個內部顯示JSON或很是大的JSON數組console.log是一種很差的體驗。這console.table容許咱們在一個漂亮的表中可視化這些結構，咱們能夠在其中命名列並將它們做爲參數傳遞。

很是好，在調試中很是有用：

Console.count，Console.time和Console.timeEnd 對於須要調試的每一個開發人員來講，這三種方法都是瑞士軍刀。該console.count計數和輸出是的次數count()已被調用在同一行，並用相同的標籤。該console.time開始用指定爲輸入參數的名稱定時器，能夠運行多達10,000個特定網頁上同時定時器。啓動後，咱們使用調用來console.timeEnd中止計時器並將通過的時間打印到控制檯。

輸出將以下所示：

Console.trace和Console.assert

這些方法只是從調用它的代碼位置，打印堆棧跟蹤。想象一下，您正在建立一個JS庫，並但願通知用戶生成錯誤的位置。在這種狀況下，這些方法很是有用。該console.assert是喜歡console.trace，可是隻打印條件不符合的。

正如咱們所看到的，輸出正是React（或任何其餘庫）在生成異常時向咱們展現的內容。

刪除全部控制檯🙀

使用控制檯一般會迫使咱們消除它們。或者有時候咱們會忘記生產構建（而且只會在幾天和幾天以後錯誤地注意它們）。固然，我不建議任何人濫用不須要它們的控制檯（更改輸入句柄中的控制檯能夠在看到它工做後刪除）。您應該在開發模式下保留錯誤日誌或跟蹤日誌以幫助您進行調試。我在工做和我本身的項目中都常用Webpack。此工具容許您使用uglifyjs-webpack-plugin從生產版本中刪除您不想保留的全部控制檯（按類型）😌

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";

.....
optimization: {
        minimizer: !debug ? [
            new UglifyJsPlugin({
                // Compression specific options
                uglifyOptions: {
                    // Eliminate comments
                    comments: false,
                    compress: {
                       // remove warnings
                       warnings: false,
                       // Drop console statements
                       drop_console: true
                    },
                }
           })] : []
}
複製代碼

配置很是簡單，它簡化了工做流程，因此控制檯仍是很好玩的（但不要濫用它！）