Subscribe to RSS Feed

Break on HTML mutation feature has been introduced in an article Dynamic and Graphical Web Page Breakpoints submitted to WWW 2010.

This feature is great for exploring and learning an existing code that is dealing with HTML/UI. It allows the Firebug user to break JavaScript execution when various HTML mutation events happen and see the line of code that caused that event.

There are three types of mutation events.

  • Break On Attribute Change
  • Break On Child Addition or Removal
  • Break On Element Removal

Let's go over three simple examples that explain how to use the feature and how it can be useful to web developers. Each example is available live on this page and so, you can just open Firebug UI (or install Firebug) and try it out immediately.

Read more...

Firebug 1.10 has been released today and one of the new features introduced in this version is called Trace Styles.

This feature allows tracing all places which affected specific CSS property, whether explicitly or by inheritance. The list also shows which property is actually applied.

This feature is integrated into the Computed side panel (available within the HTML panel) where every CSS property is expandable.

Of course, you need Firebug 1.10+ to try out this feature.

Read more...

Firebug's Net panel is well known and indispensable tool for debugging and testing page load performance. Its purpose is to provide detailed timing information about HTTP traffic initiated by a web page.

Also, all data collected by the Net panel can be exported into a HAR file and processed by other tools (e.g. you can use online viewer for preview).

Finally, it's also possible to automate the entire page-load-test-and-export process using Selenium. So, if it sounds interesting to you read more about how to setup Firebug, NetExport and Selenium to automatically measure performance of your site!

Read more...

I have been recently working on an extension (code name HTTP Monitor) that can be used to intercept HTTP traffic of a browser tab. The extension is based on Firebug's Net panel and is on its way to be embedded in Firefox by default.

This post explains how to use HTTP monitor to intercept HTTP traffic on mobile with Fennec (Firefox for Android) installed.

Read more...

HTTP Monitor

by Honza

We have decided to extend cooperation between Firebug and Firefox dev-tools teams (I am a member of both) and so, discussed this topic about four weeks ago at our meeting in London.

We agreed that we want to have an effective and synchronized strategy when working on in-browser developer tools. One pillar of the plan is sharing APIs, components, modules, code maintenance, etc. to avoid duplicate development effort.

The first step is sharing an independent HTTP tracking component that is based on Firebug's Net panel and can be shared among all tools that want to intercept an analyze HTTP traffic. Firebug and (built-in tools in) Firefox will be its first clients.

So take a look at what we have managed to implement and demonstrate for our Toronto meeting last week.

Read more...

MozCamp CZ 2012

by Honza

I had a chance to attend MozCamp CZ 2012 that happened in Brno last Saturday. It was one day meeting filled with sessions and discussions about Mozilla related stuff.

I had also great opportunity to lead a session about Firebug Tips & Tricks where I also mentioned some useful Firebug extensions. Check out my slides (en-US), but I am not sure how useful they are without me talking 😉

We discussed many interesting topics and here is a brief summary of what stuck in my memory.

  • There is Firefox Affiliates program for everyone who want to share Firefox with the world
  • It would be great if US Mozilla dev folks could attend the next time and talk about Firefox related technologies.
  • Pavel Cvrcek and Pavel Franc spoke about Mozilla in 2012: do not track, browser ID, apps, B2G, Firefox for Android
  • Mozilla's mission is to promote openness, innovation and opportunity on the web.
  • Jaroslav Souček from Seznam.cz spoke about Seznam Listicka (Firefox extension) and custom Firefox build
  • Especially B2G got a lot of interest
  • Transfer my mobile apps from my old phone to a new one easily (across devices)
  • HTML5 & Video (btw. this post is quite related)
  • And of course, Firebug and dev-tools built in Firefox.

If it sounds interesting to you, you should join us the next time! Follow Mozilla.cz to know when the next MozCamp CZ happens.

Photos provided by Jan Horák (Red Hat)

Firebug 1.10 introduces new API for building extensions based on Asynchronous Module Definition (AMD) syntax. Firebug itself is already using AMD to improve its internal structure and modularization of the code base.

The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.

One reason why Firebug uses AMD syntax is to support module sharing between Firebug and Firebug Lite. This post explains how to build Firebug extension based on AMD.

Read more...

If you are a web designer or if you are at least dealing with fonts time to time, this neat feature should come in handy.

The feature is implemented by FireFontFamily, which is a Firebug extension created by Heather Arthur (also a member of the devtools team). So, you need to install it first if you are interested.

Update: this feature is integrated with Firebug 1.10

Simple feature description:

Highlights the rendered font-family from the list of font-families for a CSS 'font' or 'font-family' property in Firebug's CSS panel.

And couple of explanatory screenshots. The first one shows the Style side panel when FireFontFamily extension is not installed.


The other one shows the same when FireFontFamily is installed.

See that highlighted font, it's the one actually rendered.

Entire Firebug source base has been moved on github.com last week and we are also adopting a new GIT development workflow. So far, everyone has been truly excited by this change and I believe that it's also much better way how to collaborate with other coders. Firebug is an open source project after all.

So, for those who are interested at forking Firebug repository, issuing a pull request, developing Firebug extension, etc. here are some basic things to know before you start.

Firebug Repository

There are already several repositories in Firebug's account, but the one you are probably interested the most is firebug

https://github.com/firebug/firebug

The structure of the repo is following:

  • extension Firebug extension directory
  • tests Firebug automated test files and test harness - FBTest
  • trace Firebug tracing console - FBTrace

Here is how to clone the repository (read only):

$ git clone git://github.com/firebug/firebug.git
$ cd firebug/extension

Run Firebug From Source

The extension directory contains Firebug extension files and so, you can run Firebug off of it. It's also the best way how to quickly check your code changes.

  1. Locate your Firefox profile folder
  2. Open extensions/ folder, create if it doesn't exist.
  3. Create a new text file and put the full path to your development folder inside. (e.g. C:\firebug\extension\ or ~/firebug/extension/). Windows users should retain the OS' slash direction, and everyone should remember to include a closing slash and remove any trailing spaces.
  4. Save the file with Firebug ID as it's name firebug@software.joehewitt.com

Now you can modify the code base, restart Firefox (with Firebug extension installed) and see your changes live.

Build Firebug XPI

You probably don't need this that often, but you can also easily build Firebug XPI package. All you need is Apache Ant installed on your machine.

$ cd firebug/extension
$ ant

The result XPI file should be located in ./release directory.

Push!

And now the most interesting part. You fixed a bug or implemented new API you need in your extension and you want us to pull your changes, commit into Firebug master branch and release! Let's see what you need to do.

Update: it's useful to create a separate branch for every contribution you make. (related to #4 and #5)

  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. Create a new branch, make your changes, stage/add modified files (e.g. firebug.js) and commit:
    $ cd firebug/extension
    $ git checkout -b myNewAPI
    # Make your changes in firebug.js file now
    $ git add content/firebug/firebug.js
    $ git commit -m "New API for my extension"
  5. Push to origin (your public fork), the local branch myNewAPI to the remote branch myNewAPI:
    $ git push -u origin myNewAPI
  6. Send a pull request. We'll review your changes and accept if all is OK!

Our release cycle is quick (a release at least every other week) so, your changes can be publicly available pretty soon!

Or Create a Patch

If you don't like github.com from some reason you can always create read-only clone (see at the beginning of this post), make your changes and generate a patch:

$ git diff > my-new-api.js

... or using svn:

$ svn diff > my-new-api.js

Finally, create a new issue report (Firebug official issue list is still at the same location) and attach your patch. Again, we'll review your changes and accept if all is OK!

Further Resources

This powerful Firebug's feature, which you can download from the internet, could be also called Edit value and continue (to use similar terminology from Visual Studio). Even if Firefox (and so Firebug) doesn't allow to edit the code itself at run-time, being able to change value of a variable while sitting at a breakpoint in the debugger is often very useful way how to check proper behavior of your code.

Let's see a simple example:

The debugger is halted at a debugger keyword (see another related tip) and the Watch panel shows that value of the message variable is Hello.

Double click on the variable in the Watch panel opens an inline editor, which allows to change its value (double-clicking on a boolean value would automatically toggle the value).

Change the value, press enter key and consequently F5 to resume the debugger. You'll see that the new value has been dynamically applied.

Note that you can edit only primitive values, but not matter where they are actually stored. They might live within global or local variables, objects or within arrays.

Check summary of all Firebug tips.

« Previous PageNext Page »