javascript控制臺

by Riccardo Canella

里卡多·卡內拉(Riccardo Canella)

如何使用JavaScript控制臺改善工作流程 (How you can improve your workflow using the JavaScript console)

As a web developer, you know very well the need to debug your code. We often use external libraries for logs, and to format and/or display them in some cases, but the console of our browsers is much more powerful than we think.

作為Web開發人員，您非常了解調試代碼的需求。 我們經常使用外部庫來記錄日志，并在某些情況下格式化和/或顯示它們，但是瀏覽器的控制臺功能比我們想象的要強大得多。

When we think about the console, the first thing that comes to mind and the console.log, right? But there are many more methods than those we imagine. Now we will see how to make the most of using the console, and I’ll give you some tips to make them these methods more readable

當我們想到控制臺時，首先想到的是console.log ，對吧？ 但是有比我們想象的更多的方法。 現在，我們將了解如何充分利用控制臺，并且我將為您提供一些技巧，以使這些方法更具可讀性

什么是控制臺？ (What is the Console?)

The JavaScript console is a built-in feature in modern browsers that comes with out-of-the-box development tools in a shell-like interface. It allows a developer to:

JavaScript控制臺是現代瀏覽器中的內置功能，它在類似Shell的界面中帶有開箱即用的開發工具。 它允許開發人員執行以下操作：

• View a log of errors and warnings that occur on a web page.
  查看網頁上出現的錯誤和警告日志。
• Interact with the web page using JavaScript commands.
  使用JavaScript命令與網頁進行交互。
• Debug applications and traverse the DOM directly in the browser.
  調試應用程序并直接在瀏覽器中遍歷DOM。
• Inspect and analyze network activity
  檢查并分析網絡活動

Basically, it empowers you to write, manage, and monitor JavaScript right within your browser.

基本上，它使您可以直接在瀏覽器中編寫，管理和監視JavaScript。

Console.log，Console.error，Console.warn和Console.info (Console.log, Console.error, Console.warn and Console.info)

These are probably the most used methods of all. You can pass more than one parameter to these methods. Each parameter is evaluated and concatenated in a string delimited by the space, but in case of objects or arrays you can navigate between their properties.

這些可能是最常用的方法。 您可以將多個參數傳遞給這些方法。 每個參數都以空格分隔的字符串進行評估和連接，但是對于對象或數組，您可以在其屬性之間導航。

Console.group (Console.group)

This method allows you to group a series of console.logs (but also error info, and so on) under a group that can be collapsed. The syntax is really very simple: just enter all the console.log we want to group before a console.group() (or console.groupCollapsed() if we want it to be closed by default). Then add a console.groupEnd() at the end to close the group.

通過此方法，您可以將一系列console.logs(還包括錯誤信息，等等)歸為一個可折疊的組。 語法真的很簡單：只需輸入所有console.log一個之前我們要組console.group()或console.groupCollapsed()如果我們希望它在默認情況下關閉)。 然后在末尾添加console.groupEnd()以關閉組。

The results will look like this:

結果將如下所示：

控制臺表 (Console.table)

Since I discovered the console.table my life has changed. Displaying JSON or very large JSON arrays inside a console.log is a terrifying experience. The console.table allows us to visualize these structures inside a beautiful table where we can name the columns and pass them as parameters.

自從發現console.table我的生活發生了變化。 在console.log顯示JSON或非常大的JSON數組是一種令人恐懼的體驗。 console.table允許我們在漂亮的表中可視化這些結構，我們可以在其中命名列并將它們作為參數傳遞。

The result is wonderful and very useful in debugging:

結果是極好的，并且在調試中非常有用：

Console.count，Console.time和Console.timeEnd (Console.count, Console.time and Console.timeEnd)

These three methods are the Swiss army knife for every developer who needs to debug. The console.count counts and outputs the number of times that count() has been invoked on the same line and with the same label. The console.time starts a timer with a name specified as an input parameter, and can run up to 10,000 simultaneous timers on a given page. Once initiated, we use a call to console.timeEnd to stop the timer and print the elapsed time to the Console.

對于需要調試的每個開發人員，這三種方法都是瑞士軍刀。 console.count計數并輸出在同一行上使用相同標簽調用count()的次數。 console.time以指定為輸入參數的名稱啟動計時器，并且在給定頁面上最多可以同時運行10,000個計時器。 啟動后，我們將使用對console.timeEnd的調用來停止計時器并將經過的時間打印到控制臺。

The output will look like this:

輸出將如下所示：

Console.trace和Console.assert (Console.trace and Console.assert)

These methods simply print a stack trace from the point where it was called. Imagine you are creating a JS library and want to inform the user where the error was generated. In that case, these methods can be very useful. The console.assert is like the console.trace but will print only if the condition passed didn’t pass.

這些方法只是從調用點打印堆棧跟蹤。 假設您正在創建一個JS庫，并且想通知用戶錯誤發生的位置。 在這種情況下，這些方法可能非常有用。 console.assert類似于console.trace但僅在傳遞的條件未通過時才會打印。

As we can see, the output is exactly what React (or any other library) would show us when we generate an exception.

如我們所見，輸出正是生成異常時React(或任何其他庫)向我們顯示的內容。

刪除所有控制臺？ (Delete all the Consoles ?)

Using consoles often forces us to eliminate them. Or sometimes we forget about the production build (and only notice them by mistake days and days later). Of course, I do not advise anyone to abuse consoles where they are not needed (the console in the change input handle can be deleted after you see that it works). You should leave error logs or trace logs in development mode to help you debug. I use Webpack a lot, both at work and in my own projects. This tool allows you to delete all the consoles that you do not want to remain (by type) from the production build using the uglifyjs-webpack-plugin ?

使用控制臺通常會迫使我們消除它們。 有時我們會忘記生產版本(并且幾天后才錯誤地注意到它們)。 當然，我不建議任何人濫用不需要控制臺的控制臺(在看到更改輸入句柄后可以刪除控制臺)。 您應該將錯誤日志或跟蹤日志留在開發模式下，以幫助您調試。 無論是在工作中還是在我自己的項目中，我都經常使用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                    },                }           })] : []}

The configuration is really trivial and it simplifies the work, so have fun with the console (but do not abuse it!)

配置確實很簡單，并且簡化了工作，因此可以在控制臺上玩樂(但不要濫用它！)

If you liked the article please clap and follow me :)

如果您喜歡這篇文章，請鼓掌并關注我:)

Thx and stay tuned ?

謝謝，敬請期待？

Follow my last news and tips on Facebook

在Facebook上關注我的最新消息和提示

翻譯自: https://www.freecodecamp.org/news/how-you-can-improve-your-workflow-using-the-javascript-console-bdd7823a9472/

javascript控制臺