Firebug

Firebug lives on in Firefox DevTools

As you might have heard already, Firebug has been discontinued as a separate Firefox add-on.

The reason for this huge change is Electrolysis, Mozilla’s project name for a redesign of Firefox architecture to improve responsiveness, stability, and security. Electrolysis’s multiprocess architecture makes it possible for Firefox to run its user interface (things like the address bar, the tabs and menus) in one process while the content (websites) runs in other processes. With multiprocess architecture, if a website crashes, it doesn’t also crash the whole browser.

Unfortunately, Firebug wasn’t designed with multiprocess in mind, and making it work in this new scenario would have required an extremely difficult and costly rewrite. The Firebug Working Group agreed they didn’t have enough resources to implement such a massive architectural change. Additionally, Firefox’s built-in developer tools have been gaining speed, so it made sense to base the next version of Firebug on these tools instead.

The decision was made that the next version of Firebug (codenamed Firebug.next) would build on top of Firefox DevTools, and Firebug would be merged into the built-in tools.

And perhaps most importantly, we joined forces to build the best developer tools together, rather than compete with each other. Many of Firebug’s core developers are on the DevTools team, including Jan ‘Honza’ Odvarko and Mike Ratcliffe. Other Firebug Working Group members like Sebastian Zartner and Florent Fayolle are also active DevTools contributors.

A huge thank you to them for bringing their expertise in browser developer tooling to the project!

In practical terms, what does it mean to merge Firebug into DevTools?

Several features have been absorbed: The DOM panel, the Firebug theme, Server-side log messages, the HTTP inspector (aka XHR Spy), and various popular add-ons like FireQuery, HAR export, and PixelPerfect. Also, over 40 bugs were fixed to close the gap between DevTools and Firebug.

For curious readers, a couple of articles on hacks.mozilla.org and on the Firebug blog go into more detail.

If you are switching now from Firebug to Firefox DevTools, you will of course notice differences. This migration guide can help you.

We understand that disruption is never really welcome, but we are working hard to ensure developers have the best possible tools, and sometimes this means we need to refocus and use resources wisely.

You can help: Tell us which features you need are missing. There are a few ways you can do this:

We are already tracking missing features on this bug, and so far you have told us that the most important are these:

We thank you for your loyalty and hope you understand why we’ve made this difficult decision. The Firebug spirit lives on in all of the browser developer tools we build and use today.

The Firefox DevTools and Firebug teams

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Developer Edition 48 – Firebug features, editable storage, inspector improvements and more…

This week marks the release of Firefox Developer Edition 48. In preparation for the arrival of multiprocess Firefox and the deprecation of the Firebug add-on, we are porting Firebug features to the built-in tools. We have also made tweaks to the current tools that we’ll cover in this post.

Firebug theme

As part of porting Firebug features to the built-in tools, we’re also porting the Firebug theme, giving Firebug users a more familiar environment to work with. This is the initial release of the theme so please let us know if you find any bugs and report them here. Here is a screenshot of the Firebug theme:

Firebug theme

DOM panel

The DOM panel is another feature we are porting from Firebug. This panel provides a handy tree view which allows you to browse and inspect the DOM structure of your page. Here’s a screenshot of the new tool:

DOM Panel screenshot

Editable storage

Editing support inside the storage inspector is one of the most frequently requested features. In this release, we added the ability to edit and delete cookies, local storage, and session storage entries. You can edit a cell by double-clicking on it. You can also delete entries by using the context menu.
Editable storage entries

Deletable cells

Geometry editor

In this release, we have added a new visual editing tool that allows you to easily tweak the positioning of any absolutely positioned or fixed-position element. You can change the values of the top, left, bottom and right properties using this tool. To launch the geometry editor, go to the Box Model tab in the inspector and click on the Geometry editor icon icon.

Geometry Editor

Memory tool improvements

The memory tool is now enhanced with a brand new tree-map view that gives a quick and intuitive visual overview of how memory is being used. This new view groups objects together by their types, which allows you to easily see the quantity of similar items (arrays when drawing canvas lines, scripts when loading a script-heavy website, etc.) taking up memory. Also, the size of each item in the map is proportional to the amount of bytes used, which allows you to easily see which items are taking up most of your memory.

Memory tool tree map

The memory tool provides a useful aggregate view that groups all instances of the same type of node. In this release, you can now click the ? icon to view all individual instances of a specified type in a separate view. You can also view the retaining paths of those individual nodes, using the retaining paths panel added in the previous release. This allows you to precisely pinpoint how a specific object is leaking when debugging your web app.

Aggregate view individual nodes

Finally, we have also added the ability to remove individual snapshots from the memory tool sidebar.

Inspector improvements

We have polished the user experience in the inspector to make it smoother and easier to use. The Rules view autocomplete now selects the most used property by default to make your authoring experience faster. For example, background will be selected instead of backface-visibility because it’s more frequently used. Here is a screencast of the feature in action:

Better rules view autocomplete

We have also improved the way long values are handled in the Rules view. A new multi-line mode specifically for long values lets you conveniently reach and select different parts of the value you’re editing.

Multi-line mode

The markup view now emphasises the relationship between a parent node and its children. The selected element now has a line underneath it that highlights the child nodes. This allows you to easily spot the selected element child nodes when the HTML markup is complex.

Parent child relationship

A quick way to switch between different angle units in the Rules view has been added. There is now a swatch next to angle values which you can shift-click to cycle between different units, similar to the colour values interaction. This feature was added by contributor Nicolas Chevobbe.

Cycle between angle units

Finally, we have added keyboard shortcuts to easily navigate between the markup view search results. You can now use Shift+Enter to navigate backwards within the search results. Also, Ctrl/Cmd+G and Ctrl/Cmd+Shift+G now work as aliases for Enter and Shift+Enter. These keyboard shortcuts were added by contributor Steve Melia.

Console improvements

The console has also received various tweaks that will make your daily experience with the tool more enjoyable. The first improvement comes from the set of Firebug features we’re porting. You can now expand network logs to inspect them and reveal a Firebug-style details view. Here is a screenshot:

Inline HTTP inspection

If you’re working with Map or Set objects, you can now view and inspect their individual entries from the console sidebar. This feature was added by contributor Jarda Snajdr.

Improved Map/Set inspection

Finally, we have added support for console.clear() to clear the console output.

about:debugging features

In preparation for the release of WebExtensions, we’ve added a feature that will be a great help to add-on developers. You can now reload add-ons from about:debugging, which allows you to quickly develop your add-on without having to re-install it every time you make a change.

Reloading add-ons with about:debugging

If you’re working with Service Workers, you’ll notice that we have added a way to unregister individual workers. Here is a screenshot:

Unregister service workers

Other notable changes

In addition to the changes above, we have polished various areas of the toolbox including:

Thanks to everyone who contributed to this release! Make sure to grab a fresh copy of Firefox Developer Edition and share your thoughts! If you have feedback about different Firebug features being ported, we’d love to hear your suggestions and constructive comments here.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firebug & DevTools Integration

You might have already heard about our effort to unify native Firefox Developer tools (DevTools) and Firebug. We’ve been working hard to port all favorite Firebug features into native DevTools, make them multi-process compatible, and available for remote debugging (i.e., e10s compatible). We’ve been also working hard to make the transition path from Firebug to DevTools as simple and smooth as possible. Yes, as we’ve mentioned before, we’re focused on developing one great tool for developers!

So, let’s see how it looks now.

The main goal of next-generation Firebug is to help users feel at home when working with native DevTools. This is where Firebug 3 (aka Firebug.next) comes in. Firebug 3 is not another developer tool, it is rather a thin layer built on top of DevTools, providing a new theme that makes DevTools look like Firebug. There are also a few additional features, that we’ll port into DevTools step by step.

If you are missing any features (e.g. some of those you’ve been using in previous versions of Firebug), you should expect them to be part of DevTools in the future.

Firebug 3

Take a look at the screenshot below showing what DevTools look like if you install Firebug 3 (first beta). Does this look familiar?

Firebug 3 (aka Firebug.next)

Firebug 3 (aka Firebug.next) isn’t distributed through AMO yet, so you might need to set the xpinstall.signatures.required preference (through about:config) to false.

It’s the Firebug theme ported into DevTools to bring some UI and layout advantages. There is also the well-known Firebug start button in the Firefox toolbar, which represents the entry point to the developer toolbox.

See, the Firebug Theme option is currently active.

Firebug Start Button

The process for entering your handy tools is exactly the same: you can either press the start button or the F12 key.

You might be a fan of the DOM panel used to inspect the document object model of the page you’re on. It isn’t supported natively (yet) and so, Firebug offers it to you.

DOM panel

XHR previews in the Console panel (requested many times) are also supported.

XHR Previews

Some of the most popular extensions have been re-implemented on top of DevTools. Not only does this keep popular features alive, these implementations also provide great examples of how you can make new extensions directly for DevTools. Firebug isn’t required to run these extensions.

If you are an extension developer you might be interested in some examples and links to other resources helping to understand how to extend DevTools.

Let’s see what extensions are available.

FireQuery extension

FireQuery is a Firefox plugin for jQuery development built on top of DevTools in Firefox. Firebug 3 isn’t required, but some of the screenshots below show DevTools with the Firebug theme activated (the other themes, Light and Dark, are also supported).

Elements with jQuery data associated display a little envelope icon in the Console panel. You can inspect it by clicking on the icon. There is also a jQuerify button in the Console panel toolbar and you can use it to load jQuery into the current page.

FireQuery extension

The Inspector panel also displays the envelope icon for elements with jQuery data. Clicking the icon opens a popup with details.

FireQuery Inspector panel

PixelPerfect extension

Pixel Perfect is a Firefox extension that allows web developers and designers to easily overlay a web composition with semi-transparent layers (images). These layers can then be used for per pixel comparison between the page and a layer.

There is a Pixel Perfect start button allowing quick access to this feature.

PixelPerfect Start Button

And here is the final Pixel Perfect UI that you can open by clicking on the button above.

PixelPerfect UI

HAR export

Support for exporting HAR (the HTTP Archive format) from the Network panel is now a built-in feature and you don’t need an extension for it. All you need to do is select the Network panel (reload the page if necessary) and use two context menu actions:

  • Copy All As HAR: copy collected data into the clipboard.
  • Save All As HAR: save collected data into a file.

Exporting data from the Network panel is often automated (e.g. when testing web applications using Selenium). If you want to create a HAR file automatically for every loaded page you need to set the following preference (use about:config) to true:

devtools.netmonitor.har.enableAutoExportToFile

Some automated systems need more flexibility than just creating a HAR file after every page load. Sometimes you need to send data to a remote server, collect and export HAR between two specific user actions, etc. That’s why we’ve introduced a simple HARExportTrigger extension that improves automation by exporting HAR API into the page content. This allows you to use small script to trigger HAR at any time.

Here is an example script that gets HAR data from the Network panel:

var options = {
  token: "test",
  getData: true,
};

HAR.triggerExport(options).then(result => {
  console.log(result.data);
});

Using console.* APIs on the server

The Firebug community has implemented many extensions that allow developers to use console.* APIs on the (HTTP) server side, so you can see your backend logs right in the browser. This feature is now natively supported in Firefox and you don’t need to install an additional extension.

All you need to do is enable logs coming from the server inside the Console panel.

Server side logging

This feature supports an existing protocol (used in Chrome Logger) that sends logs through HTTP headers to the client. Logs are consequently displayed in the Console panel as if they had been generated by JavaScript on the page. There are many server-side libraries that provide the appropriate server side API in various languages (NodeJS, Ruby, Python, PHP, .NET, Java, etc.)

Here is an example of server side logging:

var chromelogger = require('chromelogger');
var http = require('http');
var server = http.createServer();

server.on('request', chromelogger.middleware);
server.on('request', function(req, res) {
  res.chrome.log('Hello from Node.js %s', process.version);
  res.end();
});

server.listen(7357);

And here is what the server-side log looks like in the Console panel:

Server log

Final words

As I mentioned at the beginning of the article, we are trying to unify native Firefox Developer tools (DevTools) and Firebug since we believe that this is an effective strategy for delivering great tools for web developers. There is more yet to come, but this post should give you an overview of our plan and where we are heading. Stay tuned!

Please post feedback in the Firebug group, thanks.

Jan ‘Honza’ Odvarko

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firefox Developer Tools and Firebug

If you haven’t tried the Firefox Developer Tools in the last 6 months, you owe it to yourself to take another look. Grab the latest Aurora browser, and start up the tools from the Web Developer menu (a submenu of Tools on some platforms).

The tools have improved a lot lately: black-boxing lets you treat sources as system libraries that won’t distract your debugging flow. Source maps let you debug source generated by transpilers or minimizers. The inspector has paint flashing, a new font panel, and a greatly improved style inspector with tab completion and pseudo-elements. The network monitor helps you debug your network activity. The list goes on, and you can read more about recent developments in our series of Aurora Posts.

After getting to know the tools, start the App Manager. Install the Firefox OS Simulator to see how your app will behave on a device. If you have a Firefox OS device running the latest 1.2 nightlies, you can connect the tools directly to the phone.

Why The Built-in Tools?

The Web owes a lot to Firebug. For a long time, Firebug was the best game in town. It introduced the world to visual highlighting of the DOM, inplace editing of styles, and the console API.

Before the release of Firefox 4 we decided that Firefox needed a set of high-quality built-in tools. Baking them into the browser let us take advantage of the existing Mozilla community and infrastructure, and building in mozilla-central makes a huge difference when working with Gecko and Spidermonkey developers. We had ambitious platform changes planned: The JSD API that Firebug uses to debug Javascript had aged badly, and we wanted to co-evolve the tools alongside a new Spidermonkey Debugger API.

We thought long and hard about including Firebug wholesale and considered several approaches to integrating it. An early prototype of the Inspector even included a significant portion of Firebug. Ultimately, integration proved to be too challenging and would have required rewrites that would have been equivalent to starting over.

How is Firebug Doing?

Firebug isn’t standing still. The Firebug Working Group continues to improve it, as you can see in their latest 1.12 release. Firebug is working hard to move from JSD to the new Debugger API, to reap the performance and stability benefits we added for the Firefox Developer Tools.

After that? Jan Odvarko, the Firebug project leader, had this to say:

Firebug has always been maintained rather as an independent project outside of existing processes and Firefox environment while DevTools is a Mozilla in-house project using standard procedures. Note that the Firebug goal has historically been to complement Firefox features and not compete with them (Firebug is an extension after all) and we want to keep this direction by making Firebug a unique tool.

Everyone wants to figure out the best way for Firebug’s community of users, developers, and extension authors to shape and complement the Firefox Developer Tools. The Firebug team is actively discussing their strategy here, but hasn’t decided how they want to accomplish that.

Follow the Firebug blog and @firebugnews account to get involved.

What’s Next for Firefox Developer Tools?

We have more exciting stuff coming down the pipe. Some of this will be new feature work, including great performance analysis and WebGL tools. Much of it will be responding to feedback, especially from developers giving the tools a first try.

We also want to find out what you can add to the tools. Recently the Ember.js Chrome Extension was ported to Firefox Developer Tools as a Sunday hack, but we know there are more ideas out there. Like most Firefox code you can usually find a way to do what you want, but we’re also working to define and publish a Developer Tools API. We want to help developers build high quality, performant developer tools extensions. We’d love to hear from developers writing extensions for Firebug or Chrome Devtools about how to best go about that.

Otherwise, keep following the Hacks blog to learn more about how the Firefox Developer Tools are evolving. Join in at the dev-developer-tools mailing list, the @FirefoxDevTools Twitter account, or #devtools on irc.mozilla.org.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firebug 1.12 New Features

Firebug team released fresh new Firebug 1.12 and here is a list of some new features we have implemented in this version.

  • Firebug 1.12 is compatible with Firefox 23 – 26

Firebug is an open source project maintained by developers from around the world and I can’t miss this opportunity to introduce all members who contributed to Firebug 1.12

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Farshid Beheshti
  • Steven Roussey
  • Florent Fayolle
  • Awad Mackie
  • Belakhdar Abdeldjalil
  • Thomas Andersen
  • Hisateru Tanaka

New Features

Copy CSS Properties

Copying CSS properties into the clipboard has never been easier. It is now possible to copy individual CSS properties or rules or entire styles into the clipboard. Just right click on the part you want to copy. See detailed description of this feature.

copy-css

New Net Panel Filters

The old Flash filter has been renamed to Plugins and covers Flash as well as Silverlight HTTP requests. There is also a new filter labeled Fonts that is used to see HTTP requests for custom fonts only (font/ttf or font/woff mime-types).

net-panel-filters

Use filter button tooltip to see detailed info about filtered files.

Filter for DOM Events Log

This feature allows to filter DOM event logging that is set for specific element. The next screenshot shows related user interface. There is a new submenu that allows to pick what events should be logged for selected element.

dom-events-filter

You can also help us improve the UI/UX of this feature.

Autocompletion Popup Improved

Autocompletion popup window that is available on Firebug Command Line (within the Console panel) has improved its design and it also offers built-in command line API.

auto-completion-popup

Note that the bottom section of the popup window offers Firebug Command Line API.

Use in Command Line

This feature allows referring various page objects (HTML elements, JS objects, network requests, cookies, etc.) from the command line using new $p variable. The $p variable can also be used within command line expressions.

use-in-command-line

See detailed description of this feature.

Group Console Messages

Console messages are grouped now in case the messages appear multiple times consecutively. This feature can dramatically decrease number of logs and make the entire logging easier!

group-console-messages

Better Infotip for HTTP Request Timings

The tooltip for individual HTTP requests displayed in the Net panel has been improved. It displays all phases of the current request as a little waterfall graph. It’s now a lot easier to understand the timing.

net-panel-timings

Multiple Filters for Console & Net Panel

The Console and Net panels support selection of multiple filters at the same time. Just hold down Ctrl key when clicking the filter buttons. This allows to see e.g. only Errors and Warnings in the Console panel or e.g. only HTML, CSS and JS files in the Net panel. See the screenshot.

multiple-filters

Toggle Visibility of Side Panels

You can now toggle visibility of side-panels. The state is persistent across Firefox restarts. See couple of screenshots.

toggleSidePanels1

If you don’t need the Selectors side panel you can keep it hidden.

toggleSidePanels2

Store the result of the last command line evaluation in $_

Firebug implements a new variable available in the Command Line: $_. This variable stores the result of the previous expression evaluation (compatible with Chrome dev tools).

store-last-command-line-result

New command: getEventListeners()

Firebug implements a new Command Line command: getEventListeners(). This command returns the event listeners registered on a given object. The object is usually an element, but it can also be e.g. a window.

get-event-listeners1

After you execute the command on the Command Line you can further inspect the return object in the DOM panel. See the following screenshot.

get-event-listeners2

Copy as cURL

It is possible to create cURL command from a network request in order to test the request from the terminal window. Just right click on a request in the Net panel and pick Copy as cURL.

copy-as-curl

Precision for Console API %f log pattern

Floats can be rounded by using the %.xf pattern inside the first console.log() argument. Here x denotes the number of decimal places the number should be rounded to.

console.log("amount: %.2f", 4.3852)
will output
amount: 4.39

precision

You may want to get to know about the other patterns available inside the Console API.

Show/hide stack arguments

Stack frames displayed in the Stack panel can be sometimes unusable due to a long list of arguments and so, Firebug introduced a new option Show Arguments allowing to show/hide them.

showArguments

CSS Panel Improvements

Firebug introduces several improvements for the CSS panel. A lot more CSS information is now available.

  • @page rules are displayed
  • files with @media elements are displayed
  • @keyframes rules are now displayed
  • @-moz-document rules are displayed

css-panel

There is a lot more new enhancements and you can see the entire list in our release notes. You can also see the official announcement on getfirebug.com.

Follow us on Twitter to be updated!

Jan ‘Honza’ Odvarko

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firebug 1.11 New Features

Firebug 1.11 has been released and so, let’s take a look at some of the new features introduced in this version.

Firebug

First of all, check out the following compatibility table:

  • Firebug 1.10 with Firefox 13.0 – 17.0
  • Firebug 1.11 with Firefox 17.0 – 20.0

Firebug 1.11 is open source project surrounded by contributors and volunteers and so, let me also introduce all developers who contributed to Firebug 1.11

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Florent Fayolle
  • Steven Roussey
  • Farshid Beheshti
  • Harutyun Amirjanyan
  • Bharath Thiruveedula
  • Nikhil Verma
  • Antanas Arvasevicius
  • Chris Coulson

New Features

SPDY Support

Are you optimizing your page and using SPDY protocol? Cool, the Net panel is now indicating whether the protocol is in action.

Performance Timing Visualization

Another feature related to page load performance. If you are analyzing performance-timing you can simply log the timing data into the Console panel and check out nice interactive graph presenting all information graphically.

Just execute the following expression on Firebug’s Command Line:

performance.timing

Read detailed description of this feature.

CSS Query Selector Tool

Firebug offers new side panel (available in the CSS panel) that allows quick execution of CSS selectors. You can either insert your own CSS Selector or get list of matching elements for an existing selector.

In order to see list of matching elements for an existing CSS rule, just right click on the rule and pick Get Matching Elements menu item. The list of elements (together with the CSS selector) will be displayed in the side panel.

New include() command

Firebug supports a new command called include(). This command can be executed on the Command Line and used to include a JavaScript file into the current page.

The simplest usage looks as follows:
include("http://code.jquery.com/jquery-latest.min.js");

If you are often including the same script (e.g. jqueryfying your page), you can create an alias.
include("http://code.jquery.com/jquery-latest.min.js", "jquery");

And use the alias as follow:
include("jquery");

In order to see list of all defined aliases, type: include(). Note, that aliases are persistent across Firefox restarts.

Read detailed description of this command on Firebug wiki.

Observing window.postMessage()

Firebug improves the way how message events, those generated by window.postMessage() method, are displayed in the Console panel.

The log now displays:

  • origin window/iframe URL
  • data associated with the message
  • target window/iframe object

See detailed explanation of the feature.

Copy & Paste HTML

It’s now possible to quickly clone entire parts of HTML markup by Copy & Paste. Copy HTML action has been available for some time, but Paste HTML is new. Note that XML and SVG Copy & Paste is also supported!

See detailed explanation of the feature.

Styled Logging

The way how console logs can be styled using custom CSS (%c formatting variable) has been enhanced. You can now use more style formatters in one log.

console.log("%cred-text %cgreen-text", "color:red", "color:green");

See detailed explanation of this feature.

Log Function Calls

Log Function Calls feature has been improved and it also shows the current stack trace of the place where monitored function is executed.

See detailed explanation of this feature.

Improved $() and $$() commands

Firebug also improves existing commands for querying DOM elements.

$() command uses querySelector()
$$() command uses querySelectorAll()

It also means that the argument passed in must be CSS selector.

So, for example, if you need to get an element with ID equal to “content” you need to use # character.

$("#content")

If you forget, Firebug will nicely warn you 🙂

Autocompletion for built-in properties

The Command Line supports auto-completion even for built-in members of String.prototype or Object.prototype and other objects.

There are many other improvements and you can see the entire list in our release notes. You can also see the official announcement on getfirebug.com.

Follow us on Twitter to be updated!

Jan ‘Honza’ Odvarko

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firebug 1.10 New Features

Firebug 1.10 has been released and so, let’s see what new features are introduced in this version.

Firebug

First of all, check out the compatibility table:

  • Firefox 5.0 – 13.0 with Firebug 1.9
  • Firefox 13.0 – 16.0 with Firebug 1.10

Firebug 1.10 is true community achievement and so, let me also introduce all developers who contributed to Firebug 1.10

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Harutyun Amirjanyan
  • Steven Roussey
  • Joe Walker
  • Stampolidis Anastasios
  • Heather Arthur
  • Farshid Beheshti
  • Leon Sorokin
  • Florent Fayolle
  • Vladimir Zhuravlev
  • Hector Zhao
  • Bharath Thiruveedula
  • Nathan Mische

New Features

  • Bootstrapped Installation
  • Delayed Load
  • Cookie Management
  • Command Editor Syntax Highlighting
  • Autocompletion
  • Trace Styles
  • New Command: help
  • Link to Web-font Declaration
  • Support For Media Queries
  • Displayed Entities Format
  • Displayed Color Format
  • Tooltips for Menu Items
  • Support for “focus” CSS pseudo class
  • HTTP Requests From BFCache
  • Delete CSS Rule

Bootstrapped Installation

Firebug installation doesn’t require browser restart. Install, press F12 and Firebug is immediately ready at your fingertips.

If you are updating the previous 1.9 version that require restart you need to restart the browser.

Delayed Load

Firebug doesn’t slow down Firefox start-up time anymore! It’s loaded as soon as the user actually needs it for the first time. Only the Firebug start-button and menu is loaded at the start up time.

Cookie Management

Firebug allows to view and manage cookies in your browser. You can deny cookies for specific sites, filter cookies, create new and delete existing cookies. You can also break into the debugger when specific cookie changes its value and see the line of script that caused the change. And much more! Check out full list of cookie related features.

Command Editor Syntax Highlighting

Command editor (aka multiline command line) supports syntax highlighting.

Autocompletion

Autocompletion in Firebug has never been better. This feature helps you when editing CSS properties, variables in the Watch panel, break-point conditions, any numbers, colors, font-families, etc. Just try to edit your page through Firebug UI and you’ll see for yourself.

Check out the screenshot. When typing into the Watch panel, the autocompletion offers variables in the current scope.

Trace Styles

This feature allows tracing all places which affected specific CSS property. The feature is part of the Computed side panel where every CSS property is expandable. The Computed side panel also supports tooltips for colors, images and fonts.

See, there are three places trying to set the font-size of the selected element (the one in black succeeded). Of course, the blue text/location on the right is click-able and navigates the user the right place. See also detailed explanation.

New Command: help

If you are interested what built-in commands are actually available in the Command Line (within the Console panel) just type: help. You’ll see a list of commands with a description.

The green command name is a link navigating the user to Firebug wiki with more info (and how-to-examples) about clicked command.

Link to Web-font Declaration

This feature allows to quickly inspect custom font-family declarations. All you need to do is to right-click on your font-family value, pick Inspect Declaration and you’ll be automatically navigated to the CSS panel that shows the place where the font-family is declared. Check out the screenshot below.

Support For Media Queries

Media queries of @import CSS rules are displayed inside the CSS panel and it’s possible to edit them. Of course, auto-completion works in this case too (e.g. when I did the screenshot, I clicked on 400px value and pressed up-arrow, that’s why there is 401px).

Displayed Entities Format

There are new options in the HTML panel that allow changing displayed format of HTML entities.

And by the way, MathML entities are also supported.

Displayed Color Format

There are also new options allowing to change displayed format of CSS colors. Firebug offers three options: Hex, RGB and HSL. These options are available in CSS, Style and Computed panels.

Tooltips for Menu Items

This is one of many little and neat improvements. Every menu item has also a tooltip that explains the associated action. It’s especially useful for options.

Support for “focus” CSS pseudo class

Apart from hover and active CSS pseudo classes, Firebug is also supporting: focus.

This feature helps in situations where you want to inspect CSS rules that applies only if the inspected element has focus. Here is what you need to do.

  1. Use Firebug Inspector to select your element
  2. Open the option menu for the Style side panel (click the black triangle next to the panel label)
  3. Check :focus option
  4. Now Firebug simulates the focus state and so, every CSS rule using :focus pseudo class in the selector will be displayed

HTTP Requests From BFCache

Firebug Net panel is able to display also HTTP requests coming from so called BFCache (Back-Forward Cache). This cache makes backward and forward navigation between visited pages very fast. Note that this has nothing to do with the browser cache.

Check out the screenshot, we changed the background for requests coming from the BFCache and so they can be easily differentiated from other requests. Only the last request on the screenshot is coming from the server.

In order to see those requests you need to check Show BFCache Responses option.

Delete CSS Rule

Another neat feature that allows to delete whole CSS rule together with all its properties. Just right click a CSS rule…

 

Check out our issue tracker for all 79 enhancements in Firebug 1.10.

Also, follow us on Twitter to be updated about upcoming Firebug news!

Jan ‘Honza’ Odvarko

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firebug is now on GitHub – go learn and contribute!

There is probably not a single web developer out there who haven’t used Firebug over the years to debug their own code. And now here’s the next step in the evolution!

Firebug on GitHub

As outlined by Firebug developer Jan Odvarko, who truly knows the ins and outs of Firebug, Firebug is now available on GitHub which offers you the possibility to learn from and tinker with the code. But not only that, you can create your own version of Firebug, do pull requests, fork it, learn how to develop Firebug extensions and much more (having developed a couple of Firebug extensions myself, this is great news and a good learning ground).

Working with the Firebug repository

In Hacking on Firebug, Jan outlines the most common things you can do, like:

  • Run Firebug From Source
  • Build Firebug XPI
  • Push to the Firebug repository

Especially the last one there is really interesting and a very simple way for you to contribute to improving Firebug!

This is, in Jan’s words, how the process looks for pushing to the Firebug repository:

  1. First, you need a GitHub account. It’s simple and all the cool kids are already there. 🙂
  2. Fork Firebug repository (see how to fork a repo).
  3. Clone your fork onto your local machine (your URL will be different):
    $ git clone git@github.com:janodvarko/firebug.git
  4. After you made your changes, you can stage/add modified files (e.g. firebug.js) and commit:
    $ cd firebug/extension
    $ git add content/firebug/firebug.js
    $ git commit -m "New API for my extension"
  5. Push to your public fork:
    $ git push -u origin master
  6. Send a pull request. We’ll review your changes and accept if all is OK!

Go learn and contribute!

Now, what are you waiting for? 🙂

Go play around with, learn from and start contributing to Firebug!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

New, Improved Firebug Works with Firefox 5+

Firebug, the popular web development add-on for Firefox has released version 1.8 with a host of new features and compatibility with Firefox 5.0. More important, for those of you using the Beta and Aurora Firefox channels, the Firebug 1.9 alpha line has been released with support for Firefox 6 through Firefox 8. The alpha release […]

View full post on web development – Yahoo! News Search Results

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firebug 1.8 New Features

Firebug 1.8 compatible with Firefox 5.0 has been released and I would like to get this opportunity and introduce some new features in this version.

Firebug 1.8 has been also uploaded to AMO, but it can take some time to appear.

Firebug

First of all, check out the following compatibility table:

console.timeStamp()

There is a new API that can be used to create time-stamps during Javascript execution and compare them together with HTTP traffic timing on the timeline in the Net panel: console.timeStamp();

See detailed description of this feature with examples how to use it.

IP Address displayed in the Net Panel

The Net panel displays remote & local IP address + port number for each request. There are two additional columns, see the screen-shot:

HTML Preview Reloaded

This feature is back and better than before. Now you can adjust height of the preview by drag-and-drop to see more or less content as necessary.

Improved Script Location List

Script location list available in the Script panel adjusts its size automatically according to the screen size and uses scroll-bar as needed. This makes easier for the user to pick up the right script.

Command Line Content Persistence

Command line content is now persistent across reloads. This feature allows to quickly execute the same expression on different pages. This is one of many little details that make Firebug the indispensable tool.

New DOM Panel Options

The DOM panel has two new options:

  • Show Own Properties Only check if you don’t want see the prototype chain for objects
  • Show Enumerable Properties Only check if you want to see only enumerable properties

CSS Panel Color Tooltips

A tooltip with color preview is displayed for colors specified in various formats. Supported formats are: hex, rgb, rgba, hsl and hsla.

Shortcuts for Changing CSS values

Firebug is great when tweaking CSS of the current page to perfection. Now, there are also new keyboard shortcuts for changing CSS values (numbers).

  • Ctrl+Up/Down increases/decreases by 0.1
  • Shift+Up/Down increases/decreases by 10

Better Support for External Editors

As you might know Firebug allows to configure and open an external editor (or IDE). There has been two arguments you could pass to such editor:

  • %url URL of the file (if %url is not present, %file will be added by default)
  • %file Path to the local file (or to the temporary copy)

Firebug 1.8 introduces a new %line argument that allows to open the external editor scrolled at the right position (according to the current scroll position in the the Script panel).

  • %line Line number

Box Sizing Exposed

CSS3 introduced a new property called box-sizing, which allows the user changing the box model for an element and thereby influence element layout. Value of this property is now exposed in the Layout side panel.

Stay Tuned!

Honza

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)