Debugging Your Website with Fiddler and Chrome DevTools

Course Overview
Hi everyone. My name is Robert Boedigheimer, and welcome to my course, Debugging Your Website with Fiddler and Chrome DevTools. I'm a Principal Systems Developer at Schwans Shared Services, LLC. No one is perfect, so you'll eventually need to be able to debug problems with your website. This course is an introduction to debugging techniques using both Fiddler and Chrome DevTools. Some of the major topics we'll cover include JavaScript debugging, CSS debugging, identifying performance problems, and modifying requests and responses. By the end of this course, you'll know how to identify problems with your website and techniques to address them. Before beginning the course, you should be familiar with web development. I hope you'll join me on this journey to learn debugging with the Debugging Your Website with Fiddler and Chrome DevTools course, at Pluralsight.

Introduction to Fiddler
Hello. This is Robert Boedigheimer. Welcome to this course on Debugging Your Website with Fiddler and Chrome DevTools. In this first module, we're going to look at an introduction to Fiddler.

Diagnosing and Resolving JavaScript Issues
In this module, we're going to focus on Diagnosing and Resolving JavaScript Issues. We're going to look at how to use the debugger statement, how to deal with minified JavaScript files, how to avoid stepping into particular third-party libraries while debugging, and also how to use the console object for more effective debugging.

Diagnosing and Resolving CSS Issues
In this module, we're going to look at Diagnosing and Resolving CSS Issues. So it's very common on large web pages or websites to have a lot of various CSS files, and it's often hard to understand when you look at the page exactly which rules were in play with cascading and specificity and other issues that can impact how your CSS looks. We're going to see how to troubleshoot those issues using Chrome DevTools.

Diagnosing and Resolving Performance Issues
In this module, we're going to look at Diagnosing and Resolving Performance Issues. Our first step is going to be to understand basic performance rules. The first is make fewer HTTP requests. We'll talk a little later about why this might be less important if you're using HTTP/2, but in general, for a web page, we don't want to make requests that we don't need to make. Next is send as little as possible. Then, send it as infrequently as possible. And lastly, we really want to avoid latency, which is the amount of time it takes from the browser to talk to the server and get a response.

Determining Website Behavior and Potential Issues
In this module, we're going to look at Determining Website Behavior and Potential Issues by using both Fiddler and Chrome DevTools to modify or slow down or otherwise change something between the browser and the server to see what kind of impact that might have on the rendering of the page or how it actually behaves.

Solving Real World Problems
In this module, we're going to look at Solving Real World Problems, things like who made a given request. So when we look at a page, we see a resource that's requested. We're not sure who made that request. Things like who modified a portion of the page. We're also going to look at how you decrypt HTTPS traffic. So just a lot of different things that come up day to day working with your website. How do you use both Fiddler and Chrome DevTools to help you determine what's going on and what's wrong?