Planet Mozilla – Software is hard http://www.softwareishard.com/blog More musings on software development Fri, 09 Aug 2024 12:19:39 +0000 en-US hourly 1 https://wordpress.org/?v=4.7.33 Inspecting WebSocket Traffic with Firefox Developer Tools http://www.softwareishard.com/blog/planet-mozilla/inspecting-websocket-traffic-with-firefox-developer-tools/ Mon, 11 Apr 2016 13:01:07 +0000 http://www.softwareishard.com/blog/?p=1102 WebSocket monitor is an extension to Firefox developer tools that can be used to monitor WebSocket connections in Firefox. It allows inspecting all data sent and received.

It's been a while since we published first version of our add-on for inspecting WebSocket traffic and it's good time to summarize all new features and show how it's integrated with Firefox Developer tools.

Download signed version of this add-on from AMO. The source code with further documentation is available on github.

Update 2019/10/21: New WebSocket inspector has been released in Firefox 71

WebSocket Monitor can be used to track any WS connection, but following protocols have an extra support: Socket.IO, SockJS, Plain JSON, WAMP, MQTT.


(click to enlarge)

Introduction

After the add-on is installed, open Firefox Developer Tools (F12 on Win or ⌥⌘I on OSX) and switch into a new Web Sockets panel. The panel displays list of frames sent/received by all WebSockets connections on the current page as well as Connect and Disconnect events.

The screenshot above shows one Connect event, one Sent frame and one Received frame. There is also a summary at the bottom of the list showing number of frames in the list, total size of transferred payload and total time since the first frame.

The screenshot below shows content of the side panel that displays all details of the selected packet.

Filtering

The extension allows simple filtering of the frame list. It's possible to filter using a keyword where only frames with the keyword in the payload are displayed. Or you might pick a connection ID and see only frames sent/received through that connection.

Protocols

WebSocket Monitor allows inspecting any WS connection, but there is an extra support for the following protocols:

These protocols introduce an extra side bar with parsed payload. See the next screenshot that shows parsed SocketIO frame payload as an expandable tree allowing quick inspection.

Table and Chat Perspectives

There are two ways how to visualize frames. Apart from the Tabular View (see the screenshot above) there is also a Chat View that uses well know 'user-chat' approach (used in various messengers).

Inline Data Preview

Both perspectives offers also an inline data preview. You don't have to always select the frame and go to the side bar, just open the data directly in the frame.

There are more small and nifty features so, don't forget to checkout our wiki if you are interested!

Resources

]]> Firebug Internals II. – Unified object rendering http://www.softwareishard.com/blog/firebug/firebug-internals-ii-unified-object-rendering/ Tue, 10 Jun 2014 15:20:54 +0000 http://www.softwareishard.com/blog/?p=964 Firebug 2 (released today!) uses number of internal architectural concepts that help to implement new features as well as effectively maintain the code base.

Using transparent architecture and well known design patterns has always been one of the key strategies of the (relatively small) Firebug team that allows us maintain rather large set of features in Firebug.

This post describes the way how Firebug deals with JavaScript object representation and the concept ensuring that an object is always rendered the same way across entire Firebug UI.

  • Firebug 2.0 is compatible with Firefox 30 - 32

 

See also list of new features in Firebug 2

Firebug Internals I.

Unified Object Rendering

Firebug (as a web developer tool) is primarily dealing with JS objects coming from the currently debugged page. All these objects are displayed to the user allowing further exploration and inspection. Important aspect of the rendering logic is that an object is always rendered using the same scheme (a template) across Firebug UI. It doesn't matter if the object is displayed in the Console panel, DOM panel or inside the Watch panel when Firebug is halted at a breakpoint. It always look the same and also offers the same set of actions (through the context menu).

Let's see an example. Following three images show how <body> element is displayed in different Firebug panels.

Here is <body> logged in the Console panel.

This screenshot displays <body> in the DOM panel.

And the last screenshot shows how it looks like in the Watch side panel.

The element is always rendered using the same template and also the context menu associated with the object offers the same basic actions (plus those related to the current context).

Architecture

The architecture behind unified rendering is relatively simple. The logic is based on a repository of templates where every template is associated with JS object type (number, string, etc.). When a panel needs to render an object it gets its type and asks the repository for a template that is associated with it. The template is consequently used to generate HTML markup.

Firebug uses Domplate engine fore templates, but any other templating system could be used instead.

  • An object (JS object coming from debugged page content) is logged into the Console panel.
  • The panel asks the repository to render the object.
  • Repository gets the right registered template for the object (done usually according to object's type).
  • Finally, the template renders itself using the original object as data.

Implementation

Let's yet see a few code examples that show how (simplified) implementation looks like from JavaScript perspective.

Here is how getTemplate can implemented (note that Firebug implementation is a bit different):

getTemplate: function(object)
{
    // Iterate registered templates and return the
    // one that supports given object
    for (var i=0; i<templates.length; i++) {
        var template = templates[i];
        if (template.supportsObject(object)
            return template;
    }
    return defaultTemplate;
}

An interface of a template object looks like as follows (again simplified).

var Template =
{
    className: "",

    supportsObject: function(object) { return false; },
    getContextMenuItems: function(object) { return []; },
    getTooltip: function(object) { return null; },
    highlightObject: function(object, context) {},
    inspectObject: function(object, context) { },
});

  • className Every template should have a classname so CSS styles can be associated.
  • supportsObject Used to pick the right template for an object
  • getContextMenuItems Used to get commands that are should be displayed in the context menu.
  • getTooltip Provides a text that is displayed in a tooltip.
  • highlightdObject Can be used to highlight the object within the page if mouse hovers over the object.
  • inspectObject Can be used for further inspection of the object (e.g. selecting the right target panel when the user clicks on the object).

See real repository of templates (a template in Firebug is called rep) on github.

Extension Points

The entire concept is also nicely extensible. This is great especially for extension (i.e. Mozilla add-ons) authors that can plug in into the logic and customize it.

  • Extensions can provide and register new templates that are rendering specific object types (coming e.g. from JS libraries like jQuery or EmberJS) and define how objects are rendered across entire UI.
  • Extensions can also provide a set of actions that can be performed on existing of custom object types.
  • Extensions can specify new CSS for existing templates and create custom themes.
]]> Firebug Internals I. – Data Providers and Viewers http://www.softwareishard.com/blog/firebug/firebug-internals-i-data-providers-and-viewers/ http://www.softwareishard.com/blog/firebug/firebug-internals-i-data-providers-and-viewers/#comments Fri, 28 Mar 2014 13:35:35 +0000 http://www.softwareishard.com/blog/?p=920 One of the achievements of Firebug 2 alpha 1 release has been adoption of new JSD2 API and this task required significant changes and improvements in our code base. Among other things, we have also introduced a new concept that allows to nicely build asynchronously updated UI.

There are other concepts in Firebug 2 and this version is with no doubt the best one we have released. Try it and let us know how it works for you (Firefox 30+ needed).

In order to implement remote access to the server side debugger API, Firebug UI needs to know how to deal with asynchronous update. We applied Viewer Provider pattern and extended it with support for asynchronous data processing.

If you like using Document View, Model View Controller or similar design patterns to build your code base, you'll probably like Viewer Provider too.

So, follow this post if you are interested to know what Viewer Provider looks like.

Viewer Provider

This design pattern represents a concept of data providers that mediate data access through an unified interface. Providers are usually consumed by Views (or Viewers) that use them to query for data and asynchronously populate their content when results are available.

First let's see simpler, but related Document View pattern:

  • View is responsible for data rendering
  • Document represents a data source

The problem with this concept is that View needs to know the interface (API) of the Document. This makes it hard for the View to switch to another data source, in other words, it's hard to reuse the same View for other Documents.

An improvement of this simple concept is incorporating a Provider in between the Document and View. The provider knows the Document API and expose them in unified way to the Viewer.

  • Provider provides data through unified interface

There is typically one provider for one specific data source/document, but in complex application (like Firebug) there can be even a hierarchy of providers.

Having data providers implemented for various data sources means that existing viewers can easily consume any data and can be simply reused.

Here is how Provider interface looks like:

var Provider =
{
  hasChildren: function(object) { return this.getChildren().length > 0; },
  getChildren: function(object) { return []; },
  getLabel: function(object, col) { return ""; },
  getValue: function(object, col) { return null; },
}
  • hasChildren: used mostly by tree-style viewers that needs to know whether a twisty (+/- icons) should be displayed for specific item or not; It's implementation can be simple, as you can see in the code or optimized for various scenarios.
  • getChildren: returns a list of child objects for the given object
  • getLabel: returns a label for the given object; The label will be directly displayed within the UI (e.g. in a drop down list). The col argument can be used by UI widgets supporting tabular data display (several labels for given object/row).
  • getValue returns a value for the given object

Asynchronous Viewer Provider

One of the challenges when consuming data is support for asynchronous processing. Especially in case on web applications toady. If you need a data you send XHR and wait for the asynchronous response. Viewer and Provider pattern has a solution fort this too.

  • getChildren returns a Promise instead of a direct list of children. The promise is resolved asynchronously as soon as data is available.

The main difference is that getChildren returns a Promise. The solid line (on the image above) represents synchronous data querying, the dashed line represents asynchronous update. The promise object usually comes from the data source and is passed through the provider to the view. Of course, the update happens when queried data are available.

Online Demo

You can also check out a simple web application that shows how viewers and providers can be implemented.

The demo application implements the following objects:

  • Storage a simple data storage (a document) returning data asynchronously
  • Provider implemented for the Storage above
  • Viewer simple list viewer that is using the Provider above to access data.

The application's entry point is main.js

 

 
 

Read more about Data Provider and how they are implemented in Firebug 2.

]]> http://www.softwareishard.com/blog/firebug/firebug-internals-i-data-providers-and-viewers/feed/ 2 Firebug 2: Support for dynamic scripts http://www.softwareishard.com/blog/firebug/firebug-2-support-for-dynamic-scripts/ http://www.softwareishard.com/blog/firebug/firebug-2-support-for-dynamic-scripts/#comments Thu, 27 Mar 2014 17:34:12 +0000 http://www.softwareishard.com/blog/?p=882 Firebug 2 (first alpha) has been released this week and it's time to checkout some of the new features. Note that you need at least Firefox 30 to run it.

This brand new version introduces a lot of changes where the most important one is probably the fact that it's based on new Firefox debugging engine known as JSD2.

Also Firebug UI has been polished to match Australis theme introduced in Firefox 29.


Dynamically Created Scripts

Let's see how debugging of dynamically created scripts has been improved in this release and how Firebug UI deals with this common task. We'll cover following dynamic scripts in this post:

  • Inline Event Handlers
  • Script Element Injection
  • Function Object

There are other ways how to create scripts dynamically.

 

Inline Event Handlers

Inline event handlers are little pieces of JavaScript placed within HTML attributes designed to handle basic events like onclick.

<button onclick="testFunction()">Click Me</button>

These scripts are compiled dynamically when needed (before executed for the first time). That's why they are considered dynamic and you don't have to see them in the Script location list (until compiled by the browser).

Script's URL is composed dynamically (there is no real URL for dynamic scripts) and event handlers scripts follow this scheme:

<element-name> <attribute-name> <button-label>

If you select the script from the script location menu, you should see the source that is placed within the onclick attribute.

Of course, you can create a breakpoint as usual. Try live example page if you have Firebug 2 installed.

 

Script Element Injection

Another way how to dynamically compile a piece of script is using <script> element injection.

var script =
        "var a = 10;\n" +
        "var b = 10;\n" +
        "console.log('a + b = %d', a + b);\n" +
        "//# sourceURL=injected-script.js\n";

var scriptTag = document.createElement("script");
scriptTag.textContent = script;
document.body.appendChild(scriptTag);

Again, you can check out live example.

There is couple of things to see:

  • There is one event handler script: button onclick Click Me since we injected the script through a button and its event handler.
  • There is another dynamic script injected-script.js - this one created using the injected <script> element
  • Injected script uses custom URL, which is defined within the source using sourceURL comment:
    //# sourceURL=injected-script.js

  • If no sourceURL is provided default one is generated (using script element id or xpath)

 

Function Object

Another way how to compile a script dynamically is using JavaScript native Function object.

var source = "console.log('a + b = %d', a + b);\n";
var myFunc = new Function("a", "b", source);
myFunc.displayName = "myFunc";

myFunc(10, 10);

  • The script URL is generated automatically. The following scheme is used: <parent-page-url> <line-number> "> Function";
  • You can't use sourceURL due to a platform bug
  • There is one event handler script

Check out live example.

 

We want to switch into beta phase soon and it would be great to hear from you about how this version is working for you.

 

]]> http://www.softwareishard.com/blog/firebug/firebug-2-support-for-dynamic-scripts/feed/ 4 Firebug Tip: Resend HTTP Request http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-resend-http-request/ http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-resend-http-request/#comments Fri, 06 Sep 2013 10:28:37 +0000 http://www.softwareishard.com/blog/?p=844 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...

See all Firebug tips

Resend Action

The first and obvious way is to use Resend action that is available in the Net and Console panel context menu. It's the simplest method, just right click on an HTTP request in the Net panel or on XHR log in the Console panel and pick the Resend menu item.

You should see a new request displayed. Both requests will be the same since Firebug preserves headers, posted data, etc.

You can use this test page to try it yourself.

The URL of the webservice is:

http://www.softwareishard.com/firebug/tips/resend/hello.php

...and the implementation looks like as follows:

<?php
if (isset($_POST["name"]))
  echo "Hello ".$_POST["name"]."!";
else
  echo "Hello!";
?>

Copy as cURL

You might prefer OS system command line and its cURL command line tool.

A simple example first. To get the response from our hello.php service you need to execute:

curl http://www.softwareishard.com/firebug/tips/resend/hello.php

In order to get the cURL command for an existing HTTP request, right click on the request in the Net or Console panel and pick Copy as cURL action. Firebug will copy it with all necessary arguments to the clipboard (preserving headers, etc.)

The result in our case is:

curl 'http://www.softwareishard.com/firebug/tips/resend/hello.php' -H 'Host: www.softwareishard.com' -H 'User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:26.0) Gecko/20100101 Firefox/26.0' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8' -H 'Accept-Language: en-US,en;q=0.5' -H 'Accept-Encoding: gzip, deflate' -H 'Content-Type: application/x-www-form-urlencoded; charset=UTF-8' -H 'Referer: http://www.softwareishard.com/firebug/tips/resend/resend.html' --data 'name=Bob'

Command Editor

The third option is using Firebug Command Editor and execute XHR with pure JavaScript. In this case you might specify headers and other options just as you like it.

Just open Firebug UI and select the Console panel on the page you are debugging.

 
 

  • Would you be interested to have another way to resend a request?
  • Would it be useful to have also Copy as Wget? If yes star this issue, so we know how high priority it is for us.

 

 
]]> http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-resend-http-request/feed/ 1 Firebug Tip: getEventListeners() command http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-geteventlisteners-command/ http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-geteventlisteners-command/#comments Mon, 02 Sep 2013 06:40:47 +0000 http://www.softwareishard.com/blog/?p=806 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).

See all Firebug tips

Basic Scenario

Let's see how the basic usage of the getEventListeners() command looks like. First, here is a test page that registers one click listener for a testElement.

<!DOCTYPE html>
<html>
<head>
<title>getEventListeners()</title>
</head>
<body>
<div id="testElement">Click Me!</div>
<script>
function myClickListener()
{
    console.log("click");
}
var testElement = document.getElementById("testElement");
testElement.addEventListener("click", myClickListener, false);
</script>
</body>
</html>

The expression we are going to execute on Firebug's Command Line looks like as follows:

getEventListeners($("#testElement"))

It returns a descriptor object that is logged into the Console panel.

If you click the descriptor you'll be navigated to the DOM panel that allows further inspection.

As you can see, there is one click listener registered with the testElement element (the click field is an array containing all registered click listeners). Clicking the myClickListener function navigates you to the Script panel to see its source code and perhaps create a breakpoint for further debugging.

Using getEventListeners() in an expression

In some cases, we might want to reference the listener function directly in an expression:

getEventListeners($("#testElement")).click[0].listener

The expression returns directly the handler function that is logged into the Console panel. You'll be navigated to the Script panel directly if you click the return value.

You might also want to manually execute the listener function and e.g. break in the debugger in case you created a breakpoint inside the method.

getEventListeners($("#testElement")).click[0].listener()

Event Listeners & Closures

Some JavaScript libraries that implements API for event listener registration might register their own function and call the original listener through a closure. Let's see a simple example that demonstrates this technique.

observe(testElement, "click", function myClickHandler() {
    console.log("click");
});

function observe(element, eventType, handler) {
    function localHelper() {
        handler();
    }
    return element.addEventListener(eventType, localHelper, false);
}

Executing the following expression on the command line returns localHelper function since it's the registered event handler.

getEventListeners($("#testElement")).click[0].listener

If you want to log the original listener function myClickHandler - you need to get the handler argument that is accessed by localHelper closure. Next expression shows how variable inside a closure can be accessed (via: .% syntax).

getEventListeners($("#testElement")).click[0].listener.%handler

This expression returns reference to myClickHandler function.

 

You can read more about Closure Inspector on Firebug wiki.
You can also read wiki page about getEventListeners command.

 
]]> http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-geteventlisteners-command/feed/ 5 How to Start with Firebug Lite http://www.softwareishard.com/blog/planet-mozilla/how-to-start-with-firebug-lite/ http://www.softwareishard.com/blog/planet-mozilla/how-to-start-with-firebug-lite/#comments Wed, 21 Aug 2013 18:30:53 +0000 http://www.softwareishard.com/blog/?p=800 FirebugLite is lightweight version of Firebug (the Firefox extension) that does implement only a subset of features (mainly missing the Script and Net panel).

It's implemented as pure web application and running in all major browser.

Using Firebug lite is quick since it doesn't have to be installed (it's a web app) and it can also be injected into an existing page using a bookmarklet.

The next set of screenshots shows how Firebug Lite looks like in various browsers.

 

 

 

Let's see how you can run Firebug Lite within a web page. This post covers four scenarios:

  • Include using <script> element
  • Run through Bookmarklet
  • Firebug Lite on iPad
  • Run as Chrome Extension

Include using <script> element

Firebug Lite is pure JS application and so you can include it in your page just like any other JavaScript code. See an example:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="https://getfirebug.com/firebug-lite.js"
          type="text/javascript"></script>
</head>
<body>
  <div style="color:green">Hello</div>
</body>
</html>

This approach is recommended in cases when you often inspect the same page and you want to have Firebug Lite UI always ready after page load (refresh). You can also download firebug-lite.js file and run it locally from your web server as follows:

<script type="text/javascript" src="/local/path/to/firebug-lite.js"></script>

Read more.

Run through Bookmarklet

You an also inject Firebug Lite into an existing page using the following bookmarklet.

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

Just drag this Firebug Lite Link into your Bookmarks toolbar. You can also click the link immediately to test Firebug Lite on this page.

This approach is recommended in cases when you use Firebug Lite for inspecting random pages.

Firebug Lite on iPad

One of the most interesting use cases is running Firebug Lite on mobile devices, especially tablets since they have bigger screen (Firebug Lite is not yet optimized for small screens).

Inspecting pages on mobile devices can be faster with Firebug Lite since you don't have to deal with remote debugging settings, setup connection with the PC, etc. All you need is to click a bookmarklet.

Read a post about how to create Firebug Lite Bookmarklet for iPad.

Run as Chrome Extension

Finally, you can install Firebug Lite as an extension into Google Chrome browser.

There are benefits over Firebug Lite bookmarlet:

  • Browser toolbar integration
  • Able to activate Firebug Lite for a particular domain
  • Firebug Lite will be loaded before all other scripts, allowing it to capture all console calls, and all XHR requests for that page
  • It is faster to load, because all code and images will be store in the extension's directory in your machine
  • Will be able to read external resources in the next version

Read more about Firebug Lite on Chrome.

Resources

If you are interested to contribute to the project you can start with reading Gal's post explaining what you can do. Gal Steinitz is the current Firebug Lite maintainer, so shoot any questions about what's coming up in his direction!

You might also be interested in what the future holds for Firebug Lite.

 
]]> http://www.softwareishard.com/blog/planet-mozilla/how-to-start-with-firebug-lite/feed/ 3 Firebug Extension: FirePicker – Pick your color http://www.softwareishard.com/blog/firebug/firebug-extension-firepicker-pick-your-color/ Thu, 08 Aug 2013 09:20:59 +0000 http://www.softwareishard.com/blog/?p=796 I couldn't miss this nifty extension in my series of posts about Firebug extensions. It's a small plugin focused on one thing and working great!

This extension is compatible with Firebug 1.12 (will be released in couple of weeks).

FirePicker adds a small color picker dialog when editing a CSS rule in Firebug. The addon scans for values that can be parsed as CSS colors and displays them in a drop-down list right below the firebug's CSS editor box. Clicking on the color value in the drop-down brings up a color picker dialog.

Multiple Colors

The integration works well and the UI/UX is pretty intuitive, so let me just mention how multiple color support look like. In case there are more colors values specified for single CSS property Fire picker previews them all in the drop down list.

See an example.

<html>
<head>
  <title>FirePicker</title>
  <style>
  body {
    border: 1px solid;
    border-color: red green blue orange;
  }
  </style>
</head>
<body>Hello World!</body>
</html>

If you click the border-color CSS property value to edit it FirePicker displays a little preview for every color.

Clicking on a color in the list shows the color-picker dialog that allows changing the value.

Resources

 
]]> Firebug Extension: FireStorage Plus! – Manage web storage http://www.softwareishard.com/blog/firebug/firebug-extension-firestorage-plus-manage-web-storage/ http://www.softwareishard.com/blog/firebug/firebug-extension-firestorage-plus-manage-web-storage/#comments Tue, 06 Aug 2013 14:08:47 +0000 http://www.softwareishard.com/blog/?p=785 Another Firebug extension we have tested with upcoming Firebug 1.12 (will be available in several weeks) allows managing web storage directly in your Firebug.
 
FireStorage Plus! appends an extra Firebug tab which lets you inspect and modify the local and session storage.

Local Storage Example

The user interface and experience is simple and intuitive. It looks and works just like you would expect from this kind of extension. Let's see a quick example that puts some data into the local storage:

localStorage.setItem("Father", "John, 32 years old");
localStorage.setItem("Mother", "Angela, 31 years old");

Modify Data

You can also easily modify existing data. Just right click on an entry in the panel and pick Edit.

As you can see in the context menu there are more actions related to data management. You can also remove existing or create new storage entries.

Filtering

The FireStorage Plus! panel offers also a few buttons for filtering its content. See extended example that also stores some data into the session storage.

// Initialize local storage
localStorage.setItem("Father", "John, 32 years old");
localStorage.setItem("Mother", "Angela, 31 years old");

// Initialize session storage
sessionStorage.Vacation = "Bali, middle of August";

  • Both - display data from both local and session storage
  • localStorage - display data from the local storage only
  • sessionStorage - display data from the session storage only
  • localStorage all scopes - display data from the local storage for all scopes

DOM Panel

Note, that the (built-in) DOM panel has also basic support for data storage management. It's not that nice and useful especially in case of bigger amount of data, but worth of mentioning.

Resources

 

Is there any other feature you'd like to see in this extension?

 
]]> http://www.softwareishard.com/blog/firebug/firebug-extension-firestorage-plus-manage-web-storage/feed/ 1 Firebug Extension: FireQuery – jQuery development http://www.softwareishard.com/blog/firebug/firebug-extension-firequery-jquery-development/ http://www.softwareishard.com/blog/firebug/firebug-extension-firequery-jquery-development/#comments Thu, 25 Jul 2013 07:34:01 +0000 http://www.softwareishard.com/blog/?p=780 FireQuery is one of my favorite extensions for Firebug and I am regularly using it every time I am debugging web application that is build on top of jQuery.
 
FireQuery is a Firebug extension for jQuery development. It's a collection of Firebug enhancements for jQuery.

jQuerify

FireQuery allows you to inject jQuery into any web page. Just click the jQuerify button in the Console panel.

You can specify your own URL in about:config for the key extensions.firebug.firequery.jQueryURL.

Note that page jQuerifying can be also done through Firebug built-in include() command.

jQuery Wrapper

FireQuery also improves logs displayed in the Console panel. When you use $() (the one coming from jQuery) you'll see that the log is marked as being done using jQuery wrapper.

jQuery Data

FireQuery visualizes attached jQuery.data().

$("body").data("name", "Joe").data("age", "39")

Executing the script in a page (or on Firebug's Command Line) will associate data with the body element. Now if you query for the body element you'll see a little envelop icon attached to the result.

Clicking on the icon will navigate you to the DOM Panel where you can see/inspect all details.

Finally, you can also use the HTML panel to see the data.

 

There are more features, so check out the FireQuery home page.

Resources

 
]]> http://www.softwareishard.com/blog/firebug/firebug-extension-firequery-jquery-development/feed/ 3