作為Web開發(fā)人員，很有必要了解如何調(diào)試代碼。后臺(tái)開發(fā)我們經(jīng)常使用外部庫(kù)來(lái)記錄日志，并在某些情況下格式化顯示日志，前端我們會(huì)使用斷點(diǎn)和控制臺(tái)，但是我們?yōu)g覽器的控制臺(tái)比我們想象的要強(qiáng)大得多。

當(dāng)我們考慮控制臺(tái)時(shí)，首先想到的是console.log，對(duì)吧？但是它比我們想像中使用的方法多得多。現(xiàn)在我們來(lái)看一下如何充分利用控制臺(tái)，我將為您提供一些技巧，使這些方法更具可讀性

什么是控制臺(tái)？

JavaScript控制臺(tái)是現(xiàn)代瀏覽器中的內(nèi)置功能，它在類似shell的界面中帶有開箱即用的開發(fā)工具。它允許開發(fā)人員：

• 查看網(wǎng)頁(yè)上發(fā)生的錯(cuò)誤和警告的日志。
• 使用JavaScript命令與網(wǎng)頁(yè)交互。
• 調(diào)試應(yīng)用程序并直接在瀏覽器中遍歷DOM。
• 檢查和分析網(wǎng)絡(luò)活動(dòng) 基本上，它使您能夠在瀏覽器中編寫，管理和監(jiān)控JavaScript。

Console.log，Console.error，Console.warn和Console.info 這些可能是最常用的方法。您可以將多個(gè)參數(shù)傳遞給這些方法。每個(gè)參數(shù)都在由空格分隔的字符串中進(jìn)行計(jì)算和連接，但是對(duì)于對(duì)象或數(shù)組，您可以在它們的屬性之間導(dǎo)航。

Console.group

在檢查代碼邏輯和流程時(shí)我們可能會(huì)使用很多的console.log()來(lái)檢測(cè)，但是你會(huì)發(fā)現(xiàn)控制臺(tái)打印出來(lái)的非常多。此方法允許您在可折疊的組下對(duì)一系列console.log（以及錯(cuò)誤信息等）進(jìn)行分組。語(yǔ)法非常簡(jiǎn)單：只需console.log在之前輸入我們想要分組的所有內(nèi)容console.group()（或者console.groupCollapsed()如果我們希望它默認(rèn)關(guān)閉）。然后console.groupEnd()在末尾添加一個(gè)關(guān)閉組。

Console.table

自從我發(fā)現(xiàn)console.table我的生活都發(fā)生了改變。在一個(gè)內(nèi)部顯示JSON或非常大的JSON數(shù)組console.log是一種不好的體驗(yàn)。這console.table允許我們?cè)谝粋€(gè)漂亮的表中可視化這些結(jié)構(gòu)，我們可以在其中命名列并將它們作為參數(shù)傳遞。

非常好，在調(diào)試中非常有用：

Console.count，Console.time和Console.timeEnd 對(duì)于需要調(diào)試的每個(gè)開發(fā)人員來(lái)說(shuō)，這三種方法都是瑞士軍刀。該console.count計(jì)數(shù)和輸出是的次數(shù)count()已被調(diào)用在同一行，并用相同的標(biāo)簽。該console.time開始用指定為輸入?yún)?shù)的名稱定時(shí)器，可以運(yùn)行多達(dá)10,000個(gè)特定網(wǎng)頁(yè)上同時(shí)定時(shí)器。啟動(dòng)后，我們使用調(diào)用來(lái)console.timeEnd停止計(jì)時(shí)器并將經(jīng)過(guò)的時(shí)間打印到控制臺(tái)。

輸出將如下所示：

Console.trace和Console.assert

這些方法只是從調(diào)用它的代碼位置，打印堆棧跟蹤。想象一下，您正在創(chuàng)建一個(gè)JS庫(kù)，并希望通知用戶生成錯(cuò)誤的位置。在這種情況下，這些方法非常有用。該console.assert是喜歡console.trace，但是只打印條件不符合的。

正如我們所看到的，輸出正是React（或任何其他庫(kù)）在生成異常時(shí)向我們展示的內(nèi)容。

刪除所有控制臺(tái)?

使用控制臺(tái)通常會(huì)迫使我們消除它們。或者有時(shí)候我們會(huì)忘記生產(chǎn)構(gòu)建（并且只會(huì)在幾天和幾天之后錯(cuò)誤地注意它們）。當(dāng)然，我不建議任何人濫用不需要它們的控制臺(tái)（更改輸入句柄中的控制臺(tái)可以在看到它工作后刪除）。您應(yīng)該在開發(fā)模式下保留錯(cuò)誤日志或跟蹤日志以幫助您進(jìn)行調(diào)試。我在工作和我自己的項(xiàng)目中都經(jīng)常使用Webpack。此工具允許您使用uglifyjs-webpack-plugin從生產(chǎn)版本中刪除您不想保留的所有控制臺(tái)（按類型）?

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') var debug = process.env.NODE_ENV !== "production";..... optimization: {minimizer: !debug ? [new UglifyJsPlugin({// Compression specific optionsuglifyOptions: {// Eliminate commentscomments: false,compress: {// remove warningswarnings: false,// Drop console statementsdrop_console: true},}})] : [] }

配置非常簡(jiǎn)單，它簡(jiǎn)化了工作流程，所以控制臺(tái)還是很好玩的（但不要濫用它！）

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的如何使用JavaScript控制台改进工作流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。