Debugging GeoNode in the Browser

This section covers some techniques for debugging browser and Django related response bugs using the Firefox web browser extension named Firebug. The concepts covered apply to other browser’s tools but may vary in terminology.

Another Firefox extension worth noting is ‘jsonview’. This extension supports formatted viewing of JSON responses and integrates well with Firebug.

References:

Net Tab

The net tab allows viewing all of the network traffic from the browser. The subtabs (like the selected “Images” tab) allow filtering by the type of traffic.

../../../_images/firebug-net.png

Firebug Net Tab

In this screen-shot, the mouse hover displays the image content and the full URL requested. One can right-click to copy-paste the URL or view in a separate tab. This is useful for obtaining test URLs. The grayed out entries show that the resource was cached via conditional-get (the 304 not modified). Other very useful advanced information includes the size of the response and the loading indicator graphics on the right. At the bottom, note the total size and timing information.

Net Tab Exercises

  1. Go to layers/maps/search pages and look at the various requests. Note the XHR subtab. Look at the various request specific tabs: headers, params, etc.
  2. Use the ‘disable browser cache’ option and see how it affects page loads. Discuss advantages/challenges of caching.

DOM Tab

The DOM tab displays all of the top-level window objects. By drilling down, this can be a useful way to find out what’s going on in a page.

../../../_images/firebug-dom.png

Firebug DOM Tab

In this example, the mouse is hovering over the app object. Note the high level view of objects and their fields. The console tab allows interacting with the objects.

DOM Tab Exercises

  1. Drill down in the DOM tab.
  2. Use the console to interactively exercise jquery.
  3. Use the console to interact with the app/map or other page objects

Script Tab

The script tab allows viewing scripts and debugging.

../../../_images/firebug-debug.png

The screen-shot displays a breakpoint set at line 3, the current code is stopped at line 8 and the mouse hover is displaying the value of the variable ‘class_list’. On the right, the ‘Watch’ tab displays the various variables and scopes and offers a drill down view similar to the DOM view. The stack tab displays the execution stack context outside the current frame.

Script Tab Exercises

  1. Step through some code
  2. Look at various features: variables, scopes, DOM drill-down

HTML Tab

The HTML tag allows viewing and drilling down into the DOM. This is an incredibly useful feature when doing CSS or HTML work.

../../../_images/firebug-html.png

The screen-shot displays a search result ‘article’ element highlighted with padding and margin in yellow and purple. The DOM structure is displayed on the left and the right panel displays the specific style rules while the computed tab displays the effective style rules. The layout tab displays rulers and property values while the DOM tab displays a debug/DOM-like view of the actual object’s properties.

HTML Tab Exercises

  1. Identify elements, look at the tabs on the right
  2. Change styles, add new rules and styles
  3. Edit existing HTML elements via the raw and tree-view