by Kyle Gill

凯尔·吉尔(Kyle Gill)

命令Javascript控制台 (Commanding the Javascript console)

调试，格式化和效率的有用技巧 (Useful tricks for debugging, formatting, and efficiency)

The console is one of the first tools developers learn about. The console is the tool developers use when debugging their own applications. The law of the instrument states that it’s easy to develop overconfidence in a familiar tool.

控制台是开发人员首先了解的工具之一。 控制台是开发人员在调试自己的应用程序时使用的工具。 仪器定律表明，在熟悉的工具中容易产生过度自信。

“I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail.” -Maslow

“如果您仅有的工具是锤子，我想把所有东西都当作钉子来对待是很诱人的。” -马斯洛

The same idea can be applied to the console. In an ecosystem where tools, keyboard shortcuts, and API’s flow like milk and honey in the promised land, it’s hard to justify picking up a new hammer when your old one works just fine. Trust me on this one though, those prong thingies on the back of your hammer aren’t just for ripping out nails.

相同的想法可以应用于控制台。 在生态环境中，工具，键盘快捷键和API的流量像牛奶和蜂蜜一样在承诺的土地上流通，如果您的旧锤头工作得很好，则很难证明选择新锤头是合理的。 不过，请相信我，锤子后面的那些尖头东西不仅是为了拔钉子 。

What follows are some of the simplest tricks I’ve found for debugging in the console.

以下是我在控制台中找到的一些最简单的调试技巧。

1：包装参数 (1: Wrapping Arguments)

If you wrap the argument passed into console.log in {}’s you’ll output the data you’re logging in object form. The object will have a nice name to tell you what it was that you were trying to output.

如果将传递给console.log的参数包装在{}中，则将以对象形式输出正在记录的数据。 该对象将具有一个很好的名称，以告诉您您要输出的内容。

Rather than seeing a whole bunch of objects with similar fields like id and name in your console like this:

而不是在控制台中看到一大堆具有类似字段(例如id和name)的对象，如下所示：

You’ll get the name of the variable in front of the data being printed like this:

您将在要打印的数据前面获得变量名称，如下所示：

2：将数据复制到剪贴板 (2: Copying Data to the Clipboard)

You can copy data logged in the console to your computer’s clipboard. I find this useful when you want to manipulate an object in a REPL or pull out data you’re debugging.

您可以将控制台中记录的数据复制到计算机的剪贴板中。 当您要在REPL中操作对象或提取正在调试的数据时，我发现这很有用。

Right click next to the data you want to copy and select “Store as a global variable”. This will save the data as a variable in the console with a temporary name. (If it’s the first time you’re doing it in a console window it will be temp1.) Then you can use the copy() command putting in the name temp1 as the argument. This copies the data stored to your clipboard which you can paste like you would anything else you copy.

右键单击要复制的数据旁边的，然后选择“存储为全局变量”。 这将使用临时名称将数据另存为控制台中的变量。 (如果这是您第一次在控制台窗口中进行操作，它将是temp1 。)然后，您可以使用copy()命令，将名称temp1作为参数。 这会将存储的数据复制到剪贴板，您可以像粘贴其他任何内容一样将其粘贴。

It’s especially helpful when a database query won’t return data in a format that matches how your data is being manipulated on the frontend. You can show you how data is being mutated or transformed.

当数据库查询不会以与在前端处理数据的方式匹配的格式返回数据时，这特别有用。 您可以显示如何对数据进行突变或转换。

3：短路表达式 (3: Short Circuiting expressions)

If you short circuit an expression with a || you can make refactoring code or adding in a debug statement a lot faster. This is particularly useful with one line fat arrow functions where you want to see what data you’re receiving as an argument.

如果用||短路表达式 您可以使重构代码或添加调试语句快得多。 这对于单行粗箭头功能特别有用，您可以在其中查看要作为参数接收的数据。

// THISsomeFunction = data => (  <div>    <Component data={data} />  </div>)

// BECOMES...someFunction = data =&gt; console.log(data) || (  <div>    <Component data={data} />  </div>)

// RATHER THAN...someFunction = data =&gt; {  console.log(data)    return (    <div>      <Component data={data} />    </div>  )}

You skip out on wrapping the whole function in curly braces and adding a return. This feels like it’s not that big a deal until you’re optimizing performance and do it a thousand times trying to figure out what egregious React sin you’ve committed.

您可以跳过将整个函数括在花括号中并添加返回值的步骤。 感觉好像没什么大不了的，直到您优化性能并进行一千次尝试找出您所犯下的惊人React罪过。

4：记录，错误，警告 (4: Log, Error, Warn)

In addition to console.log(), the console has several other functions to print data into the console in different predefined formats. Among these are:

除了console.log() ，控制台还具有其他几个功能，可以以不同的预定义格式将数据打印到控制台中。 其中包括：

• console.log()

  console.log()

• console.warn()

  console.warn()

• console.error()

  console.error()

5：控制台输出的自定义格式 (5: Custom formatting for console output)

You can do more than just implement the built-in formatting with console.log, warn, and error. You can play the role of artist where the console is your canvas!

您不仅可以使用console.log ， warn和error实现内置格式，还可以做更多的事情。 您可以在控制台是画布的情况下扮演艺术家的角色！

Perhaps try printing a nice pill around output you want to emphasize:

也许尝试在要强调的输出周围打印一个漂亮的药丸：

Here’s that snippet:

这是片段：

You can also store CSS to use as styles in a variable to apply to output. You can punk your coworkers with a splash of rainbow to trail everything you output. If you want humungous rainbows following everything, try this:

您还可以将CSS用作样式存储在变量中以应用于输出。 您可以用彩虹飞溅朋克同事，以追踪您输出的所有内容。 如果您想跟随所有事物的巨大彩虹，请尝试以下操作：

6：将JSON打印为表格 (6: Printing JSON as a Table)

Unbeknownst to many, the console has a built-in method for printing tabular data in table format. This can be great for quickly perusing JSON data.

控制台不为人所知，它具有一种内置方法，用于以表格格式打印表格数据。 这对于快速读取JSON数据非常有用。

7：易于计数 (7: Easy Counting)

The console.count() method can make keeping track of how many times you’ve hit a point in your code really simple. You no longer need to pepper your code in incrementing variables.

console.count()方法可以使跟踪代码中的点非常简单。 您不再需要在递增变量中添加代码。

Pro tip: you can replace “number” with a label from a variable and it will count how many times the count method with that label has been hit.

专家提示：您可以用变量中的标签替换“数字”，它将计算使用该标签的计数方法被击中的次数。

I’ve found this to be useful when trying to debug race conditions or unnecessary re-rendering in a React app.

我发现这在尝试调试竞态条件或在React应用程序中不必要的重新渲染时非常有用。

8：使用DOM元素 (8: Using DOM Elements)

You can select a DOM element in the Elements tab and then access it with $0. The browser will actually keep a history where $0 represents the current selection. $1 represents the previous selection. $2 the second last selection and so on up to 5 elements.

您可以在“元素”选项卡中选择一个DOM元素，然后使用$0进行访问。 浏览器实际上将保留历史记录，其中$0代表当前选择。 $1代表上一个选择。 $2是倒数第二个选择，依此类推，最多5个元素。

You may ask yourself: when would I ever want to change the innerHTML of my app from the console? And the answer would be probably only when you want a really simple example GIF for a blog post. But this too has its use cases.

您可能会问自己：我什么时候想从控制台更改应用程序的innerHTML？ 答案可能只有当您想要一个非常简单的博客文章示例GIF时。 但这也有其用例。

9：调试器语句 (9: The Debugger Statement)

If you’ve ever added a console.log, gone into the browser tools and added a breakpoint, to see what’s happening when it gets to that code, free yourself with the debugger statement.

如果您曾经添加过console.log，进入了浏览器工具并添加了一个断点，以查看在获取该代码时发生了什么，请使用debugger语句释放自己。

If you add debugger on a line in your Javascript the browser will stop and open up the debugging tools and pause execution.

如果您在Javascript的一行中添加debugger ，浏览器将停止并打开调试工具并暂停执行。

Although it’s not a console feature, it’s a great thing to know. Logging information to the console isn’t as effective or efficient as the debugging tools built into browsers (like Chrome’s Sources tab or Firefox’s Debugger tab). To further improve your debugging, look into resources that dive into those tools.

尽管它不是控制台功能，但要了解它是一件很棒的事情。 将信息记录到控制台并不像浏览器内置的调试工具(例如Chrome的“源”选项卡或Firefox的“调试器”选项卡)那样有效。 为了进一步改善调试，请研究可用于这些工具的资源。

However, the console remains a really quick and effective way to see application flow in apps where lots of different lifecycle methods and re-renders are firing and improving how you use them too will make you a better developer.

但是，控制台仍然是查看应用程序中应用程序流的一种非常快速有效的方法，在这些应用程序中，许多不同的生命周期方法和重新渲染正在触发，并且改进使用它们的方式也将使您成为更好的开发人员。

谢谢阅读！ (Thanks for Reading!)

If you have your own tips, please share! I’d love to hear from you here in the comments, on Twitter, or via email.

如果您有自己的技巧，请分享！ 我很乐意在评论，Twitter或电子邮件中收到您的来信。

If you found what you read interesting or helpful, feel welcome to leave a clap or two, subscribe for future updates, or retweet/share this tweet: ?

如果您发现所读内容有趣或有帮助，欢迎打一两本书，订阅以后的更新，或转发/分享此推文：

翻译自: https://www.freecodecamp.org/news/commanding-the-javascript-console-4e1caaeab345/