Click the image to enlarge.
The script debugger is a little bit more complex. First, switch to the Script tab, then click the Start Debugging button. You may need to refresh the screen to have it connect to all of the items on the page. You can click the left "gutter" next to a line of code to set a breakpoint (or right click it) on it. There is a dropdown that lets you select which script to look at specifically. Since it can often be tough to remember which script has what in it, the Search Script box works well to help you locate the code you're trying to find. The Console main tab (or sub-tab of Script) lets you keep an eye on errors and warnings as they occur.
The CSS tab is straightforward. Like the Script tab, you select which CSS file you want to inspect from a dropdown. There isn't anything here that you can't do on the HTML tab, but you can see what happens when you modify the CSS within certain files and not just the resultant style.
The Network tab acts a lot like a less-full-featured version of Fiddler. There is a simple button to toggle whether it is on or not. I feel that this feature is pretty weak, and that Fiddler is a better choice all around.
If you've used Firebug or other similar options, you will be comfortable using the F12 Developer Tools too. Also, it is good to do these things within Internet Explorer to see why it is working differently from other browsers.
Justin James is an OutSystems MVP, architect, and developer with expertise in SaaS applications and enterprise applications.