Introduction

During the software development process, it is expected that unintentional bugs will be introduced in your code. To save time while troubleshooting, you can use debugging tools which will allow you to step through code line-by-line, examining the behavior and the values of your variables. In this video we will examine the support for debugging in Dreamweaver 8 and Visual Studio 2005.

Dreamweaver Section

Dreamweaver 8 does not have support for debugging server-side code, so troubleshooting pages that include complex logic can be challenging.

Visual Studio 2005 Section

Visual Studio 2005 allows for a rich debugging environment for several technologies, including JavaScript and server-side code for ASP.NET, which can be written in any .NET language, such as Visual Basic or C#. In these examples we will look at both server-side and client side breakpoints, and step through code line-by-line. We’ll also show how you can edit your code while debugging, as well as inspect the values of all variables and objects surrounding the code you are debugging.

To start, here is a page that brings up a run-time error "The Connection String Property has not been initialized". The intent with this code is to reference a database and display information in a GridView control. To help find the problem, we can set a breakpoint at the start of this method, and run the page again. By stepping through the code, the values of variables can be analyzed in the Locals Panel, where the variable values can be inspected and changed. This statement uses a DataAdapter to populate a DataSet with information from the Customers table.

At this point it appears that the connection string to connect to the database server has not been configured properly. This is easy to fix. We can then add a connection string variable that gets a connections string from the ASP.NET Web.config file, and run the page again. Another nice feature of the debugging environment in Visual Studio 2005 is visualizers, which can offer a customized look at data. After running the statement to populate the DataSet, by hovering the mouse over the name "myDataSet" in the code, we see its value, and the ability to drill down into all of its properties. We can see that there is a Table, but its hard to examine the actual data from this view. By using the magnifying glass icon, this references the "DataTable visualizer". In this case we see the contents of the DataSet during this debugging session, before it is presented in the DataGrid. Visual Studio comes with visualizers for HTML and XML, and you can write custom visualizers for any kind of data you want to see while debugging.

To let the remainder of the page run use the "Continue" option under the "Debug" menu, or just press F5.

Visual Studio also allows you to debug client side JavaScript. Here is a page with a simple image switch routine. If we run the page. We can see that simply clicking the image will change the image from left to right, and back again. This is done with client side JavaScript code. If we highlight the JavaScript method that we want to debug we can then add this method to a new breakpoint form the debug menu, when we click add new breakpoint. Make sure the language is set to script and click OK. Now, if we set this as our start page and run our application, when the image is clicked, Visual Studio will break on the JavaScript function on line one. At this point, we can step through the code line-by-line and watch the code execute. We can also inspect the variables to see what values they contain as well as change the values if we need to.

Debugging in Visual Studio 2005 is a tremendous feature that will help you easily find and correct mistakes both in your client side JavaScript code, as well as your server-side ASP.NET code.

Conclusion

This concludes our comparison of Dreamweaver 8 and Visual Studio 2005 debugging features.