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上 。 如果您想內容，可以查看我的博客，因為這對我來說意義重大。

翻譯自: https://www.freecodecamp.org/news/awesome-chrome-dev-tools-tips-and-tricks/

chrome 開發工具