ue4菜单栏的碰撞图文

Designers, developers and geeks alike are always searching for tools to enhance their efficiency and make work easier. One such tool is the Web Developer extension for Firefox (also available for Chrome). Chris Pederick dished out this handy add-on 10 years ago in 2003.

设计师，开发人员和极客都一直在寻找工具来提高效率并简化工作。 一种这样的工具是Firefox的Web开发人员扩展(也可用于Chrome)。 克里斯·佩德里克(Chris Pederick)在10年前的2003年推出了这款便捷的附件。

Firefox 10.0, released in January of 2012, came with some new features labelled collectively as Developer Tools. These built-in tools didn’t include as many features as Pederick’s extension. However, included in Developer Tools was a bold, intuitive HTML and CSS inspector that allowed you to easily select and inspect each and every element on a web page.

2012年1月发布的Firefox 10.0带有一些新功能，这些功能统称为“开发人员工具”。 这些内置工具没有Pederick扩展程序所具有的众多功能。 但是，Developer Tools中包含一个大胆，直观HTML和CSS检查器，使您可以轻松地选择和检查网页上的每个元素。

Now, more than a year and a half later, Firefox (now at version 22) boasts a refined, sleek set of Developer Tools. But this set bears a new, yet familiar, name: Web Developer. This new Web Developer sports – among other tools – an inspector, style editor, profiler and responsive design view.

现在，一年半以后，Firefox(现在的版本为22)拥有完善，精致的开发人员工具集。 但这套名称带有一个新的但熟悉的名称：Web Developer。 除其他工具外，这个新的Web开发人员还可以使用检查器，样式编辑器，分析器和响应式设计视图。

检验员 (Inspector)

Activate the Inspector tool, then rollover or click an element on the page. This selects the element, and the inspector console reveals where the element is nested within the code, as well as displays an easily navigable breadcrumb showing where the element sits in the page hierarchy. There’s also a side panel that lets you see what CSS rules are declared for the element, what rules are computed or ignored and what the object’s position is within the box model.

激活检查器工具，然后将鼠标悬停或单击页面上的元素。 这将选择元素，检查器控制台将显示元素在代码中嵌套的位置，并显示易于导航的面包屑，以显示元素在页面层次结构中的位置。 还有一个侧面板，可让您查看为元素声明了哪些CSS规则，已计算或忽略了哪些规则以及对象在框模型中的位置。

样式编辑器 (Style Editor)

The Style Editor outputs a list of all the CSS stylesheets implemented on the web page, in a selectable-list format. Click a list item and the console loads that stylesheet and enables real time editing of the CSS.

样式编辑器以可选列表格式输出网页上实现的所有CSS样式表的列表。 单击一个列表项，控制台将加载该样式表并启用CSS的实时编辑。

探查器 (Profiler)

Launch the Profiler and click “Start” to create a JavaScript profile: see where your JavaScript code is spending all its time. Once you hit “Stop,” the console will save the profile and output the results in the form of a graph and datagrid, showing every JavaScript action that fired and how long it took to run. You can click and drag to select a specific portion of the graph. This selection will display in a new console tab, with a zoomed-in graph and a smaller, focused datagrid. You can create and save as many profiles as you need.

启动Profiler，然后单击“开始”以创建一个JavaScript配置文件：查看您JavaScript代码在所有时间上所花费的时间。 单击“停止”后，控制台将保存配置文件并以图形和数据网格的形式输出结果，显示触发的每个JavaScript操作以及运行所需的时间。 您可以单击并拖动以选择图形的特定部分。 此选择将显示在新的控制台选项卡中，其中包含放大的图和较小的集中数据网格。 您可以根据需要创建和保存任意数量的配置文件。

响应式设计视图 (Responsive Design View)

What really shines amid all the features of the new Web Developer is the Responsive Design View. Instead of resizing the browser window to show how your site will look on different screen sizes or devices, as the resize tool does from Pederick’s Web Developer extension, simply drag-resize the viewport within the browser window. Freely drag the viewport to whatever size you want, or choose a size from the drop-down list (you can add custom sizes to this list).

新Web开发人员的所有功能中真正发光的是响应式设计视图。 正如调整大小工具从Pederick的Web Developer扩展中所做的那样，不必调整浏览器窗口的大小来显示您的网站在不同屏幕尺寸或设备上的显示方式，只需在浏览器窗口内拖动视口即可。 将视口自由拖动到所需的任何大小，或从下拉列表中选择一个大小(可以在此列表中添加自定义大小)。

捷径 (Shortcuts)

Also, since many designers and developers are keyboard shortcut fanatics (myself included), the built-in Web Developer lets you show and hide all its components with a nice ‘n easy set of keyboard shortcuts:

同样，由于许多设计人员和开发人员都是键盘快捷键的狂热者(包括我自己)，内置的Web Developer使您可以使用一组不错的键盘快捷键来显示和隐藏其所有组件：

• Inspector: Ctrl + Shift + I检查器：Ctrl + Shift + I
• Style Editor: Shift + F7样式编辑器：Shift + F7
• Profiler: Shift + F5探查器：Shift + F5
• Responsive Design View: Ctrl + Shift + M响应式设计视图：Ctrl + Shift + M
• Scratchpad: Shift + F4便签本：Shift + F4
• Debugger: Ctrl + Shift + S调试器：Ctrl + Shift + S
• Developer Toolbar: Shift + F2开发人员工具栏：Shift + F2

Pederick’s Web Developer extension is a toolbar, so it’s always visible. But, you can add a “show/hide Web Developer” toggle button to Firefox. Click either 1) the Firefox button (top left) > “Options” > “Toolbar Layout…” or 2) “View” > “Toolbars” > “Customize…” to launch the “Customize Toolbar” pop-up. Then, drag the Web Developer button from the pop-up to wherever you want the button to appear among your toolbars.

Pederick的Web Developer扩展是一个工具栏，因此它始终可见。 但是，您可以向Firefox添加“显示/隐藏Web Developer”切换按钮。 单击1)Firefox按钮(左上角)>“选项”>“工具栏布局…”或2)“视图”>“工具栏”>“自定义…”，以启动“自定义工具栏”弹出窗口。 然后，将Web Developer按钮从弹出窗口拖到工具栏上您希望按钮出现的任何位置。

判决 (The Verdict)

So, you can ditch the Web Developer extension and stick with Firefox’s Web Developer, right? You could, but you’d be missing out on some powerful, and convenient, features. Features such as toolbar buttons to validate your CSS, HTML, RSS and hyperlinks via the W3C validation services; quick links that disable cache or cookies and clear form fields; and display options that hide, outline or label all instances of an element on the current page. The extension also features live, HTML editing capabilities.

因此，您可以放弃Web Developer扩展，而坚持使用Firefox的Web Developer，对吗？ 您可以，但是会缺少一些强大且方便的功能。 工具栏按钮等功能可通过W3C验证服务来验证CSS，HTML，RSS和超链接； 快速链接禁用缓存或cookie并清除表单字段； 并显示用于隐藏，概述或标记当前页面上元素的所有实例的选项。 该扩展程序还具有实时HTML编辑功能。

Therefore, pick and choose which features from either Web Developer best serve your work flow, and keep your coding or designing at top efficiency. In an open-source browser on the open web, it’s fitting that these tools bearing the same name are not battling for superiority. The Web Developer extension is a complement, rather than an opponent, to the built-in Web Developer.

因此，请从Web Developer中选择最适合您的工作流程的功能，并保持最高的编码或设计效率。 在开放的Web上的开源浏览器中，这些名称相同的工具没有争夺优势是很合适的。 Web开发人员扩展是内置Web开发人员的补充而不是反对者。

http://www.mozilla.org/en-US/firefox/10.0/releasenotes/ https://addons.mozilla.org/en-US/firefox/addon/web-developer/ http://chrispederick.com/ http://www.pcnexus.net/2013/05/mozilla-firefox-21-all-keyboard-shortcuts-2013.html

http://www.mozilla.org/zh-CN/firefox/10.0/releasenotes/ https://addons.mozilla.org/zh-CN/firefox/addon/web-developer/ http://chrispederick.com/ http://www.pcnexus.net/2013/05/mozilla-firefox-21-all-keyboard-shortcuts-2013.html

翻译自: https://www.sitepoint.com/toolbars-collide/

ue4菜单栏的碰撞图文