chrome前端開發工具_精通Chrome開發人員工具：更高級別的前端開發技術

chrome前端開發工具

by Ben Edelstein

通過本·愛德斯坦

You may already be familiar with the basic features of the Chrome Developer Tools: the DOM inspector, styles panel, and JavaScript console. But there are a number of lesser-known features that can dramatically improve your debugging or app creation workflows.

您可能已經熟悉Chrome開發人員工具的基本功能：DOM檢查器，樣式面板和JavaScript控制臺。但是，有許多鮮為人知的功能可以極大地改善調試或應用程序創建工作流程。

黑暗主題 (Dark Theme)

Chrome comes with a built-in dark theme for the dev tools. You can enable it by clicking the three dots icon in the upper right of the dev tools pane, clicking “settings”, and then toggling the theme.

Chrome帶有內置深色主題的開發工具。您可以通過單擊開發工具窗格右上方的三個點圖標，單擊“設置”，然后切換主題來啟用它。

I sometimes find this easier on my eyes, and, obviously, it looks much cooler :)

有時我覺得這更容易些，而且顯然很酷:)

選擇方式 (Selection Mode)

Chrome Developer Tools (DevTools) offer a number of ways to select elements — the most convenient of which is the selection mode.

Chrome開發者工具(DevTools)提供了多種選擇元素的方法-最方便的是選擇模式。

This tool, activated by pressing the mouse icon in the upper-left corner of the dev tools panel (or with cmd + shift + c), lets you select elements on the page simply by clicking on them.

通過按下開發工具面板左上角的鼠標圖標(或使用cmd + shift + c)激活該工具，只需單擊一下即可在頁面上選擇元素。

Once activated, you can move your mouse around the page and preview selection, then click to select an element to inspect. This tool is great for quickly selecting an element on the page since hitting cmd + shift + c will open the dev tools and go straight into selection mode.

激活后，您可以在頁面上移動鼠標并預覽選擇，然后單擊以選擇要檢查的元素。該工具非常適合快速選擇頁面上的元素，因為按cmd + shift + c會打開開發工具并直接進入選擇模式。

存儲為全局變量 (Store as global variable)

Inspecting complicated objects that are logged to the console can sometimes be tricky if they have many keys, or contain values that are hard to parse manually. Luckily, Chrome makes it easy to inspect such objects with JavaScript.

如果復雜的對象有很多鍵，或者包含難以手動解析的值，則檢查登錄到控制臺的復雜對象有時可能很棘手。幸運的是，Chrome使使用JavaScript輕松檢查此類對象變得容易。

To do so, right click on an object in the console and press “store as global variable”. This stores the object as a global variable accessible in the console called temp1 which you can then work with using JavaScript.

為此，請在控制臺中右鍵單擊一個對象，然后按“存儲為全局變量”。它將對象存儲為全局變量，該全局變量可在名為temp1的控制臺中訪問，然后可以使用JavaScript進行操作。

動畫工具 (Animation Tools)

Recently, the Chrome team added a number of new features for debugging and for creating animations.

最近，Chrome團隊添加了許多新功能，用于調試和創建動畫。

Clicking the dropdown in the upper-left corner of the console reveals an “Animations” pane that lets you limit the speed for all animations on a site.

單擊控制臺左上角的下拉菜單，將顯示一個“動畫”窗格，可用于限制網站上所有動畫的速度。

You can also pause all animations. This is particularly useful for a site that is buzzing with animated content.

您也可以暫停所有動畫。這對于充斥著動畫內容的網站特別有用。

Clicking on the purple curve icon in an element’s transition property lets you view the motion curve for an animation, and fine-tune its properties. In addition, you can use the arrow icons to scroll through a list of preset animations to apply to your element.

單擊元素的transition屬性中的紫色曲線圖標，可以查看動畫的運動曲線，并對其屬性進行微調。另外，您可以使用箭頭圖標滾動瀏覽要應用于您的元素的預設動畫列表。

模擬元素偽狀態 (Simulate Element Pseudo State)

Another handy tool for styling elements is the element state simulator, which is accessed by clicking the :hov icon in the upper-right corner of the Styles panel.

另一個用于設置元素樣式的便捷工具是元素狀態模擬器，可通過單擊“樣式”面板右上角的:hov圖標來訪問它。

This tool lets you simulate the element pseudo states of hover, active, focused, and visited and view styles that are associated with those selectors.

使用此工具，您可以模擬懸停，活動，集中和訪問的元素偽狀態以及與這些選擇器關聯的樣式。

To add styles for those pseudo states, add a new selector (with the + icon) and add :<state> to the end of the selector string.

要為這些偽狀態添加樣式，請添加一個新的選擇器(帶有+圖標)，并將:<sta te>添加到選擇器字符串的末尾。

For example, to add a hover rule to an li with class logo, make a new selector, li.logo:hover, and add styles there.

例如，要向帶有class logo的li添加一個懸停規則，請創建一個新的選擇器li.logo:hover ，并在其中添加樣式。

You can then test your styles by checking the :hover element state to simulate hovering on the element.

然后，您可以通過檢查:hover元素狀態以模擬元素上的:hover來測試樣式。

美化CSS和JavaScript (Prettify CSS and JavaScript)

Debugging or viewing minified JavaScript and CSS is very difficult. But luckily DevTools provides a tool that makes doing this a bit easier.

調試或查看縮小JavaScript和CSS非常困難。但是幸運的是，DevTools提供了一個使此操作變得容易一些的工具。

After opening a minified file in the “Sources” tab, you can click the brackets logo in the lower left corner of the file, and DevTools will “prettify” the code.

在“源”選項卡中打開縮小的文件后，您可以單擊文件左下角的方括號徽標，DevTools將“整理”代碼。

This works quite well with CSS files, and does a decent job with JavaScript, though some information (like variable names) is lost in the minification process.

盡管在縮小過程中會丟失一些信息(例如變量名)，但這在CSS文件上工作得很好，并且在JavaScript上也做得不錯。

Alt +向上/ Alt +向下 (Alt + Up / Alt + Down)

When debugging CSS, you can select a property and use the up/down keys to tweak it’s value. By default, the arrow keys adjust values by +/- 1. However, by holding the alt key, you can use the arrow keys to adjust values finely in steps of 0.1, which is particularly useful when working with fractional values.

調試CSS時，您可以選擇一個屬性，然后使用向上/向下鍵調整其值。默認情況下，箭頭鍵將值調整+/- 1 。但是，通過按住alt鍵，您可以使用箭頭鍵以0.1步長精細調整值，這在處理分數值時特別有用。

Conversely, you can hold shift to adjust values in steps of 10.

相反，您可以按住shift鍵以10步長調整值。

保留日志 (Preserve Log)

Preserve log is a checkbox that lets you persist logs between page refreshes. This is useful when debugging website issues that require you to refresh the page, since all console output is otherwise cleared.

保留日志是一個復選框，可讓您在頁面刷新之間保留日志。在調試需要刷新頁面的網站問題時，此功能很有用，因為否則會清除所有控制臺輸出。

When this option is enabled, a new type of “Navigation” log appears in the console to show page refreshes or navigation events to different pages.

啟用此選項后，控制臺中將出現一種新型的“導航”日志，以顯示頁面刷新或導航到不同頁面的事件。

網絡+日志過濾器 (Network + Log Filters)

When debugging an app that has a lot of network requests or console logs, it can be useful to filter for particular types of events.

調試具有大量網絡請求或控制臺日志的應用程序時，篩選特定類型的事件可能很有用。

Chrome has a filtering language that supports many different properties, as well as operators like * to do wildcard matches.

Chrome的過濾語言支持許多不同的屬性，以及*運算符可進行通配符匹配。

If you type “-”, Chrome will expose a typeahead that shows the various properties you can filter for. You can also toggle on “regex” mode to do a regex match on the data shown in each row.

如果您輸入“-”，Chrome將顯示一個預輸入內容，顯示您可以過濾的各種屬性。您也可以啟用“正則表達式”模式以對每行中顯示的數據進行正則表達式匹配。

代碼覆蓋率 (Code Coverage)

Code coverage lets you run your web app, then for each JavaScript and CSS file, see which lines of code ran and which didn’t. This is helpful since when working on a complex or long-term project, it is easy to accumulate dead code.

代碼覆蓋率使您可以運行Web應用程序，然后針對每個JavaScript和CSS文件查看已運行的代碼行和未運行的代碼行。這很有用，因為在進行復雜或長期的項目時，很容易積累無效代碼。

To use it, make sure you have Chrome 59 or higher, and go to the “Coverage” tab. Press “record” and then start using your app. When you’re done, Chrome will show you the exact code that ran during your session.

要使用它，請確保您擁有Chrome 59或更高版本，然后轉到“覆蓋率”標簽。按“記錄”，然后開始使用您的應用程序。完成后，Chrome會向您顯示會話中運行的確切代碼。

生產中的調試問題 (Debugging Issues in Production)

DevTools only works if you’re running your app on your own machine. If you’re interested in understanding bugs and performance issues that users see in production, try LogRocket.

僅當您在自己的計算機上運行應用程序時，DevTools才有效。如果您想了解用戶在生產中看到的錯誤和性能問題，請嘗試LogRocket 。

LogRocket is a front-end logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from React, Angular, and Vue.js.

LogRocket是一個前端日志記錄工具，可讓您像在您自己的瀏覽器中一樣重播問題。 LogRocket無需猜測錯誤發生的原因，也不要求用戶提供屏幕截圖和日志轉儲，而是讓您重播會話以快速了解問題所在。無論框架如何，它都可以完美地與任何應用程序配合使用，并且具有用于記錄來自React，Angular和Vue.js的其他上下文的插件。

LogRocket instruments your app to record console logs, network requests/responses with headers + bodies, browser metadata, Redux actions/state, and performance timings. It also records the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

LogRocket使用您的應用程序來記錄控制臺日志，帶有標頭+正文的網絡請求/響應，瀏覽器元數據，Redux操作/狀態以及性能計時。它還將HTML和CSS記錄在頁面上，甚至可以對最復雜的單頁面應用程序重新創建像素完美的視頻。

You can check out LogRocket here.

您可以在此處簽出LogRocket 。

LogRocket | Logging and Session Replay for JavaScript AppsLogRocket helps you understand problems affecting your users, so that you can get back to building great software.logrocket.com

LogRocket | JavaScript應用程序的日志記錄和會話重播 LogRocket可幫助您了解影響用戶的問題，以便您可以重新構建出色的軟件。 logrocket.com

Thanks for reading. I hope these advanced DevTools techniques help you build better apps with less stress.

謝謝閱讀。我希望這些先進的DevTools技術可以幫助您以更少的壓力構建更好的應用程序。