您可能不知道可以使用Chrome开发者控制台执行的操作

by Swagat Kumar Swain

由Swagat Kumar Swain

您可能不知道可以使用Chrome开发者控制台执行的操作 (Things you probably didn’t know you could do with Chrome’s Developer Console)

Chrome comes with built-in developer tools. This comes with a wide variety of features, such as Elements, Network, and Security. Today, we’ll focus 100% on its JavaScript console.

Chrome带有内置的开发人员工具。 它具有多种功能，例如元素，网络和安全性。 今天，我们将100％专注于其JavaScript控制台。

When I started coding, I only used the JavaScript console for logging values like responses from the server, or the value of variables. But over time, and with the help of tutorials, I discovered that the console can do way more than I ever imagined.

当我开始编码时，我只使用JavaScript控制台记录诸如服务器响应或变量值之类的值。 但是随着时间的流逝，在教程的帮助下，我发现控制台的功能超出了我的想象。

Here are useful things you can do with it. If you’re reading this in Chrome (Or any other Browser) on a desktop, you can even open up its Developer Tools and try these out immediately.

您可以使用它来做一些有用的事情。 如果您是在台式机上的Chrome(或任何其他浏览器)中阅读此书的，则甚至可以打开其开发者工具并立即尝试。

1.选择DOM元素 (1. Select DOM Elements)

If you’re familiar with jQuery, you know how important the $(‘.class’) and $(‘#id’) selectors are. They select the DOM elements depending upon the class or ID associated with them.

如果您熟悉jQuery，就会知道$('。class')和$('＃id')选择器的重要性。 它们根据与它们关联的类或ID选择DOM元素。

But when you don’t have access to jQuery in the DOM, you can still do the same in the developer console.

但是，当您无权访问DOM中的jQuery时，仍然可以在开发人员控制台中执行相同的操作。

$(‘tagName’) $(‘.class’) $(‘#id’) and $(‘.class #id’) are equivalent to the document.querySelector(‘ ‘). This returns the first element in the DOM that matches the selector.

$('tagName')$('。class')$('＃id')和$('。class #id')等同于document.querySelector('')。 这将返回DOM中与选择器匹配的第一个元素。

You can use $$(‘tagName’) or $$(‘.class’) — note the double dollar signs — to select all the elements of the DOM depending on a particular selector. This also puts them into an array. You can again go ahead and select a particular element among them by specifying the position of that element in the array.

您可以使用$$('tagName')或$$('。class')(请注意使用双美元符号)来根据特定选择器选择DOM的所有元素。 这也将它们放入数组。 您可以再次指定数组中该元素的位置，然后从中选择一个特定元素。

For example, $$(‘.className’) will give you all the elements that have the class className, and $$(‘.className’)[0]and $$(‘.className’)[1] will give you the first and the second element respectively.

例如，$$('。className')将为您提供所有具有className类的元素，而$$('。className')[0]和$$('。className')[1]将为您提供第一个和第二个元素。

2.将浏览器转换为编辑器 (2. Convert Your Browser Into An Editor)

How many times have you wondered whether you could edit some text in the browser itself? The answer is yes, you can convert your browser into a text editor. You can add text to and remove text from anywhere in the DOM.

您想知道是否可以在浏览器本身中编辑一些文本？ 答案是肯定的，您可以将浏览器转换为文本编辑器。 您可以在DOM中的任何位置添加文本或从中删除文本。

You don’t have to inspect the element and edit the HTML anymore. Instead, go into the developer console and type the following:

您无需检查元素并再编辑HTML。 相反，进入开发者控制台并键入以下内容：

document.body.contentEditable=true

This will make the content editable. You can now edit almost anything and everything in the DOM.

这将使内容可编辑。 现在，您可以编辑DOM中的几乎所有内容。

3.查找与DOM中的元素相关的事件 (3. Find Events Associated with an Element in the DOM)

While debugging, you must be interested in finding the event listeners bound to an element in the DOM. The developer console makes it easier to find these.

调试时，您必须对找到绑定到DOM中的元素的事件侦听器感兴趣。 开发者控制台使查找它们变得更加容易。

getEventListeners($(‘selector’)) returns an array of objects that contains all the events bound to that element. You can expand the object to view the events:

getEventListeners($('selector'))返回对象数组 包含绑定到该元素的所有事件。 您可以展开对象 查看事件：

To find the Listener for a particular event, you can do something like this:

要查找特定事件的侦听器，可以执行以下操作：

getEventListeners($(‘selector’)).eventName[0].listener

This will display the listener associated with a particular event. Here eventName[0] is an array that lists all the events of a particular event. For example:

这将显示监听器 与特定事件相关联。 这里的eventName [0]是一个列出特定事件的所有事件的数组。 例如：

getEventListeners($(‘firstName’)).click[0].listener

…will display the listener associated with the click event of element with ID ‘firstName’.

…将显示与ID为“ firstName”的元素的click事件关联的侦听器。

4.监视事件 (4. Monitor Events)

If you want to monitor the events bound to a particular element in the DOM while they are executed, you can this in the console as well. There are different commands you can use to monitor some or all of these events:

如果要在执行事件时监视绑定到DOM中特定元素的事件，也可以在控制台中执行此操作。 您可以使用不同的命令来监视部分或全部这些事件：

• monitorEvents($(‘selector’)) will monitor all the events associated with the element with your selector, then log them in the console as soon as they’re fired. For example, monitorEvents($(‘#firstName’)) will log all the events bound to the element with the ID of ‘firstName’ .
  monitorEvents($('selector'))将使用选择器监视与该元素关联的所有事件，然后在触发它们后立即将它们记录在控制台中。 例如，monitorEvents($('＃firstName'))将记录绑定到ID为'firstName'的元素的所有事件。
• monitorEvents($(‘selector’),’eventName’) will log a particular event bound with an element. You can pass the event name as an argument to the function. This will log only a particular event bound to a particular element. For example, monitorEvents($(‘#firstName’),’click’) will log all the click events bound to the element with the ID ‘firstName’.
  monitorEvents($('selector')，'eventName')将记录与元素绑定的特定事件。 您可以将事件名称作为参数传递给函数。 这将仅记录绑定到特定元素的特定事件。 例如，monitorEvents($('＃firstName')，'click')将记录绑定到ID为'firstName'的元素的所有单击事件。
• monitorEvents($(‘selector’),[‘eventName1’,’eventName3',….]) will log multiple events depending upon your own requirements. Instead of passing a single event name as an argument, pass an array of strings that contains all the events. For example monitorEvents($(‘#firstName’),[‘click’,’focus’]) will log the click event and focus events bound to the element with the ID ‘firstName’ .
  monitorEvents($('selector')，['eventName1'，'eventName3'，....])将根据您的要求记录多个事件。 而不是传递单个事件名称作为参数，而是传递包含所有事件的字符串数组。 例如，monitorEvents($('＃firstName')，['click'，'focus'])将记录单击事件和绑定到ID为'firstName'的元素的焦点事件。
• unmonitorEvents($(‘selector’)) : This will stop monitoring and logging the events in the console.
  unmonitorEvents($('selector'))：这将停止监视和记录控制台中的事件。

5.查找代码块的执行时间 (5. Find the Time Of Execution of a Code Block)

The JavaScript console has an essential function called console.time(‘labelName’) which takes a label name as an argument, then starts the timer. There’s another essential function called console.timeEnd(‘labelName’) which also takes a label name and ends the timer associated with that particular label.

JavaScript控制台具有一个称为console.time('labelName')的基本功能，该功能将标签名称作为参数，然后启动计时器。 还有另一个称为console.timeEnd('labelName')的基本函数，该函数也使用标签名称并结束与该特定标签关联的计时器。

For example:

例如：

console.time('myTime'); //Starts the timer with label - myTimeconsole.timeEnd('myTime'); //Ends the timer with Label - myTime//Output: myTime:123.00 ms

The above two lines of code give us the time taken from starting the timer to ending the timer.

上面的两行代码为我们提供了从启动计时器到结束计时器所花费的时间。

We can enhance this to calculate the time taken for executing a block of code.

我们可以增强它来计算执行代码块所花费的时间。

For example, let’s say I want to find the time taken for the execution of a loop. I can do like this:

例如，假设我想查找执行循环所花费的时间。 我可以这样：

console.time('myTime'); //Starts the timer with label - myTimefor(var i=0; i < 100000; i++){  2+4+5;}console.timeEnd('mytime'); //Ends the timer with Label - myTime//Output - myTime:12345.00 ms

6.将变量的值排列到表中 (6. Arrange the Values of a Variable into a Table)

Let’s say we have an array of objects that looks like the following:

假设我们有一个对象数组，如下所示：

var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

When we type the variable name into the console, it gives us the values in the form of an array of objects. This is very helpful. You can expand the objects and see the values.

当我们在控制台中输入变量名时，它以对象数组的形式提供给我们值。 这非常有帮助。 您可以展开对象并查看值。

But this gets difficult to understand when the properties increase. Therefore, to get a clear representation of the variable, we can display them in a table.

但是当属性增加时，这变得很难理解。 因此，为了清楚地表示变量，我们可以在表中显示它们。

console.table(variableName) represents the variable and all its properties in a tabular structure. Here’s what this looks like:

console.table(variableName)以表格形式表示变量及其所有属性。 看起来是这样的：

7.检查DOM中的元素 (7. Inspect an Element in the DOM)

You can directly inspect an element from the console:

您可以直接从控制台检查元素：

• inspect($(‘selector’)) will inspect the element that matches the selector and take you to the Elements tab in the Chrome Developer Tools. For example inspect($(‘#firstName’)) will inspect the element with the ID ‘firstName’ and inspect($(‘a’)[3]) will inspect the 4th anchor element you have in your DOM.
  inspect($('selector'))将检查与选择器匹配的元素，并带您进入Chrome开发者工具中的Elements标签。 例如，inspect($('＃firstName'))将检查ID为'firstName'的元素，而inspect($('a')[3])将检查DOM中具有的第4个锚元素。
• $0, $1, $2, etc. can help you grab the recently inspected elements. For example $0 gives you the last-inspected DOM element, whereas $1 gives you the second last inspected DOM Element.
  $ 0，$ 1，$ 2等可以帮助您获取最近检查的元素。 例如，$ 0给您最后检查的DOM元素，而$ 1给您倒数第二个检查的DOM元素。

8.列出元素的属性 (8. List the Properties of an Element)

If you want to list all the properties of an element, you can do that directly from the Console.

如果要列出元素的所有属性，则可以直接从控制台进行。

dir($(‘selector’)) returns an object with all of the properties associated with its DOM element. You can expand these to view them in more detail.

dir($('selector'))返回一个具有与其DOM元素关联的所有属性的对象。 您可以展开它们以更详细地查看它们。

9.检索最后结果的值 (9. Retrieve the Value of your Last Result)

You can use the console as a calculator. And when you do this, you may need to follow up one calculation with a second one. Here’s how to retrieve the result of a previous calculation from memory:

您可以将控制台用作计算器。 并且，当您执行此操作时，您可能需要对第二个计算进行后续计算。 这是从内存中检索先前计算结果的方法：

$_

Here’s what this looks like:

看起来是这样的：

2+3+49 //- The Answer of the SUM is 9$_9 // Gives the last Result$_ * $_81  // As the last Result was 9Math.sqrt($_)9 // As the last Result was 81$_9 // As the Last Result is 9

10.清除控制台和内存 (10. Clear the Console and the Memory)

If you want to clear the console and its memory, just type:

如果要清除控制台及其内存，只需键入：

clear()

Then press enter. That’s all there is to it.

然后按Enter。 这里的所有都是它的。

These are just a few examples of what you can do with Chrome’s JavaScript console. I hope these tips make your life a little easier.

这些只是您可以使用ChromeJavaScript控制台执行操作的几个示例。 我希望这些技巧可以使您的生活更轻松。

Thanks for reading. If you liked this post, please feel free to recommend it to other people here on Medium by hitting the heart button below. You can find more about me, or follow me on Twitter, and here on Medium.

谢谢阅读。 如果您喜欢这篇文章，请点击下面的“心脏”按钮，将其推荐给Medium上的其他人。 您可以找到有关我的更多信息 ，或者在Twitter上关注我，也可以在Medium上关注我。

翻译自: https://www.freecodecamp.org/news/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329/