This tutorial assumes:
Line numbers are referenced in this tutorial. To enable line numbering in the editor tabs, click View Line Numbers in the View menu.
Opening this tutorial from the Start Page
gives you the option to open the associated project. Otherwise,
click Open|Project in the File
menu and select
All files included in the tutorial project are displayed on the
Projects tab in the
On the Projects tab, double-click jsdemo.html to open it in the Editor Pane. In the View menu, click Preview in Browser ('Ctrl'+'K', 'Ctrl'+'V').
If Firefox is not set as your default browser in Komodo's Web Browser preferences, use the file URL in your browser's address bar to locate the file and open it in Firefox.
Try the application. Right-clicking over a country in the map brings up a country-specific context menu instead of Firefox's default context menu. Selecting a city from the menu adds that city under the appropriate country heading in the table to the right and removes it from the menu. Reloading the page resets the page to the initial view.
The context menu for Mexico is intentionally broken so that we can find the problem with the debugger later in this tutorial and fix it.
The first thing we notice is the
This is a list of the countries with nested lists of cities that
belong to them. Next is the
demo function, which
onContextMenu function that brings up
the custom context menu, and the
controls the actions on that menu. The comments describe what is
happening in the code.
In Firefox refresh the City Picker page, click the Connect to Komodo Debugger button, and move your mouse pointer over the image map.
To leave this event handler and start debugging context-menu.js, click the Go/Continue Debugging button in the main or debugging toolbar. Select the context-menu.js editor tab.
Set a breakpoint on line 62 of context-menu.js by clicking in the empty left margin. Breakpoints are displayed as an orange-red octagonal icon in the breakpoint margin.
Right-click over Mexico in the City Picker map.
As soon as the browser registers a right-click over Mexico on the image map, the debugger should stop on line 62 of context-menu.js. A yellow arrow icon indicating the current breakpoint will appear in the margin at that line.
One of the most useful things the debugger does is keep track
of variables in the code. In the locals tab in
the Output pane we can see a list of all
variables in the current scope (i.e. variables in the
demo function). The globals tab
shows everything in the
window object; you can see
the DOM objects by expanding the
document node in
this list. The
instance tab shows properties of the
You may have noticed earlier that the context menu for Mexico is broken. The variables list in the locals tab can help us find out why.
curr_country variable was set on line 61 and
appears to have the value "Mexic" which doesn't match the
country variable which is "Mexico".
We can modify this variable within the debugger while the it
is in a break state. Double click on
the locals tab to bring up the Edit Variable
Value dialog box. Change "
Mexico" and click "OK". Click the
Go/Continue Debugging button to resume
execution. The context menu for Mexico should appear in Firefox.
(Note: The default context menu may appear initially because of
how the debugger handles coming out of a break state. Clicking
anywhere on the Komodo or Firefox windows will clear this and
show the expected menu.)
That solved the problem for this debugging session only. We
need to find out where that typo came from. Since the only
appearance of the country's name in context-menu.js is
spelled correctly on line 7, we can assume there's a problem in
curr_country is taken
e.target.id, we can extrapolate that the "alt="
attribute of the image map area for Mexico is wrong.
Komodo Tip: If we didn't know where
The cities are added to the country lists by manpulating the
DOM. These are
<LI> elements, but it's fairly
simple to turn these into useful links by creating an
<A> element and populating it with a URL
containing the selected city's name in an
Wikipedia has a fairly simple URL syntax for topic names, and it has information on all of the cities in our lists, so we could easily use it for our link targets.
Lines 43 to 45 in context-menu.js handle creating the list elements and inserting the city name:
var newItem = document.createElement("LI"); newItem.appendChild(document.createTextNode(cityName)); targetList.appendChild(newItem);
Insert the following after line 43 to create an
var newLink = document.createElement('A');
Wikipedia articles can be accessed by adding the subject name
to the end of the base URL. To set the
attribute to a combination of the Wikipedia base URL and the
selected city name, add the following line:
newLink.setAttribute('href', 'http://en.wikipedia.org/wiki/' + cityName)
To insert this link in the list, modify the subsequent two
lines to use
newLink rather than
Save the file and reload the page. Selected cities will now appear as Wikipedia links.