Developer Features

If you are a designer, developer or engineer who builds web pages or the software that supports them then you are probably used to spending lots of time manually browsing your pages to test and debug your work. If this is you, read on to find out more about some of the great features that Badboy offers specifically for developers!

• Editing Source Files Directly from Badboy
• Editing Source Files for Requests in your Script
• Monitoring Source Files
• Monitoring Steps
• Capturing Log Files
• DOM View
• Syntax Highlighting JavaScript Editor with Auto-Complete
• Javascript Logging

Editing Source Files Directly From Badboy

Most web sites are based on source documents that are used to generate content for rendering back to the browser. In the simplest case these are static HTML files. For more dynamic web sites, PHP, JSP, or ASP files may be used. The normal workflow of a person building such a site is:

• browse until the page to modify is found
• look at the URL in the browser, try to work out what the source file would be. This might involve viewing the page source if it contains frames.
• Go to the source folder and search for the file in there.
• Open the file in an editor and make the change

It doesn't take much time, but it certainly adds up when done over and over - wouldn't it be nice if you could just hit a key from your browser and it would find the right source file for you and open it in your preferred editor? This is what Badboy does for you!

To use this feature:

• Browse using Badboy to a page you would like to edit.
• Click in the browser on the content you want to edit (this sets the focus in the right place helps Badboy know what frame you want to edit)
• Press Ctrl-J or choose Tools=>Locate Current Page Source

Badboy will search for the file and open it in your editor!

The first time you use this feature Badboy will ask you to configure the source location for your web pages in the Preferences=>Developer Settings tab. This determines where Badboy will search for your source files. At this point you can also specify your favorite editor (otherwise Badboy will just use Notepad). If you want Badboy to search in multiple locations you can enter them as absolute paths into the source location field separated by semicolons.

Editing Source Files for Requests

It is also easy to edit the source file for any request that you have recorded in your Script - just right click and choose "Source=>Locate Source"

If Badboy can't find your source file it will prompt you to let you manually find the source file. You can choose any file you like. Badboy will remember this source file and save it with your script so that you don't need to manually locate it again.

Monitoring Source Files

Wouldn't it be nice if when you saved your file in your editor your browser could automatically load the new one - or even execute a whole sequence of actions to test out the new page?

Badboy can do this with its Monitoring features!

Activating Source Monitoring is easy: any request or Step in your Script can automatically play when one of it's source files is monitored. The fastest way is just browse to a page you want to edit and press "Ctrl+Shift+J" - this will cause Badboy to edit the source file for the current frame and also add a monitored request to your script so that it updates the frame whenever you change the source! You can activate monitoring for any existing request in your script: just right click in the script and select "Source=>Monitor". Badboy will watch the source file for the request and play it automatically any time the source file changes. This means you can work continuously in your editor, changing the file and watching it update in Badboy without ever having to switch between programs.

Badboy can monitor sub requests as well as top level requests! If you are working on a frame or iframe that belongs to a larger page, just select the corresponding subrequest and start monitoring it: Badboy will reload only that sub request in its correct frame each time you change the source.

Monitoring Steps

Sometimes things are more complicated than just reloading one page. For example, perhaps when you save your file you'd like a whole test to run, to make sure the whole scenario you are modifying on still works. For this situation, you can use Step Monitoring.

Step Monitoring works in a very similar way to Request Monitoring, however instead of monitoring a single source file, it monitors all the source files for the Requests contained in the Step. In addition to this, you can manually specify additional dependencies yourself - so for example, you can add any files that might affect the pages you are working on including images, Java Script files or CSS stylesheets

When you activate monitoring for a Step it will cause the whole Step to play if any of the dependencies of the Step are modified. This means you can write a whole test with Assertions, JScript or other items to perform complex navigations and re-validate your site automatically each time a dependency changes!

Capturing Your Log File

Most web servers and application servers write a log file that is very useful for diagnosing problems when your pages are not operating correctly. Badboy makes it easy to see your log file at any time: just configure the location of your log file under Preferences=>Developer Settings, and then hit "Ctrl-L" to see the most recent lines added to your log file at any time!

Once you configure your server log file, you can also see the latest entries in it any time by opening DOM View (Ctrl-D) and selecting the "Server Log" tab. This can be a great way to grab any errors that may have been reported there to include in bug reports or other tracking mechanisms that you may have.

Badboy does more than just show your log file: because it is observing the actions of browser it is able to know which browsing actions cause which lines to appear in the log file. Hence, when you press "Ctrl-L", Badboy is smart enough to show you only the log lines that were caused by your last navigation in the browser!

For more information about Badboy's support for log files, read the separate topic, Server Log File Integration.

DOM View

Understanding complex pages can be a nightmare without some kind of guide to their structure. To help with this, Badboy offers a convenient DOM View feature:

• To activate DOM View just hit "Ctrl-D" in any Badboy browser window

The DOM View shows you a complete overview of all the elements in the page and lets you easily filter them, manipulate them and display them on the page. You can just select an element in the DOM View to see it highlighted on the page with a border.

DOM View provides another handy feature: a continuous display of mouse coordinates while you hover your mouse over the browser. By pressing and holding down the "Shift" key you can make the display use coordinates relative to any position on the page. This feature is great for developers get placement of elements correct without wasting time with trial error positioning.

Syntax Highlighting JavaScript Editor with Auto-Complete

Creating JavaScript either for your web page or for your Badboy Tests is much easier when you can edit it in context with a real editor. Badboy offers the unique ability to let you edit JavaScript in the context of the browser right where it will run for real. Badboy even offers a great Syntax Highlighting editor to help you understand the functions you are writing better and an auto-complete function (just hit Ctrl-Space). Since the auto-complete runs in real time on the page as it actually exists in your browser it can see dynamic properties that no normal editor can show you!

JavaScript Logging

With applications becoming increasingly driven by client side scripting, its getting harder and harder to know what is going on inside them. To help with this, Badboy now gives you an additional tool in the form of JavaScript logging. The code below shows how you can add logging so that in a normal browser it has no effect but in Badboy you can read your statements from the Badboy log file:

    /**
     * An example of how to put logging into your web pages so that
     * it appears in the Badboy log when run inside Badboy.
     */
    var enableLog = true;
    function log(msg) {
      try {
        if(enableLog) {
          window.external.info(msg);
        }
      }
      catch(er) {
        enableLog=false;
      }
    }

    function myTestFunction() {
      log("This is a log message for Badboy!");
    }