火狐浏览器添加css调试
The following introduction to CSS code-quality tools is an extract from Tiffany’s new book, CSS Master, 2nd Edition.
以下对CSS代码质量工具的介绍摘自Tiffany的新书CSS Master，第二版 。
On your road to becoming a CSS master, you’ll need to know how to troubleshoot and optimize your CSS. How do you diagnose and fix rendering problems? How do you ensure that your CSS creates no performance lags for end users? And how do you ensure code quality?
在成为CSS大师的过程中，您需要了解如何对CSS进行故障排除和优化。 您如何诊断和修复渲染问题？ 您如何确保CSS对最终用户不会造成性能延迟？ 以及如何确保代码质量？
Knowing which tools to use will help you ensure that your front end works well.
知道使用哪种工具将帮助您确保前端正常运行。
In this article, we’ll delve into the browser-based developer tools for Chrome, Safari, Firefox, and Microsoft Edge.
在本文中，我们将深入研究基于浏览器的Chrome，Safari，Firefox和Microsoft Edge开发人员工具。
Most desktop browsers include an element inspector feature that you can use to troubleshoot your CSS. Start using this feature by right-clicking and selecting Inspect Element from the menu. Mac users can also inspect an element by clicking the element while pressing the Ctrl key. The image below indicates what you can expect to see in Firefox Developer Edition.
大多数桌面浏览器都包含一个元素检查器功能，可用于对CSS进行故障排除。 右键单击并从菜单中选择“ 检查元素” ，开始使用此功能。 Mac用户还可以通过在按住Ctrl键的同时单击元素来检查元素。 下图显示了在Firefox Developer Edition中可以看到的内容。
The developer tools of Firefox Developer Edition Firefox开发人员版的开发人员工具In Firefox, Chrome and Safari you can also press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (macOS) to open the developer tools panel. The image below shows the Chrome developer tools.
在Firefox，Chrome和Safari中，您还可以按Ctrl + Shift + I (Windows / Linux)或Cmd + Option + I (macOS)打开开发人员工具面板。 下图显示了Chrome开发人员工具。
Chrome Developer Tools Chrome开发者工具While in Microsoft Edge, open developer tools by pressing the F12 key, as seen in below.
在Microsoft Edge中，按F12键打开开发人员工具，如下所示。
Microsoft Edge Developer Tools Microsoft Edge开发人员工具You can also open each browser’s developer tools using the application’s menu:
您还可以使用应用程序的菜单打开每个浏览器的开发人员工具：
Microsoft Edge: Tools > Developer Tools
Microsoft Edge： 工具>开发人员工具
Firefox: Tools > Web Developer
Firefox： 工具> Web开发人员
Chrome: View > Developer
Chrome： 查看>开发人员
Safari: Develop > Show Web Inspector
Safari： 开发>显示Web检查器
In Safari, you may have to enable the Develop menu first by going to Safari > Preferences… > Advanced and checking the box next to Show Develop menu in menu bar. The view for Safari developer tools is illustrated below.
在Safari中，您可能必须先启用Develop菜单，方法是转到Safari>偏好设置…>高级，然后选中菜单栏中的Show Develop菜单旁边的框。 Safari开发者工具的视图如下所示。
Safari 11 developer tools Safari 11开发人员工具After opening the developer tools interface, you may then need to select the correct panel:
打开开发人员工具界面后，您可能需要选择正确的面板：
Microsoft Edge: DOM Explorer
Microsoft Edge： DOM资源管理器
Firefox: Inspector
Firefox： 检查器
Chrome: Elements
Chrome： 元素
Safari: Elements
Safari： 元素
You’ll know you’re in the right place when you see HTML on one side of the panel, and CSS rules on the other.
当您在面板的一侧看到HTML而在另一侧看到CSS规则时，您就会知道您来对地方了。
Note: The markup you’ll see in the HTML panel is a representation of the DOM. It’s generated when the browser finishes parsing the document and may differ from your original markup. Using View Source reveals the original markup, but keep in mind that for JavaScript applications there may not be any markup to view.
注意：您将在HTML面板中看到的标记是DOM的表示。 它是在浏览器完成文档解析后生成的，可能与原始标记不同。 使用“ 查看源代码”会显示原始标记，但是请记住，对于JavaScript应用程序，可能没有要查看的标记。
Sometimes an element isn’t styled as expected. Maybe a typographical change failed to take, or there’s less padding around a paragraph than you wanted. You can determine which rules are affecting an element by using the Styles panel of the Web Inspector.
有时元素的样式不符合预期。 可能没有进行印刷上的更改，或者段落周围的空白比您想要的少。 您可以使用Web Inspector的“样式”面板来确定哪些规则正在影响元素。
Browsers are fairly consistent in how they organize the Styles panel. Inline styles, if any, are typically listed first. These are styles set using the style attribute of HTML, whether by the CSS author or programmatically via scripting.
浏览器在“ 样式”面板的组织方式上相当一致。 内联样式(如果有的话)通常会首先列出。 这些样式是使用HTML的style属性设置的，无论是CSS创作者还是通过脚本编写的样式。
Inline styles are followed by a list of style rules applied via author stylesheets—those written by you or your colleagues. Styles in this list are grouped by media query and/or filename.
内联样式后面是通过作者样式表(由您或您的同事编写的样式表)应用的样式规则列表。 此列表中的样式按媒体查询和/或文件名分组。
Authored style rules precede user agent styles. User agent styles are the browser’s default styles. They too have an impact on your site’s look and feel. (In Firefox, you may have to select the Show Browser Styles option in order to view user agent styles. You can find this setting in the Toolbox Options panel.)
创作的样式规则在用户代理样式之前。 用户代理样式是浏览器的默认样式。 它们也会对您网站的外观和风格产生影响。 (在Firefox中，可能必须选择“ 显示浏览器样式”选项才能查看用户代理样式。您可以在“ 工具箱选项”面板中找到此设置。)
Properties and values are grouped by selector. A checkbox sits next to each property, letting you toggle specific rules on and off. Clicking on a property or value allows you to change it, so you can avoid having to edit, save and reload.
属性和值按选择器分组。 每个属性旁边都有一个复选框，您可以打开或关闭特定规则。 单击属性或值可以更改它，因此可以避免编辑，保存和重新加载。
As you inspect styles, you may notice that some properties appear crossed out. These properties have been overridden either by a cascading rule, a conflicting rule, or a more specific selector, as depicted below.
当您检查样式时，您可能会注意到某些属性显示为划线。 这些属性已被级联规则，冲突规则或更具体的选择器覆盖，如下所示。
Identifying property and value pairs that have been superseded by another declaration 标识已被另一个声明取代的属性和值对In the image above, the background, border, and font-size declarations of the [type=button] block are displayed with a line through them. These declarations were overridden by those in the .close block, which succeeds the [type=button] in our CSS.
在上图中， [type=button]块的background ， border和font-size声明通过一行显示。 这些声明被.close块中的声明覆盖，该声明在我们CSS中的[type=button]之后。
You can also use the element inspector to spot invalid or unsupported properties and property values. In Chromium-based browsers, invalid CSS rules both have a line through them and an adjacent warning icon, which can be seen below.
您还可以使用元素检查器来发现无效或不受支持的属性和属性值。 在基于Chromium的浏览器中，无效CSS规则都在它们之间有一行，并带有一个相邻的警告图标，如下所示。
Spotting an invalid CSS property value using Chrome 使用Chrome发现无效CSS属性值Firefox also strikes through invalid or unsupported properties and values. Firefox Developer Edition also uses a warning icon, as shown below. Standard Firefox displays errors similarly, but doesn’t include the warning icon.
Firefox还会删除无效或不受支持的属性和值。 Firefox Developer Edition也使用警告图标，如下所示。 标准Firefox同样显示错误，但不包含警告图标。
How Firefox Developer Edition indicates invalid properties and values Firefox Developer Edition如何指示无效的属性和值In the screenshot below, Safari strikes through unsupported rules with a red line, and highlights them with a yellow background and warning icon.
在下面的屏幕截图中，Safari用红线删除了不受支持的规则，并用黄色背景和警告图标突出显示了它们。
An invalid CSS property value in Safari Safari中CSS属性值无效Microsoft Edge instead uses a wavy underline to indicate unsupported properties or values.
Microsoft Edge而是使用波浪形下划线指示不支持的属性或值。
An unsupported CSS property value in Microsoft Edge Microsoft Edge中不受支持CSS属性值When it comes to basic debugging and inheritance conflicts, whichever browser you choose doesn’t matter. Familiarize yourself with all of them, however, for those rare occasions when you need to diagnose a browser-specific issue.
当涉及到基本调试和继承冲突时，无论选择哪种浏览器都无关紧要。 但是，在需要诊断特定于浏览器的问题的极少数情况下，请熟悉所有这些信息。
On-device testing is always best. During development, however, it’s helpful to simulate mobile devices with your desktop browser. All major desktop browsers include a mode for responsive debugging.
设备上的测试始终是最好的。 但是，在开发过程中，使用桌面浏览器模拟移动设备会很有帮助。 所有主要的桌面浏览器都包含一种用于响应式调试的模式。
Chrome offers a device toolbar feature as part of its developer toolkit. To use it, click the device icon (pictured below) in the upper-left corner, next to the Select an element icon.
Chrome在其开发人员工具包中提供了设备工具栏功能。 要使用它，请单击左上角“ 选择元素”图标旁边的设备图标(如下图所示)。
Chrome’s Responsive Design Mode icon Chrome的自适应设计模式图标Device mode lets you mimic several kinds of Android and iOS devices, including older devices such as the iPhone 5 and Galaxy S5. Device mode also includes a network throttling feature for approximating different network speeds, and the ability to simulate being offline.
设备模式可让您模仿几种Android和iOS设备，包括较旧的设备，例如iPhone 5和Galaxy S5。 设备模式还包括用于限制不同网络速度的网络限制功能，以及能够模拟离线状态的功能。
In Firefox, the equivalent mode is known as Responsive Design Mode. Its icon resembles early iPods. You’ll find it on the right side of the screen, in the developer tools panel, as shown below.
在Firefox中，等效模式称为响应式设计模式 。 其图标类似于早期的iPod。 您将在屏幕右侧的开发人员工具面板中找到它，如下所示。
Firefox’s Responsive Design Mode icon Firefox的响应式设计模式图标In responsive mode, you can toggle between portrait and landscape orientations, simulate touch events, and capture screenshots. Like Chrome, Firefox also allows developers to simulate slow connections via throttling.
在响应模式下，您可以在纵向和横向之间切换，模拟触摸事件并捕获屏幕截图。 像Chrome一样，Firefox也允许开发人员通过节流来模拟慢速连接。
Microsoft Edge makes it possible to mimic Windows mobile devices—such as the Surface—with its Emulation tab. Select Windows Phone from the Browser profile menu, as shown below.
Microsoft Edge的“ 仿真”选项卡使模仿Windows移动设备(例如Surface)成为可能。 从浏览器配置文件菜单中选择Windows Phone ，如下所示。
SitePoint.com using Microsoft Edge’s device emulation mode 使用Microsoft Edge的设备仿真模式的SitePoint.comIn addition to mimicking orientation and resolution, emulation mode enables you to test geolocation features. However, you can’t use its emulation mode to simulate network conditions.
除了模拟方向和分辨率外，仿真模式还使您能够测试地理位置特征。 但是，您不能使用其仿真模式来模拟网络条件。
Safari’s Responsive Design Mode is in its developer toolkit. It’s similar to Emulation Mode in Firefox, but adds the ability to mimic iOS devices, as illustrated below.
Safari的响应式设计模式位于其开发人员工具包中。 它类似于Firefox中的“仿真模式”，但增加了模仿iOS设备的功能，如下所示。
SitePoint.com as viewed using Safari’s responsive design mode 使用Safari的自适应设计模式查看的SitePoint.comTo enter Safari’s responsive design mode, select Develop > Enter Responsive Design Mode, or Cmd + Ctrl + R.
要进入Safari的自适应设计模式，请选择“ 开发”>“进入自适应设计模式” ，或选择Cmd + Ctrl + R。
Tiffany’s book goes on to discuss debugging for UI responsiveness, covering reflows and repaints and other browser-based performance tools, such as working with each browser’s Timeline tool.
Tiffany的书继续讨论了UI响应性的调试，涵盖了重排和重绘以及其他基于浏览器的性能工具，例如与每个浏览器的时间轴工具一起使用。
To read more on CSS debugging and optimization, check out Tiffany’s book, CSS Master, 2nd Edition.
要了解有关CSS调试和优化的更多信息，请查阅Tiffany的书CSS Master，第二版 。
Related articles:
相关文章：
CSS Debugging and Optimization: Code-quality Tools
CSS调试和优化：代码质量工具
CSS Debugging and Optimization: Minification with CSSO
CSS调试和优化：使用CSSO进行压缩
翻译自: https://www.sitepoint.com/css-debugging-and-optimization-browser-based-developer-tools/
火狐浏览器添加css调试
相关资源：jdk-8u281-windows-x64.exe