在Chrome DevTools中访问网页元素的简便方法

Many times when we’re writing JavaScript code, we want to quickly test if some element on the webpage is present or not or count the list of elements displayed.

很多时候，当我们编写JavaScript代码时，我们想快速测试网页上是否存在某些元素，或者计算显示的元素列表。

例如 (For example)

To count the number of jobs displayed:

要计算显示的作业数：

document.querySelectorAll('.job-item').length

To get the text of the button:

要获取按钮的文本：

document.querySelector('.btn').innerHTML

But it's tedious to type document.querySelector or document.querySelectorAll every time to do something.

但是每次都要执行一些操作来输入document.querySelector或document.querySelectorAll是很麻烦的。

So Chrome developer tools provide an easier way.

因此，Chrome开发人员工具提供了一种更简便的方法。

Instead of document.querySelector we can use $ and instead of document.querySelectorAll we can use $$

取而代之的document.querySelector我们可以用$和替代document.querySelectorAll我们可以使用$$

So no more need of typing the long text, just use $ or $$ and you’re done.

因此，不再需要键入长文本，只需使用$或$$就可以了。

Check out the below gif to see that in action

查看下面的gif，看看效果如何

use of $ and $$ in chrome developer tools

在Chrome开发人员工具中使用$和$$

That’s it for today. I hope you learned something new.

今天就这样。 我希望你学到了一些新东西。

翻译自: https://medium.com/javascript-in-plain-english/an-easy-way-of-accessing-elements-of-a-webpage-in-browser-9ad848dceba1