Subscribe to RSS Feed

There are many cases when web developer needs to resend an existing HTTP request (executed by the currently debugged page) and test the server back-end or perhaps even a specific web service.

Such action can be often repeated, and so the task should be simple and quick.

Firebug offers several ways how to resend HTTP request, read more if you are interested...

Read more...

One of the new features introduced in Firebug 1.12 is a new Command Line command called:

getEventListeners()
 
The command returns all the event listeners registered for specific target. The target can be either an element, or another DOM object that accepts event listeners (e.g. window or an XMLHttpRequest).

Read more...

Firebug (and also Web Inspector) allows to label dynamically evaluated scripts using a special directive. The directive is a simple comment that is appended to the bottom of the evaluated script.

//@ sourceURL=foo.js

Such label is important especially for debuggers displaying list of scripts available on a page and so, developers can pick the right script see the source code and eventually create a breakpoint.

In order to avoid IE JS conditional compilation issues, Firebug will also support new syntax:

//# sourceURL=foo.js

This support will be available since Firebug 1.11.5 and Firebug 1.12 alpha 7

 

Syntax of the directive needs to match this regular expression:

/\/\/[@#]\ssourceURL=\s*(\S*?)\s*$/m;

Read more...

Firebug UI is entirely based on XUL/HTML/CSS and so, it's easy to provide a new set of CSS styles (a theme) that modifies Firebug UI and adjust it to your needs and preferences.

One of the typical examples of such modification is changing the background color (dark vs. white).

This post explains how to use Jason Barnabe's Stylish extension and apply arbitrary CSS on Firebug UI.

Thanks to Luís who mentioned this!

Read more...

Firebug Command Line is probably one of the most important Firebug features and its value is yet extended by set of built-in commands.

One of the new commands, introduced in Firebug 1.11 is include() and this post is intended to explain how to use it and make your development more effective.

Firebug Commands

Before we start with include() command let's take a look at quick summary of all Firebug built-in commands.

help
$(id)
$$(selector)
$x(xpath)
$0
$1
$n(index)
dir(object)
dirxml(node)
cd(window)
clear()
copy(object)
inspect(object)
keys(object)
values(object)
include(url)
debug(fn)
undebug(fn)
monitor(fn)
unmonitor(fn)
monitorEvents(object)
unmonitorEvents(object)
profile([title])
profileEnd()
table(data[, columns])
traceCalls(fn)
untraceCalls(fn)
traceAll()
untraceAll()

Did you know all of them? See Firebug wiki for more details.

Now learn about include()

Read more...

Firebug 1.11 final has been just released and one of the new features introduced in this release is related to HTML clipboard.

It's now easy to copy entire portions of existing HTML markup and paste it back to the document or even to another window.

Also, this feature works for HTML as well as for XML and SVG.

Read more...

Styled logging has been available in Firebug for long time and since version 1.11 beta 2 improves this little nifty feature, let's take a sneak peak at what it does and how it could be useful.

 

Styled logging allows the user of console.log() API to use custom CSS styles.

How to specify custom CSS

First of all take a look at a simple example:

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

Where the %c is used as a style format variable. This is how the log appears in the Console panel.

Read more...

One of the new improvements introduced in Firebug 1.11 beta 1 is better monitoring of messages sent between frames/windows. These messages are sent via window.postMessage.

Couple of quick notes about window.postMessage:

  • It enables cross-origin communication.
  • It places a message in the message queue associated with the thread that created the specified window and returns without waiting for the thread to process the message.

Read more...

The Firebug entry point and also the only Firebug UI visible immediately after installation is s Firebug button (icon) placed at the right side of the navigation Firefox toolbar.

This button is called Firebug Start Button and its main purpose is to open Firebug UI by clicking on it (you can also use F12 key to open Firebug) but, the button does much more than just opening Firebug...

Read more...

Firebug's Net panel offers an option called Show BFCache Responses that allows tracking also responses coming from BFCache. But what the heck is this cache for?

Read this post to understand how this cache is different from the standard browser cache and why Firebug supports it.

Read more...

Next Page »