本文共 10566 字,大约阅读时间需要 35 分钟。
by Swagat Kumar Swain
由Swagat Kumar Swain
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(或任何其他浏览器)中阅读此书的,则甚至可以打开其开发者工具并立即尝试。
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]将为您提供第一个和第二个元素。
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中的几乎所有内容。
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事件关联的侦听器。
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中特定元素的事件,也可以在控制台中执行此操作。 您可以使用不同的命令来监视部分或全部这些事件:
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
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)以表格形式表示变量及其所有属性。 看起来是这样的:
You can directly inspect an element from the console:
您可以直接从控制台检查元素:
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元素关联的所有属性的对象。 您可以展开它们以更详细地查看它们。
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
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 , or follow me on , and here on .
谢谢阅读。 如果您喜欢这篇文章,请点击下面的“心脏”按钮,将其推荐给Medium上的其他人。 您可以找到更多 ,或者在关注我,也可以在上关注我。
翻译自:
转载地址:http://keewd.baihongyu.com/