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

新前端社群發表於2018-07-14
JavaScript

作為Web開發人員，很有必要了解如何除錯程式碼。後臺開發我們經常使用外部庫來記錄日誌，並在某些情況下格式化顯示日誌，前端我們會使用斷點和控制檯，但是我們瀏覽器的控制檯比我們想象的要強大得多。

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

什麼是控制檯？

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

  • 檢視網頁上發生的錯誤和警告的日誌。
  • 使用JavaScript命令與網頁互動。
  • 除錯應用程式並直接在瀏覽器中遍歷DOM。
  • 檢查和分析網路活動 基本上，它使您能夠在瀏覽器中編寫，管理和監控JavaScript。

Console.log，Console.error，Console.warn和Console.info 這些可能是最常用的方法。您可以將多個引數傳遞給這些方法。每個引數都在由空格分隔的字串中進行計算和連線，但是對於物件或陣列，您可以在它們的屬性之間導航。

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

Console.group

在檢查程式碼邏輯和流程時我們可能會使用很多的console.log()來檢測，但是你會發現控制檯列印出來的非常多。此方法允許您在可摺疊的組下對一系列console.log（以及錯誤資訊等）進行分組。語法非常簡單：只需console.log在之前輸入我們想要分組的所有內容console.group()（或者console.groupCollapsed()如果我們希望它預設關閉）。然後console.groupEnd()在末尾新增一個關閉組。

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

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

Console.table

自從我發現console.table我的生活都發生了改變。在一個內部顯示JSON或非常大的JSON陣列console.log是一種不好的體驗。這console.table允許我們在一個漂亮的表中視覺化這些結構，我們可以在其中命名列並將它們作為引數傳遞。

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

非常好，在除錯中非常有用：

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

Console.count，Console.time和Console.timeEnd 對於需要除錯的每個開發人員來說，這三種方法都是瑞士軍刀。該console.count計數和輸出是的次數count()已被呼叫在同一行，並用相同的標籤。該console.time開始用指定為輸入引數的名稱定時器，可以執行多達10,000個特定網頁上同時定時器。啟動後，我們使用呼叫來console.timeEnd停止計時器並將經過的時間列印到控制檯。

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

輸出將如下所示：

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

Console.trace和Console.assert

這些方法只是從呼叫它的程式碼位置，列印堆疊跟蹤。想象一下，您正在建立一個JS庫，並希望通知使用者生成錯誤的位置。在這種情況下，這些方法非常有用。該console.assert是喜歡console.trace，但是隻列印條件不符合的。

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

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

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

刪除所有控制檯?

使用控制檯通常會迫使我們消除它們。或者有時候我們會忘記生產構建（並且只會在幾天和幾天之後錯誤地注意它們）。當然，我不建議任何人濫用不需要它們的控制檯（更改輸入控制程式碼中的控制檯可以在看到它工作後刪除）。您應該在開發模式下保留錯誤日誌或跟蹤日誌以幫助您進行除錯。我在工作和我自己的專案中都經常使用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
                    },
                }
           })] : []
}
複製程式碼

配置非常簡單，它簡化了工作流程，所以控制檯還是很好玩的（但不要濫用它！）

相關文章