当前位置：文江博客知识库简体中文文档 Tools Migrating_from_Firebug

Firebug迁移 - Firefox 开发者工具编辑

当开发人员想从 Firebug 迁移到火狐开发者工具中的时候，你可能想知道你喜欢的 Firebug 特性有哪些还存在于开发者工具中。下面的列表目标是帮助你从开发者工具中找出它们。

要使用最新的开发者工具和特性，请下载火狐开发者版本。

概述

激活

Firebug 是靠基于遵从同一规则的网址来激活的. 这意味着当你在同样的来源网址却在不同的tab打开时, Firebug 会自动打开。当你在同一个 tab 打开不同的网址时，它自动关闭。另一方面开发者工具的激活是基于 tab 的。这意味着当你在一个 tab 打开开发者工具时，就算你在不同的网站上切换，它也会一直开着。当你切换到另外的 tab，它们是关掉的。

按 F12 打开 Firebug. 也可以按 Ctrl+Shift+C / Cmd+Opt+C 打开并使用它查看元素. 开发者工具使用相同的快捷键, 同时也提供了键盘快捷键。例如，网络监视器可以使用 Ctrl+Shift+Q / Cmd+Opt+Q 打开，Web 控制台使用 Ctrl+Shift+K / Cmd+Opt+K ，调试器 Ctrl+Shift+S / Cmd+Opt+S.

Web 控制台

Web 控制台等价于 Firebug 的 Console panel . 它显示与网页相关联的日志信息，并允许您通过它的命令行执行 JavaScript 表达式。两者间的表示有些不同，它们可能bug 1269730在中被改变。

日志信息筛选

Firebug 在工具栏上使用选项菜单和过滤按钮来筛选日志信息。开发者工具提供了类似的功能 filter buttons inside its toolbar — 整合在同一个地方.

命令行 API

为了方便，Firebug 在命令行 API中为您提供了一些特殊函数，开发者工具命令行中提供了一些常规的函数，与 Firebug 相比可能多一些新的函数缺失一些原有的函数。

控制台 API

为了从页面上打印一些东西到控制台中，Firebug 提供了控制台 API 供页面调用。开发者工具提供相同的 API，所以你的所有 console.* 语法都可以继续工作。

日志持久化

在 Firebug 中你可以通过点击页面导航工具栏中的持久化按钮去保存和重新加载日志信息。在开发者工具中可以在工具箱的设置选项卡中设置 Enable persistent logs 选项。

服务端日志

Firebug 扩展比如 FirePHP 允许把服务端的日志信息打印到 Firebug 控制台。这个功能也已经整合到开发者工具中使用 ChromeLogger 协议并且不需要安装任何扩展。

历史命令

Firebug 历史命令访问通过命令行上的一个按钮，在开发者工具命令行中通过点按 ↑/↓ 访问。

对象属性检查

通过点击控制面板中输出的对象你可以在 DOM 选项卡中查看对象的属性和方法。在火狐开发者工具你一样可以查看对象信息。不同的是它在 Web 控制面板中的一个侧边栏展示方法和属性信息。

显示网络请求

Firebug 控制面板允许打印AJAX 请求信息 (aka XMLHttpRequests)。开发者工具的 Web 控制面板中通过网络->XHR 也可以访问。而且，开发者工具 Web 控制面板甚至允许你通过网络>日志显示所有其他的网络请求。

浏览 JSON 和 XML 结构数据

当展开控制面板中的一个请求时，Firebug 打开一个特殊标签页查看AJAX请求响应的 JSON 数据和 XML 数据。开发者工具 Web 控制台直接带响应标签页展示这些结构数据。

多行命令行

Firebug 控制台有一个多行命令的命令编辑器。开发者工具没有这样的命令编辑器(在bug 1133849中提到)，但是又一个单独的工具 Scratchpad，可以添加到工具箱的面板中或者通过火狐菜单> Developer > Scratchpad 或者 Shift + F4在独立的窗口打开。而且普通的命令行识别到一个还没有结束的命令的时候能够智能的添加换行，比如：你输入了 document. 然后输入了回车。你也可以手动的输入 Shift + Enter来添加换行。

响应预览

Firebug 控制面板的一个网络请求日志展开的时候会有一个预览标签页。开发者工具Web控制面板会展示预览在响应标签页。现在会丢失 HTML、XML 和 SVG 预览，详见bug 1247392 and bug 1262796，然而，当你点击请求URL后切换到 Network Monitor(网络监控)，会有一个预览页面。

查看器

Firebug 拥有一个 HTML 面板，它允许编辑与之相关的 HTML/XML/SVG 和 CSS。DevTools 中的这个功能由页面查看器提供。

编辑 HTML

页面查看其中的标签属性以及内容都可以像在 Firebug 中那样行内编辑。它甚至还允许编辑标签名。

你还可以直接编辑 HTML 。在 Firebug 中你右键单击那个节点然后在上下文菜单中选择编辑 HTML... 。在 DevTools 中这个选项也在上下文菜单之中。这个选项叫做作为 HTML 编辑。变化的即时预览当前仍然缺失，这被追踪在 bug 1067318 和 bug 815464 中。

复制 HTML 和相关信息

Firebug's HTML panel allows to copy the inner and outer HTML of an element as well as the CSS and XPath to it via the context menu of an element. The Page Inspector provides the same functionality except copying XPaths. This is covered by bug 987877.

Firebug 的 HTML 面板允许通过某元素的上下文菜单来复制它内部和外部的 HTML代码以及CSS 和 XPath 等。页面查看器提供相同的功能，除了 XPaths 的复制。这个问题由 bug 987877 覆盖。

Edit CSS

Both tools allow to view and edit the CSS rules related to the element selected within the node view in a similar way. Firebug has a Style side panel for this, the DevTools have a Rules side panel.

In Firebug you add new rules by right-clicking and choosing Add Rule... from the context menu. The DevTools also have a context menu option for that named Add New Rule and additionally have a + button within the Rules panel's toolbar to create new rules.

To edit element styles, i.e. the CSS properties of the style attribute of an element, in Firebug you have to right-click into the Style side panel and choose Edit Element Style... from the context menu. The DevTools display an element {} rule for this purpose, which requires a single click into it to start editing the properties.

Auto-completion of CSS

As in Firebug, the Rules view provides an auto-completion for the CSS property names and their values. A few property values are not auto-completed yet, which is tracked in bug 1337918.

Copy & paste CSS

Firebug's Style side panel as well as the DevTools' Rules side panel provide options within their context menus to copy the CSS rule or the style declarations. The DevTools additionally provide an option to copy the selector of a rule and copy disabled property declarations as commented out. They are missing the option to copy the whole style declaration, though this can be achieved by selecting them within the panel and copying the selection by pressing Ctrl+C or via the context menu.

The Rules side panel of the DevTools is smarter when it comes to pasting CSS into it. You can paste whole style declarations into an existing rule property declarations which are commented out are automatically disabled.

Toggle pseudo-classes

Firebug lets you toggle the CSS pseudo-classes :hover, :active and :focus for an element via the options menu of the Style side panel. In the DevTools there are two ways to do the same. The first one is to toggle them via the pseudo-class panel within the Rules side panel. The second one is to right-click and element within the node view and toggle the pseudo-classes via the context menu.

Examine CSS shorthand properties

CSS shorthand properties can be split into their related longhand properties by setting the option Expand Shorthand Properties within the Style side panel. The DevTools' Rules panel is a bit smarter and allows you to expand individual shorthand properties by clicking the twisty besides them.

Only show applied styles

The Style side panel in Firebug has an option to display only the properties of a CSS rule that are applied to the selected element and hide all overwritten styles. There is no such feature in the Rules side panel of the DevTools, but it is requested in bug 1335327.

Inspect box model

In Firebug the box model can be inspected via the Layout side panel. In the DevTools the box model is part of the Computed side panel. Both tools highlight the different parts of the box model within the page when hovering them in the box model view. Also, both tools allow you to edit the different values inline via a click on them.

Inspect computed styles

The computed values of CSS properties are displayed within the DevTools' Computed side panel like within Firebug's Computed side panel. The difference is that in the DevTools the properties are always listed alphabetically and not grouped (see bug 977128) and there is no option to hide the Mozilla specific styles, therefore there is an input field allowing to filter the properties.

Inspect events

Events assigned to an element are displayed in the Events side panel in Firebug. In the DevTools they are shown when clicking the small 'ev' icon besides an element within the node view. Both tools allow to display wrapped event listeners (e.g. listeners wrapped in jQuery functions). To improve the UI of the DevTools, there is also a request to add an Events side panel to them like the one in Firebug (see bug 1226640).

Stop script execution on DOM mutation

In Firebug you can break on DOM mutations, that means that when an element is changed, the script execution is stopped at the related line within the JavaScript file, which caused the change. This feature can globally be enabled via the Break On Mutate button, or individually for each element and for different types of changes like attribute changes, content changes or element removal. Unfortunately, the DevTools do not have this feature yet (see bug 1004678). To stop the script execution there, you need to set a breakpoint on the line with the modification within the Debugger panel.

Search for elements via CSS selectors or XPaths

Firebug allows to search for elements within the HTML panel via CSS selectors or XPaths. Also the DevTools' Inspector panel allows to search for CSS selectors. It even displays a list with matching IDs or classes. Searching by XPaths is not supported though (see bug 963933.

调试器

What's the Script panel in Firebug, is the Debugger panel in the DevTools. Both allow you to debug JavaScript code executed on a website.

Switch between sources

Firebug has a Script Location Menu listing all JavaScript sources related to the website. Those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, eval(), new Function(), etc.). In the DevTools' Debugger panel the scripts are listed at the left side within the Sources side panel. Dynamically generated scripts are only listed there when they are named via a //# sourceURL comment.

Managing breakpoints

In Firebug you can set different types of breakpoints, which are all listed within the Breakpoints side panel. In the DevTools the breakpoints are shown below each script source within the Sources side panel. Those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. They do currently only allow to set script breakpoints. XHR, DOM, Cookie and Error breakpoints are not supported yet (see bug 821610, bug 1004678, bug 895893 and bug 1165010). While there are no breakpoints for single JavaScript errors, there is a setting Pause on Exceptions within the Debugger panel options.

Step through code

Once the script execution is stopped, you can step through the code using the Continue (F8), Step Over (F10), Step Into (F11) and Step Out (Shift+F11) options. They work the same in both tools.

Examine call stack

When the script execution is paused, Firebug displays the function call stack within its Stack side panel. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the Call Stack side panel. To see the call parameters in the DevTools, you need to have a look at the Variables side panel.

Examine variables

The Watch side panel in Firebug displays the window object (the global scope) by default. With the script execution halted it shows the different variable scopes available within the current call stack frame. Furthermore, it allows you to add and manipulate watch expressions. The DevTools have a Variables side panel, which works basically the same. The main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the window object. Though you can inspect that object either via the DOM property viewer or via the Web Console.

样式编辑器

The Style Editor in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug's CSS panel does it. In addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. It also allows you to toggle individual style sheets.

Switch between sources

The CSS panel of Firebug allows to switch between different CSS sources using the CSS Location Menu. The Style Editor has a sidebar for this purpose.

Edit a style sheet

Firebug's CSS panel offers three different ways for editing style sheets. The default one is to edit them inline like within the Style side panel. Furthermore it has a Source and a Live Edit mode, which allow to edit the selected style sheet like within a text editor. The Style Editor of the DevTools only has one way to edit style sheets, which corresponds to Firebug's Live Edit mode.

Try out CSS selectors

Firebug's Selectors side panel provides a way to validate a CSS selector. It lists all elements matching the entered selector. The DevTools don't have this feature yet, but it's requested in bug 1323746.

Searching within the style sheets

Firebug allows to search within the style sheets via the search field. The Style Editor in the DevTools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see bug 889571) and also not via a regular expression (see bug 1362030.

性能工具

Firebug allows to profile JavaScript performance via the "Profile" button within the Console panel or the console.profile() and console.profileEnd() commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via console.profile() and console.profileEnd() like in Firebug or via the "Start Recording Performance" button in the Performance Tool. The output of the Call Tree is the one that comes nearest to the output in Firebug, but the Performance panel provides much more information than just the JavaScript performance. E.g. it also provides information about HTML parsing or layout.

This is the part where Firebug and the DevTools differ the most, because the outputs are completely different. While Firebug focuses on JavaScript performance and provides detailed information about JavaScript function calls during the profiling session, the Performance Tool in the DevTools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding JavaScript function calls.

View JavaScript call performance

What comes nearest to Firebug's profiler output is the Call Tree view in the Performance panel. Like in Firebug it lists the total execution time of each function call under Total Time as well as the number of calls under Samples, the time spent within the function under Self Time and the related percentages in reference to the total execution time.

Note: The times and percentages listed in the DevTools' Call Tree view is not equivalent to the ones shown in Firebug, because it uses different APIs sampling the execution of the JavaScript code.

Jump to function declaration

Like in Firebug's profiler output the Call Tree view of the DevTools' Performance Tool allows to jump to the line of code where the called JavaScript function is defined. In Firebug the source link to the function is located at the right side of the Console panel output while within the DevTools the link is placed on the right side within the Call Tree View.

网络监视器

To monitor network requests Firebug provides a Net panel. The Firefox DevTools allow to inspect the network traffic using the Network Monitor. Both tools provide similar information including a timeline showing the request and response times of the network requests.

Inspect request information

Both Firebug and the Firefox DevTools' Network Monitor allow you to inspect the information about a request by clicking on it. The only difference is that Firebug shows the information below the request while the Network Monitor displays it within a side panel.

In both tools there are different tabs containing different kinds of information for the selected request. They contain a Headers, Params, Response and Cookies panel. A preview of the response is shown within specifically named panels like HTML. The Network Monitor has a Preview panel for this purpose. It doesn't provide information about the cached data yet (see bug 859051), but provides a Security tab in addition to Firebug's information and a Timings tab showing detailed information about the network timings.

View request timings

Firebug offers detailed information about the network timings related to a request by hovering the Timeline column within its Net panel. The Network Monitor shows this information within a Timings side panel when you select a request.

View remote address

The remote address of a request is shown within the Remote IP column within Firebug. In the Network Monitor the address is shown at Remote Address in the Headers tab when a request is selected.

Search within requests

The search field within Firebug allows to search within the requests. The search field in the Firefox DevTools filters the requests by the entered string.

Firebug allowed to search within the response body of the network requests by checking Response Bodies within its search field options. This feature is not available yet within the Network Monitor, but it's requested in bug 1334408. While response bodies can't be searched yet, the Network Monitor allows to filter by different request properties.

存储查看器

The Cookies panel in Firebug displays information related to the cookies created by a page and allows to manipulate the information they store. Within the DevTools this functionality is located within the Storage Inspector. In contrast to Firebug the Storage Inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and IndexedDB databases.

Inspect cookies

All cookies related to a website are listed inside the Cookies panel in Firebug. Inside the DevTools, the cookies are grouped by domain under the Cookies section within the Storage Inspector. Both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration date and whether the cookie is HTTP-only.

The DevTools don't show by default whether a cookie is secure, but this can be enabled by right-clicking the table header and checking Secure from the context menu. Additionally, the DevTools allow to display the creation date of a cookie as well as when it was last accessed and whether it is host-only.

Edit cookies

To edit a cookie in Firebug you have to right-click the cookie and choose Edit from the context menu. Then a dialog pops up allowing you to edit the data of the cookie and save it. Inside the Storage Inspector you just have to double-click the data you want to edit. Then an inline editor allows you to edit the value.

Delete cookies

Firebug's Cookies panel allows you to delete all cookies of a website via the menu option Cookies > Remove Cookies or by pressing Ctrl+Shift+O. It also allows you to only remove session cookies via Cookies > Remove Session Cookies and to remove single cookies by right-clicking them and choosing Delete. The DevTools Storage Inspector allows to remove all cookies and a single one by right-clicking on a cookie and choosing Delete All resp. Delete "<cookie name>". Additionally, it allows to delete all cookies from a specific domain via the context menu option Delete All From "<domain name>". It currently does not allow to only delete session cookies (see bug 1336934).