Debugging Your Website with Fiddler and Chrome DevTools

Do your websites always work perfectly? Mine don’t either, which is why this course will help you debug problems using Fiddler and Chrome DevTools -- you'll learn about issues with JavaScript, CSS, performance, and HTTPS.
Course info
Rating
(43)
Level
Intermediate
Updated
Sep 26, 2018
Duration
2h 12m
Table of contents
Description
Course info
Rating
(43)
Level
Intermediate
Updated
Sep 26, 2018
Duration
2h 12m
Description

Websites don't always work as expected. In this course, Debugging Your Website with Fiddler and Chrome DevTools, you will learn foundational knowledge necessary to debug website problems. First, you will learn diagnostic techniques. Next, you will discover how to modify requests and responses. Finally, you will explore how to decrypt HTTPS. When you’re finished with this course, you will have the skills and knowledge of Fiddler and Chrome DevTools needed to debug your website issues.

About the author
About the author

Robert is a Microsoft MVP, a Progress Developer Expert (Fiddler), and a 3rd degree black belt in Tae Kwon Do. He regularly speaks at national and international events.

More from the author
Responsive Web Images
Beginner
1h 55m
Jun 27, 2016
Useful jQuery Plugins
Intermediate
3h 6m
Jan 17, 2014
More courses by Robert Boedigheimer
Section Introduction Transcripts
Section Introduction Transcripts

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?