chrome 开发工具_我最喜欢的Chrome开发工具提示和技巧

chrome 开发工具

Chrome Developer Tools are a super powerful suite of tools for developing web applications. They can do so much, from very basic operations like traversing the DOM, to checking out network requests or even profiling your application's performance.

Chrome Developer Tools是用于开发Web应用程序的超强大工具套件。他们可以做很多事情，从遍历DOM等非常基本的操作到签出网络请求甚至分析应用程序的性能。

Among the big, everyday features they enable, there are quite a lot of gems to be found if you look deep enough. Features that might save you a click or two – and isn't that what we're all about here?

在它们启用的日常功能中，如果您看起来足够深，就会发现很多宝石。可以节省您一两次点击的功能-难道不是我们在这里所拥有的一切吗？

控制台中的jQuery风格DOM查询 (jQuery style DOM queries in the console)

jQuery is awesome. It has ruled the web for over a decade, and some statistics state that more than 70% of the most popular web pages in the world run some version of jQuery. That's crazy for a library dating all the way back to 2006.

jQuery很棒。它已经统治了网络十多年，一些统计数据表明，世界上超过70％的最受欢迎网页都运行某种版本的jQuery。对于一个可追溯到2006年的图书馆来说，这是很疯狂的。

The most popular API jQuery provides is the $, used for selecting DOM elements. The Chrome dev tools console allows you to make use of that $ selector, and more. Under the hood, $ is an alias to document.querySelector().

jQuery最受欢迎的API是$ ，用于选择DOM元素。 Chrome开发者工具控制台可让您使用$选择器等。在幕后， $是document.querySelector()的别名。

For example, if you want to simulate a click on an element you can do:

例如，如果要模拟元素的单击，可以执行以下操作：

Similarly, $$ is an alias to document.querySelectorAll():

同样， $$是document.querySelectorAll()的别名：

There are a few more tricks up the $ sleeve. Sometimes, a selector might be too complicated to write by heart, or you just don't know a selector specific enough. If you pick an element in the Elements tab you can retrieve it with the $0 variable in the console:

$袖子还有一些技巧。有时候，选择器可能太复杂而无法用心书写，或者您只是对选择器不够了解。如果在“元素”选项卡中选择一个元素，则可以在控制台中使用$0变量进行检索：

The console goes even further, allowing us to access not only the last selection, but the last 5, in order. The selections are exposed through the $0 - $4 variables:

控制台走得更远，使我们不仅可以访问最后一个选择，而且可以依次访问最后五个。通过$0 $4变量公开选择内容：

复制元素的属性 (Copying an element's properties)

The elements tab is a really useful tab. It stores our website DOM tree, it allows us to see the CSS applied to each element, and we can make changes to elements on the fly from it.

元素选项卡是一个非常有用的选项卡。它存储了我们的网站DOM树，它使我们能够看到应用于每个元素CSS，并且我们可以从中动态更改元素。

A really cool trick I've found is the ability to copy properties of an element (and not only properties) from the context menu.

我发现一个非常酷的技巧是能够从上下文菜单中复制元素的属性(不仅是属性)。

For example, you can copy an element's selector:

例如，您可以复制元素的选择器：

This selector might not be specific enough, or too specific for production, but should make your life a little easier when debugging.

这个选择器可能不够具体，或者对于生产来说太具体了，但是在调试时应该会使您的生活更轻松一些。

As you can see in the previous gif, the copy context menu hides a few more nifty things you can copy. You can copy the element's styles, JS path (document.querySelector(SELECTOR)) or XPath.

正如您在上一个gif中看到的那样，复制上下文菜单隐藏了一些可以复制的漂亮东西。您可以复制元素的样式，JS路径( document.querySelector(SELECTOR) )或XPath。

过滤网络请求 (Filtering network requests)

Sometimes, you work on a page that has a lot of requests. I mean, A LOT.

有时，您在一个有很多请求的页面上工作。我的意思是，很多。

Working your way through all those requests can be difficult when you look for something specific. Thankfully, you can very easily filter the requests.

当您寻找特定的内容时，很难解决所有这些请求。幸运的是，您可以非常轻松地过滤请求。

The filter toolbar has quick toggles for various request types, such as XHR/Fetch, stylesheets, JS scripts, images and more:

过滤器工具栏可快速切换各种请求类型，例如XHR / Fetch，样式表，JS脚本，图像等：

If you need to be even more specific, or so that you might find it quicker, you can just write a filter criteria in the filter input right above the toolbar to search in the requests' names:

如果您需要更加具体，或者为了更快地找到它，可以在工具栏上方的filter输入中编写过滤条件，以搜索请求的名称：

模拟不同的网络速度 (Emulating different network speeds)

Using the Network tab again we can test our site in various internet speeds. The default preset is online, and you'll enjoy the full bandwidth of your internet connection.

再次使用“ Network选项卡，我们可以各种互联网速度测试我们的网站。默认预设为online ，您将享受互联网连接的全部带宽。

Besides online, there are a few more presets available: Fast 3G, Slow 3G and offline, which vary in upload speed, download speed and latency. If you need to emulate a different, more exotic speed, you can add your own profile through the Add... button:

除了online ，还有更多可用的预设： Fast 3G ， Slow 3G和offline ，它们的上载速度，下载速度和延迟有所不同。如果需要模拟另一种更奇特的速度，可以通过“ Add...按钮Add...自己的配置文件：

在控制台中使用实时表达式 (Using Live Expressions in console)

What are Live Expressions?

什么是Live Expressions ？

Live Expressions are expressions which evaluate constantly at the top of your console. Say, you want to track a variable's value over time. You can log it over and over and over again:

Live Expressions是在控制台顶部不断求值的表达式。假设您要跟踪一段时间内变量的值。您可以一遍又一遍地记录它：

With Live Expressions, you can focus on your code, and let Chrome do the monitoring:

借助Live Expressions ，您可以专注于代码，并让Chrome进行监视：

This applies for variables defined both in the console and in a script.

这适用于在控制台和脚本中定义的变量。

模拟不同的设备 (Emulating different devices)

Those of us working on responsive applications know the feeling where you work really hard to make a beautiful layout, only to see it misbehave on devices with different resolutions.

我们那些从事响应式应用程序工作的人都知道，您很难在哪里做出漂亮的布局，只是发现它在不同分辨率的设备上表现不佳。

I'm not here to tell you about media queries, but rather a convenient way to test that they work.

我不是在这里向您介绍媒体查询，而是一种方便的方法来测试它们是否有效。

When you click on the button that looks like a tablet and a phone, you'll see that your browser's viewport changes to reflect a different device's dimensions.

单击看起来像平板电脑和电话的按钮时，您会看到浏览器的视口发生变化以反映其他设备的尺寸。

You can choose a device from a list of presets containing various popular devices, such as iPhone X, iPad Pro, Pixel 2, Pixel 2 XL and more. The list is admittedly a bit outdated, but I think it's good enough for most cases.

您可以从包含各种常用设备的预设列表中选择一种设备，例如iPhone X，iPad Pro，Pixel 2，Pixel 2 XL等。列表当然已经过时了，但是我认为对于大多数情况来说已经足够了。

If you can't find a device that fits your needs, you can set a custom resolution. As you can see, I've set a custom resolution to emulate a OnePlus 6 (which is my daily driver).

如果找不到适合您需求的设备，则可以设置自定义分辨率。如您所见，我已经设置了自定义分辨率来模拟OnePlus 6(这是我的日常驱动程序)。

强制元素的状态 (Forcing an element's state)

Have you ever faced a situation where you wanted to play with an element's :hover-specific CSS, but every time you moved your mouse to the styles section in the dev tools the element was no longer hovered?

您是否曾经遇到过要使用元素的:hover特定CSS的情况，但是每次将鼠标移至开发工具中的styles部分时，该元素就不再悬停了吗？

Well, Chrome dev tools exposes a nice way to lock an element's state, so you can fiddle with its properties with peace. This way you can quickly toggle an element's :active, :hover, :focus, :focus-within and :visited properties:

不错，Chrome开发人员工具提供了一种锁定元素状态的好方法，因此您可以安心地使用它的属性。这样，您可以快速切换元素的:active ， :hover ， :focus ， :focus-within和:visited属性：

Those are my tips and tricks I think everyone can benefit from. Thank you for reading!

这些是我认为每个人都可以从中受益的提示和技巧。感谢您的阅读！

This article was previously published on my blog: dorshinar.me. If you want to read more content, you can check out my blog as it would mean a lot to me.

该文章先前已发布在我的博客dorshinar.me上。如果您想内容，可以查看我的博客，因为这对我来说意义重大。