Sometimes having access to the Visual Studio IDE is not possible for debugging JavaScript in a web application.
One scenario could be that an issue is only presenting itself on a client machine and you're unable to reproduce the steps locally. Perhaps your JavaScript code is being dynamically generated preventing you from setting a breakpoint in your source JavaScript.
In the cases where the Visual Studio IDE is not an option for the debugging of JavaScript, being able to debug the JavaScript code directly in the browser is very helpful.
Internet Explorer 6 and 7 had access to an add-on toolbar known as the 'Internet Explorer Developer Toolbar.' The add-on toolbar allowed one to view HTML markup, CSS, inspect the DOM, and more.
As of Internet Explorer 8, the add-on toolbar's functionality is now built right into the browser and is now known as the 'Internet Explorer Developer Tools.'
To access the Developer Tools you can either click on the 'Tools, Developer Tools' menu item or you can press F12.
The F12 key is important to know when you need to inspect a pop-up window that does not have a menu bar.
For the purpose of this discussion we're only going to focus on the JavaScript debugging aspect of the Developer Tools but I recommend looking into the other features that are available because they can prove to be useful in your day-to-day web development efforts.
When you first launch the developer tools you will see a window displayed similar to this:
(click to view the image full size)
Since we wish to do JavaScript debugging, we need to switch to the Script tab:
(click to view the image full size)
By default, the information displayed is the markup of the page itself.
If you are following best practices for web development your JavaScript code should be located in a separate file.
To the right of the 'Start Debugging' button is a drop-down that lists all JavaScript files that are currently loaded. Select the JavaScript file, from the list, that contains the code you wish to debug.
(click to view the image full size)
Modern JavaScript files are no longer just a few lines and having the ability to search for a specific item in a file is very important. After a bit of searching, I realized the answer was right before my eyes. You will find a search box on the tab bar at the far right:
(click to view the image full size)
Once you find the code that you wish to debug you can set a breakpoint by clicking in the margin. You can also set the breakpoint by placing the cursor on a specific line and then pressing F9 or by right-clicking on a line and selecting the 'Insert Breakpoint' context menu item.
(click to view the image full size)
Now that you have the breakpoint set, you need to tell the Developer Tools that you wish to start debugging. You do this by clicking on the 'Start Debugging' button on the toolbar.
Once you start debugging, the next time your breakpoint is hit, the developer tools will bring you to that point allowing you to inspect variables and step through the code.
The toolbar contains some buttons to help with the stepping into, over, and out of code. You can also use keyboard shortcuts rather than the toolbar buttons (Step Into is F11, Step Over is F10, and Step Out is Shift + F11).
(click to view the image full size)
In order to view the contents of a value you can either switch to the Locals window or you can add the object to the Watch window.
You can switch to the Locals or Watch window by clicking desired button on the right-hand pane's toolbar
(click to view the image full size)
With the Watch window you can either click into the grid to add a new item by typing in the object's name or you can right-click an object in the JavaScript code and choose 'Add Watch' from the context menu.
(click to view the image full size)
You can tweak the values contained in the Watch window by double-clicking in the Value column as shown in the following screen shot:
(click to view the image full size)
And there you have it. Debugging JavaScript using Internet Explorer 8's built-in Developer Tools.
One scenario could be that an issue is only presenting itself on a client machine and you're unable to reproduce the steps locally. Perhaps your JavaScript code is being dynamically generated preventing you from setting a breakpoint in your source JavaScript.
In the cases where the Visual Studio IDE is not an option for the debugging of JavaScript, being able to debug the JavaScript code directly in the browser is very helpful.
Internet Explorer 8 - Developer Tools
Internet Explorer 6 and 7 had access to an add-on toolbar known as the 'Internet Explorer Developer Toolbar.' The add-on toolbar allowed one to view HTML markup, CSS, inspect the DOM, and more.
As of Internet Explorer 8, the add-on toolbar's functionality is now built right into the browser and is now known as the 'Internet Explorer Developer Tools.'
To access the Developer Tools you can either click on the 'Tools, Developer Tools' menu item or you can press F12.
The F12 key is important to know when you need to inspect a pop-up window that does not have a menu bar.
For the purpose of this discussion we're only going to focus on the JavaScript debugging aspect of the Developer Tools but I recommend looking into the other features that are available because they can prove to be useful in your day-to-day web development efforts.
When you first launch the developer tools you will see a window displayed similar to this:
(click to view the image full size)
Since we wish to do JavaScript debugging, we need to switch to the Script tab:
(click to view the image full size)
By default, the information displayed is the markup of the page itself.
If you are following best practices for web development your JavaScript code should be located in a separate file.
To the right of the 'Start Debugging' button is a drop-down that lists all JavaScript files that are currently loaded. Select the JavaScript file, from the list, that contains the code you wish to debug.
(click to view the image full size)
Modern JavaScript files are no longer just a few lines and having the ability to search for a specific item in a file is very important. After a bit of searching, I realized the answer was right before my eyes. You will find a search box on the tab bar at the far right:
(click to view the image full size)
Once you find the code that you wish to debug you can set a breakpoint by clicking in the margin. You can also set the breakpoint by placing the cursor on a specific line and then pressing F9 or by right-clicking on a line and selecting the 'Insert Breakpoint' context menu item.
(click to view the image full size)
Now that you have the breakpoint set, you need to tell the Developer Tools that you wish to start debugging. You do this by clicking on the 'Start Debugging' button on the toolbar.
Once you start debugging, the next time your breakpoint is hit, the developer tools will bring you to that point allowing you to inspect variables and step through the code.
The toolbar contains some buttons to help with the stepping into, over, and out of code. You can also use keyboard shortcuts rather than the toolbar buttons (Step Into is F11, Step Over is F10, and Step Out is Shift + F11).
(click to view the image full size)
In order to view the contents of a value you can either switch to the Locals window or you can add the object to the Watch window.
You can switch to the Locals or Watch window by clicking desired button on the right-hand pane's toolbar
(click to view the image full size)
With the Watch window you can either click into the grid to add a new item by typing in the object's name or you can right-click an object in the JavaScript code and choose 'Add Watch' from the context menu.
(click to view the image full size)
You can tweak the values contained in the Watch window by double-clicking in the Value column as shown in the following screen shot:
(click to view the image full size)
And there you have it. Debugging JavaScript using Internet Explorer 8's built-in Developer Tools.
No comments:
Post a Comment