Using debugging tools

Gag

Cross-post of the second translation dedicated to debugging maps based on the Google Maps API from my blog .

Web programming can be quite difficult, if you do not use various debugging tools. And especially if you're dealing with JavaScript and HTTP requests. This series of screencasts will show you how, using some means, to make the development and debugging of your card faster. Below are links that can be used to download some of the extensions shown in screencasts for Firefox.

Screencasts

Click on the screenshot to start viewing. Adobe Flash Player is required for viewing. Using the scroll bar, you can navigate through the screencast.
Using the Web Developer Toolbar extension. Signatures:

1. This extension for Firefox adds a toolbar containing all the necessary tools (sometimes quite elegant) for web development;
2. This screencast only shows how some of these tools can help with the Google Maps API. But you should try to use all of them to understand what a powerful toolkit it helps in development;
3. Work with images;
4. This tool is very useful in determining the positioning of images, and their sizes. In the case of Google Maps, this tool shows you how the API makes a map from a variety of images;
5. Now you can see a map made up of pieces of 256 * 256 pixels each;
6. Information about the images;
7. This tool is useful in identifying images that are on a page in their original form. This is a good way to see how a web designer, using CSS to manage image properties, creates a website;
8. Note that the URL of the image contains the coordinates and zoom level (this data is used in the getTileUrl function);
9. Ruler;
10. The web developer’s toolbar includes a ruler that can be used to determine the exact dimensions of an area. This can be useful, for example, when positioning controls;
11. Drag the ruler to the place where you would like to see the map controls.

Using the Firefox error console. Signatures:

1. Mozilla Firefox has a built-in error console that displays errors or warnings from JavaScript, CSS, or HTML that occur during page processing;
2. Performing this example involves displaying 3 markers on the map. The coordinates of the location of the markers are taken from the XML file. It is clear that the example will not work. To find out what the problem is, the error console will help us, with which we will see a JavaScript error and move on to more complex examples;
3. The error console is in the default Firefox browsers;
4. The console will tell us that we have an undefined variable or function. If you click on this message, the source code opens with a pointer to the error string;
5. Now my mistake is clear: I used the variable point, although I defined latlng.

Use the script debugger built into Internet Explorer. Signatures:

1. Internet Explorer can be configured to show script errors and then display the problematic JavaScript file in the script debugger. Debugging scripts with IE is a long process. Therefore, it is recommended to debug using the Firefox error console, and use the IE debugger for specific cases;
2. To begin with, we need to enable debugging (by default - disabled);
3. Remove checkboxes from both items responsible for disabling debugging;
4. IE will stop the execution of the script and display an error message stating the name of the error and the number of the error line. If you want to see the script in the debugger, then click the 'Yes' button;
5. The arrow points to a line with an error code. This is all the same mistake - using an undefined point variable instead of latlng;
6. If you do not select the “Stop Debugging” menu item, then IE will not let you continue to work.

Use Firebug extension for Firefox. Signatures:

1. Firebug is an extension for Firefox that has truly powerful tools for web development and debugging. The extension puts its icon in the status bar of the browser. Clicking on the icon, you call up the interface with a variety of tabs. Some of these tabs will be covered in this screencast. But be careful: installing this extension can slow down your browser;
2. Script tab;
3. This tab shows you all the inclusions of JavaScript code on the page. This is very useful not only for checking your code, but also, especially, for studying the code on other sites;
4. Click on the extension icon;
5. Choose a crypt that loads the Google Maps API;
6. This script loads API version 2.93;
7. External JavaScript file added by the API loader;
8. The code is confused, but it creates less load;
9. Net tab;
10. This tab shows you all requests that go through the Web: requests for JavaScript files, images, HTTP requests, etc. This tab will be useful for debugging the work of various Google Maps API classes, such as: GClientGeocoder, GGeoXML and GDirections;
11. This action calls GClientGeocoder.getLatLng (), which returns only the coordinates of a point;
12. Click on the extension icon;
13. Request geocoder;
14. Click on the Params tab to view the information in the request;
15. Click the Response tab to see the response from the server;
16. The status code belongs to the class GGeoStatusCode;
17. You can see that 200 means successful request;
18. Now let's create a request for a non-existent place;
19. New request;
20. New status code in response from the server;
21. The server gave us the answer about the non-existent address;
22. HTML tab;
23. This tab will help you check the DOM elements on the page, HTML and CSS code. Even with its help, you can make any small changes in the code;
24. The code of the page elements, on which the mouse pointer is pointed, is highlighted in the editor;
25. You can edit HTML here;
26. You can edit styles in this part of the editor window;
27. Console tab;
28. This tab allows you to manage JavaScript code on the current page and view debugger messages. This is a powerful alternative to the built-in Firefox error console;
29. Click on the extension icon;
30. The console can display messages like GLog.write;
31. These messages can be easily copied and pasted elsewhere;
32. The console can also display more detailed information about not only string variables in your code, but also, for example, about objects of some class;
33. Clicking on any element displayed in the message takes you to the DOM tab, where this object is parsed in detail: it is shown in what functions it is used and its properties;
34. Here you can try any line of JavaScript code;
35. Click here to switch between different code display styles;
36. Console messages are shown on the left.

Using GLog.write (). Signatures:

1. The Google Map API has its own debugging tool - Glog. Although not as functional as Firebug, it works in every browser and is an excellent alternative to the alert () method;
2. In this example, the marker coordinates data is again taken from the loadable XML file. We will demonstrate debugging with GLog and the alert () method;
3. Now we add an alert () method;
4. Remember that the further execution of the script is interrupted until we press the Ok button. This is not very good, as it may affect the functionality of your page;
5. Now add GLog.write ();
6. This method displays all messages step by step, over time, and does not interrupt the execution of the script.

LINKS

The following links may be useful to you if you follow the tips given in screencasts:

• Web Developer Toolbar Firefox Add-ons Download ;
• Firebug Firefox Add-ons Download .