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技术可以帮助您以更少的压力构建更好的应用程序。