A required tool for HTML, JavaScript, and Ajax development and debugging

Use the best open-source tools to process Web pages, scripts, and styles to simplify the development of new sites and pages. Dynamically checks and modifies HTML markup, CSS, and JavaScript, checks DOM and client-server communication, and learns how bookmarklet makes development safer and easier.

JavaScript applications become more and more complex-to debug code on servers and clients, developers must understand a large number of tools and applications. They also need a variety of tools to check the communication between the two-often involving tags, scripts, CSS, and other technologies commonly used to build Web sites.

This article focuses on the client in the development process and shows some Firefox tools that simplify developers' work. These tools can be used to check pages, change data, or even debug JavaScript, all of which are dynamic. With these tools, you no longer need to use alert () Statements in JavaScript source code to achieve the most advanced debugging, check, and modification.

After this article, you should be able to independently use the Firefox extensions and tools described in this article and apply this knowledge to your own projects.

Content

In this article, we will use tools to dynamically check the HTML code of the page and modify part of the page content, perform advanced JavaScript debugging, modify the DOM, view the communication between the client and the server, and inject the development code into the actual Web site to test these new features.

To follow this article, you will need the following tools:

• Web Developer Toolbar for Firefox, used to dynamically check HTML code, modify part of content, and debug JavaScript
• Firebug, used to debug JavaScript and CSS, modify DOM, and view communication between client and server
• Greasemonkey and bookmarklet including jQuery are used to inject development code into actual Web sites to test new features

As you can see, this article covers a lot of content, so you can only briefly introduce the functions of these tools. However, through this article, you will be able to get a general idea of how to use these tools and what features these tools have. Communication between clients and servers is not described in this article, but may be involved in the next article.

Before getting started

All the tools described here are available for free. You can download them from the above link, or use the links provided in the references section at the end of this article. If you want to follow the example in this article, you should download it immediately. Do not forget to restart your browser to make the changes take effect.

Many examples Use IBM support sites (http://www.ibm.com/support) or Google result pages, so you may open either or both in a new browser window.

Check client code

If you are new to a new application, you often want to know more about it-how it works and how it is built. This may be because you have to debug or expand this program, or because you want to understand how it works to make some reference for your project.

"Web Developer Toolbar for Firefox" (see references) is a great Firefox extension that allows you to quickly check and modify Web sites or Web applications. It can be displayed as a separate toolbar or as a context menu. Assume that you are currently at a http://www.ibm.com/support/ site and want to quickly determine the classes and IDs used throughout the site. GoInformation> Display ID & Class detailsAll IDS and classes are displayed in this document. If you follow these examples, you will see that this quickly shows structures such as IBM's left navigation.

Figure 1. IBM left navigation structure, including id and class details

In addition, some other great outline features are available. For example, you can use all outline tables (none on ibm.com !) Or all block-level elements. In this way, you can easily seedivHow elements are laid out on the screen-this is a good tool for developing new sites.

But it is far more than that-especially for testing. You can easily Disable JavaScript, cookies, or styles to check whether the site is still working, or how it displays screen reader applications or search engines. Disable images and display allaltTags can quickly reveal availability issues, or provide a large amount of information about the images used on the page.

Another important feature, especially to test application security, is the Forms section of the toolbar. Here, you can not only insert a form, but also try JavaScript verification by making the form field writable, or deleting the maximum length of the text field, you can alsoSelectThe drop-down list is changed to a text input field. In this way, it is very simple to test whether the application can work after the data is modified, and no source code needs to be modified. GoForms> Convert Form Methods> GETs to POSTsTo modify the Search form behavior at the top of ibm.com. Figure 2 shows this step:

Figure 2. Search form details

If you enter a search term and pressSearchButton, you will not get the result list, but will be redirected to the Help Page. This is the ideal behavior of the ibm.com search engine.

The other two important features of Web Developer Toolbar are that they can use a very simple interface to View and edit cookie Information (Cookies> View Cookie Information) and View all the JavaScript (Information> View Java) used on the page ). The final feature includes both inline scripts and dynamic loading scripts, so the search will find the results in these two places.

Before continuing to study, you may take some time to understand all the features provided by the Web Development Toolbar. You will soon find it missing and the work will be difficult to carry out. Internet Explorer Developer Toolbar (see references) provides similar features for Internet Explorer.

Explore DOM

After exploring static pages, you can use one of the most powerful extensions that JavaScript developers can use to process dynamic content. If you have never used it, you can install the Firebug extension now (see references) and restart Firefox to load it. From now on, you will have a separate panel, which can be activated by clicking a small selection tag in the lower right corner of the browser. Figure 3 shows the Firebug console:

Figure 3. Firebug Console

This console occupies a lot of memory space, so it can be enabled only when necessary for some websites. It can also be enabled for specific hosts-it is necessary to use Firebug to develop code on a testing machine and debug it.

Once activated, different Firebug features will be listed at the top-currently, only focus on HTML options. It displays the HTML source code of the page in a readable format. You can cascade and expand different parts and use the powerful Inspect button to browse this DOM. Note that the displayed DOM is the current DOM of all Dynamically Modified websites. It is important to note this. If the script deletes an element, the element is also deleted from the Firebug view.

UseInspectFeature to selectChoose support typeDrop-down list. Once an element is selected, the DOM view updates and displays the HTML code of the selected file. If you click and edit them on different elements, these changes take effect immediately on the DOM and the rendered view. Continue andOnchangeAdd the alert () Statement to the event handler, as shown in Figure 4:

Figure 4. Use Firebug to add custom code

ClickEnterTo save the changes, and select other items from the drop-down list. The message appears. Note that the changes will not be permanently saved-once the page is reloaded, the changes will become invalid. This feature is especially useful for Fast Testing of changes or modifications to the DOM to test the functionality of the script (which will be further discussed in the next section ).

You may notice that all CSS styles applied to the selected elements are displayed in blue on the right side of the Firebug panel. This is especially useful for dynamic changes through scripts and CSS debugging (for example, to find an interval problem. The Layout tab provides an overview of the interval and boundary of elements, while the DOM tab is helpful for JavaScript development because it lists all DOM attributes of the selected element.

Needless to say, Firebug can modify both CSS styles and DOM attributes, and these changes take effect immediately. Figure 5 shows the CSS check console of Firebug:

Figure 5. CSS check console of Firebug

Debug JavaScript

For a long time, JavaScript was not able to receive its due honors. Many people regard it as a "Toy" programming language, and IDE and debugger are very lacking. Although there are some solutions-such as Venkman Debugger or IE Script Debugger (see references)-they are difficult to use and provide few features. When you need to reload the site and continuously click until the correct function is triggered, many developers still need to use the alert () statement in their code and development.

With the emergence of Firebug, all this has changed. It has an integrated JavaScript debugger that dynamically provides breakpoint, variable check, and command execution. It is time to surpass alert!

In section 1st of this article, the Information> View JavaScript function of the Web developer Toolbar is used, and IBMSupportDropdowns is called by the drop-down list on the IBM Support Web site. selectChange (this) function. js. Now, selectScriptTab, select from the drop-down listDdnav. jsScript and navigate to the IBMSupportDropDowns. selectChange function. Click the row number to set a breakpoint. Figure 6 shows this step:

Figure 6. Set a breakpoint in Firebug

Now, select any one element from the drop-down list to view how JavaScript Execution stops. Use any button in the menu bar -- or shortcut key F8 (continue), F10 (skip sub-function in one step tracking), and F11 (enter sub-function in one step tracking) -- You can execute the code line by line.

Firebug shows code on the left side, and all Defined variables and objects for the current scope are displayed on the right side. On the DOM element, click directly to go To the html dom view, and, as before, the data can still be dynamically modified. Hover over the variable in the source code to display its content. To add a new observed element, You can input itNew watch expressionAnd pressEnter.

If you selectConsoleTab, and the code will be executed within the context of the stopped function. This allows you to dynamically modify the variable content or call the function. Errors generated in the Console or any part of the code are displayed in the Console. Directly selecting this error will take you to the code segment where the error occurs.

Without a doubt, Firebug provides a more natural way to process JavaScript and provides better flexibility. Once you are familiar with Firebug, you can't do without it, and you can't help but ask how to compile JavaScript code before using Firebug.

View the communication between the client and the server

Web 2.0 applications communicate asynchronously in the background. The data sent can be JavaScript, JSON, or XML. Because JavaScript code receives data, the front-end does not directly see any debugging data sent from the backend. Therefore, this type of communication must be viewed directly.

SelectNetTab -- in the background, the tool has recorded all page requests:

Figure 7. Use Firebug to view network traffic

The menu bar allows you to filter by request type, while the triangle above the request allows you to see the request and Response Headers and the response itself. The time bar shows whether there are any bottlenecks in the application.

There are many other ways to view the communication between the client and the server, such as the Fiddler2 tool, Wireshark, and Microsoft Network Monitor. The introduction of these tools is beyond the scope of this article, but I hope to have a more detailed introduction in the future.

Test on the actual site

Would it be nice to apply the script to an existing actual site? This type of site is generally owned by others, and we do not have access to the source code of its application. We only want to test new features without affecting other sites. For most people, the Google search results page meets these three conditions and is also the focus of our next example. In a separate browser window, use www.google.com to search and see how to improve the search result.

One of the simplest ways to modify the DOM is to use the Firebug Console and jQuerify Bookmarklet (see references ). JQuery is a small but powerful library that allows DOM access and modification using CSS3 syntax. For more details about jQuery, refer to "Simplify Ajax development with jQuery" (see references.

Bookmarklet allows you to inject jQuery into existing pages, so jQuery's powerful functions can be easily used in the Firebug console. You should try this on your Google results page. Perform jQuer processing on the page, open the Firebug console, enter the following code and execute it (only one line of code !) :

 

$('#sd').append(' > Search at <a href="http://search.yahoo.com/search?p=%27 + encodeURI($('input[@name="q"]').attr('value')) + '">Yahoo</a>');

The search result is similar to figure 8.

Figure 8. Use jQuery to enhance Google

This adds a new link to the search bar, allowing you to perform exactly the same search for Yahoo. Unfortunately, you must run jQuery on the page every time and the Code must be executed manually, which is obviously inconvenient. However, it is easy to develop code that can change the page, and you can also test the code until it works well.

Once the code works well, you can use the Greasemonkey extension to permanently use this small script every time you use Google. Greasemonkey can apply the so-called "User script" to a website or webpage when loading a website or webpage. To add a new script, right-click the Greasemonkey icon in the status bar and selectNew User Script. Enter the name, namespace, and description.IncludesThe list must be changed to match all Google Search results. Figure 9 shows how to add a new Greasemonkey script:

Figure 9. Add a new Greasmonkey script

Open any text editor and enter the user script shown in Listing 1:

Listing 1. Greasemonkey script extension Google

// ==UserScript== // @name Yahoo Search on Google // @namespace google_yahoo // @description Adds a Yahoo link to the Google results page // @include http://www.google.com/search // ==/UserScript== var jq = document.createElement('script'); jq.src = 'http://code.jquery.com/jquery-latest.js'; jq.type = 'text/javascript'; document.getElementsByTagName('head') [0].appendChild(jq); // Wait for jQuery to be loaded (function wait_jq() { if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(wait_jq,100); return; } $ = unsafeWindow.jQuery; $('#sd').append( ' > Search at <a href="http://search.yahoo.com/search?p=' + encodeURI($('input[@name="q"]').attr('value')) + '">Yahoo</a>' ); })();

Save the script. The link is automatically displayed on each Google result page. Many user scripts already exist, allowing you to perform various modifications. Some excellent user scripts can be found on userscripts.org.

Internet Explorer also has a similar extension called IE7Pro. as its name implies, it can only be used in Internet Explorer version 7. However, it provides many features that the browser lacks, such as enhanced tabs, mouse actions, AD interceptors, and "User scripts similar to Greasemonkey ".

With these two extensions, you can apply small code snippets to any website. This is useful for adding the required features to a website that you cannot access its source code. If you want to quickly test (and demonstrate) some new features on your own site without touching the source code, this function is also very helpful. Of course, this is limited to JavaScript-the final way to inject content into the actual site is to use proxy, which is more advanced and beyond the scope of this article.

Conclusion

This article describes how to process Web pages, scripts, and applications. You can see how to use the Web Developer Toolbar to check the page and how to use the Firebug extension to modify the content as needed. You also have a general understanding of how to use breakpoint and object check to easily debug JavaScript and how to permanently modify content to improve your experience.

There is no doubt that each of these tools can be described in the entire article or even a series of articles. However, before learning all the advanced features and functions related to the tool, you are advised to use and familiarize yourself with these tools.

Share this article ......   Submit to Digg Release to del. icio. us Slashdot!

References

Learning

• For more information, see the original article on the developerWorks global site.
• The Web Developer for Firefox extension adds a toolbar with various Web development tools to Firefox, allowing you to check the tag and JavaScript, or even dynamically modify it.
• Firebug is a powerful Firefox extension for JavaScript developers. It can be used to edit, debug, and monitor CSS, HTML, and JavaScript on any web page in real time.
• Internet Explorer Developer Toolbar allows you to monitor DOM in Internet Explorer 7.
• The Greasemonkey for Firefox extension is for Firefox. After loading a page, you can apply custom JavaScript to the page. You can find these custom script repositories at userscripts.org.
• IE7Pro extends Internet Explorer 7 with very useful features and allows you to execute custom scripts after loading pages. You can also find the ieScripts script library for IE7Pro user scripts.
• JQuery is a small JavaScript library that allows you to use the CSS3 selector to access and modify the DOM. DeveloperWorks Articles Using jQuery to simplify Ajax Development (Jesse Skinner, April 2007) is a good introductory article on jQuery and jQuery extensions. JQuery Bookmarklet allows you to perform "jQuery-like" Processing on each page.
• DeveloperWorks Article real-world Web 2.0: Use bookmarklets to create a quick and rough Web application (Uche Ogbuji, August 2007) provides a bookmarklet introduction.
• The developerWorks article briefly introduced Ajax and related technologies in the AJAX series (Chris Laffra, May 2006.
• The Venkman JavaScript Debugger for Firefox is designed to provide a powerful JavaScript debugging environment for Gecko-based browsers.
• Microsoft Script Debugger allows you to debug scripts in Internet explorer. The MSDN IEBlog Article Script Debugging in Internet Explorer roughly describes how to enable Script Debugging in Internet Explorer.
• Need to view the communication in Windows? The Fiddler2 Tool acts as a local proxy and allows you to observe and modify all communications. Wireshark can view all traffic on the Network, while Microsoft Network Monitor can be used to view all traffic on the Network interface.
• Get the resources to enhance your skills in the developerWorks Web development area.

Obtain products and technologies

• Download the IBM product evaluation version and start using application development tools and middleware Products for DB2, Lotus, Rational, Tivoli and WebSphere.

Discussion

• Join developerWorks blogs and join the developerWorks community.

About the author

		Michael cyclerl http://mbaierl.com/Now IBM is the corporate website administrator responsible for maintaining 100 national portal sites and several back-end applications. His focus is on JavaScript integration, standardization, and quality assurance across the entire ibm.com domain. Prior to that, he had consulted the IBM Data Studio Administration Console development team about JavaScript usage. He is a Zend certified engineer and has experience using PHP for various productivity tools and large applications.