Wink Saville’s Blog

When responding to an AJAX request, actually when responding to any HTTP/1.1 request that is going to be kept alive you need to have a Content-Length header field even if the the content length is 0.

To apache debug server-side scripts the typical solution is to usr print statements back to the browser. But that won’t work for AJAX as there isn’t any place to view the output.

The other method is to log to a file

$fp = fopen(’debug.php’, ‘ab’);
fwrite($fp, “debug data …”);
// Then eventually close
fclose($fp);

Debugging Firefox:

*) DOM Inspector:

By default on Ubuntu the firefox DOM inspector isn’t enabled and when reading “Programmin Firefox” it is one of the recommended tools

But it isn’t enabled by default, apparently this is the case for Windows also where you need to do a custom install to get it. For Ubuntu I installed it via synaptic as firefox-dom-inspector I also added firefox-dbg and firefox-dev. Interesting, it wasn’t available right away and I needed to reboot the system, although there may be other ways.

*) Java script parsing bugs

At the moment, 20070602, I don’t see parsing errors for java script files I create?

*) Java script runtime debugging:

Method one: run FF from the command line with the -console option: wink@ic2d1:~$ firefox -console & and then use “dump” commands to print strings to the console.

Method two: use Venkman debugger. Again, wasn’t available by default, I used Toos->Add-on and navigated to “Web and developer tools” and searched for debugger, the Venkman debugger was the first choice. Seleting this and the “Install Now” button installed it.

*) Venkman debugger:

To get Venkman to debug my overlay I had to enable browser files: Goto menu item “Debug/Exclude Browser Files” and be sure it is not checked. The list of files will then expand and my script “sl.js” was visible. A break point could then be set.

Adding preferences isn’t too hard. I followed the instructions here. I had several problems of my own making plus one in the example code. The example code problem was:

var gMyPrefs = new PrefsWrapper(”extensions.myextension.”);

PrefsWrapper needed a number “1″ appended:

var gMyPrefs = new PrefsWrapper1(”extensions.myextension.”);

The other minor problem was “myextension” and “yourextension” needs to be “sparkrocket”.

The problems of my own making were a miss-understanding of javascript. At first I added the example code at the global scope but nothing would happen. After a little while of adding debug I figured out I needed to not have the example code at the global scope, but it needed to be in sr_initialize. I could then execute the code from prefsutils.js.

Also, the prompt service described here is similar but different from “prompt()” builtin function which also prompts for input but I couldn’t find the docs for it so I used the prompt service.

Finally, after adding the setUnicharPref I couldn’t unset it, at first I thought it would replace the defaults/preferences/extensions.js value for user.name. But no, that is just the default, the value is actually stored in ~/.mozilla/firefox/fbgu8siq.default/prefs.js and can be modified by going to the url “about:config”.

Here’s an update to this post 7/6/2008:

Use this link from firefox and in particular Setup the Development Environment.

—-

I used this link as a model for creating an extension which put a button on FF’s address bar: Building an extension

I more or less followed those instructions: Firefox user interface is written as a .xul file, pronounced “zool”. As explained in Building an extension in the “Chrome URI’s” section you can even execute the browser ui in the browser. Place “chrome://browser/content/browser.xul” in the browser address bar.

To add a new user interface element you create an overlay and basicly dynamically modify the browser.xul file. An overlay is an .xul file which defines a location where the new interface element is to be located and then what it is to do. Finding the location to insert isn’t difficult, the main UI document on my Ubuntu system it is located at at /usr/share/firefox/chrome/browser/content/browser/browser.xul

In the example they modified the status line which is can be found in browser.xul by searching for “statusbar”. Since I wanted to modify the address url I looked around and found that there is a texbox with the id=”urlbar”. So the prgs/fx/sl/chrome/content/sample.xul file contains the following:

<textbox id=”urlbar”>
<button insertafter=”page-proxy-dec” id=”my-button” label=”sl”
oncommand=”alert(’You pressed me!’); return false;”/>
</texbox>

Which adds a button with the label “sl” to the address bar and when pressed displays an allert with “You pressed me!”. So the following steps will get you the same thing:

1) Created my “extension” in ~/prgs/fx/sl which have the following 3 files:

chrome.manifest
install.rdf
chrome/content/sl.xul

2) The content of the files are:

wink@ic2d1:~/prgs/fx/sl$ cat chrome.manifest
content sl chrome/content/
overlay chrome://browser/content/browser.xul chrome://sl/content/sl.xul

 

wink@ic2d1:~/prgs/fx/sl$ cat install.rdf
<?xml version=”1.0″?>
<RDF xmlns=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”
xmlns:em=”http://www.mozilla.org/2004/em-rdf#”>

<Description about=”urn:mozilla:install-manifest”>
<em:id>sl@saville.com</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>

<!– Target Application this extension can install into,
with minimum and maximum supported versions. –>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>

<!– Front End MetaData –>
<em:name>sl</em:name>
<em:description>Shared link<em:description>
<em:creator>Wink Saville</em:creator>
<em:homepageURL>http://www.saville.com/</em:homepageURL>
</Description>
</RDF>

wink@ic2d1:~/prgs/fx/sl$ cat chrome/content/sl.xul
<?xml version=”1.0″?>
<overlay id=”sample”
xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
<textbox id=”urlbar”>
<button id=”my-button” label=”sl”
oncommand=”alert(’You pressed me!’); return false;”/>
</texbox>
</overlay>

3) To install the extension added sample@foo.net to the extensions directory:

wink@ic2d1:~/prgs/fx/sl$ cat ~/.mozilla/firefox/fbgu8siq.default/extensions/sl@saville.com
/home/wink/prgs/fx/sl

This is just the path to my extension

4) To actually get the url of the current page, this looks like the definitive source. and it says the best is window.content.location.href. I also tried document.getElementById(’urlbar’).value which also looks to have worked.

That worked beautifully, I wanted to set a break point
on the first line of my code that executed after it loaded.
I ran:

firefox -chrome chrome://venkman/content

and then did “window.open()” my code loaded and I
set a future breakpoint on the first statement in the file.
I then checked “Save Break/Watch Settings On Exit” in
the file menu and then exited firefox.
I’d like to thank Alex Vincent for solving the mystry on how to debug a the initialization/loading of a Firefox extension. Earlier I had a problem concerning why my Firefox extension would not work on the Mac. My attempts to debug that led me to want to use a debugger to watch how my extension worked as it was loaded, but I couldn’t figure out a solution. So I posted a message to the Mozilla developer forums javaScript Debugger email list.

The solution was provided by Alex Vincent, which was to not use the -venkman option but instead execute using -chrome below is the last message I posted this subject which details the solution:

That worked beautifully, I wanted to set a break point
on the first line of my code that executed after it loaded,
so I ran:

firefox -chrome chrome://venkman/content

and then executed “window.open()” as you suggested.
My code loaded and I set a future breakpoint on the
first statement in the file. I then checked
“Save Break/Watch Settings On Exit” in
the file menu and then exited firefox.

I then ran a second time with the same command:

firefox -chrome chrome://venkman/content

Then did “window.open()” a second time and we dropped
back into the debugger at my break point at the top of
the file. This was exactly what I wanted.

This is exactly what I wanted, hopefully this helps
someone else in the future.

THANKS Alex!

Wink

For some reason sparkrocket extension isn’t working on the mac, but interesting enough if I run the browser in the browser by using chrome://browser/content/browser.xul with the sparkrocket extension installed it works perfectly.

I couldn’t find browser.xul by searching the OS (find . -name ‘browser.xul’). I searched the net and found that it is in a jar file. /Applications/Firefox.app/Contents/MacOS/chrome/browser.jar. So that mystery is solved.

To make a somewhat long story short, the problem turned out to be that my nesting of a tag <menubar> with the buttons inside was the problem. The reason I had used <menubar> was to position both buttons together. When I removed <menubar> I added a position to each of the buttons and all was well.