Debugging Your Website with Fiddler and Chrome Developer Tools Robert Boedigheimer Principal Systems Developer Schwan's Shared Services, LLC
About Me Web developer since 1995 Pluralsight Author 3rd Degree Black Belt, Tae Kwon Do ASP.NET MVP boedie@outlook.com @boedie weblogs.asp.net/boedie
HTTP HyperText Transfer Protocol Request/response paradigm* Header and body
HTTP Request GET http://itdevconnections.com/dc17/ HTTP/1.1 Host: itdevconnections.com Connection: keep-alive Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) … Chrome/60.0.3112.101 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.8
HTTP Response HTTP/1.1 200 OK Content-Type: text/html Last-Modified: Thu, 25 Sep 2014 20:36:00 GMT Accept-Ranges: bytes ETag: "61b5a2510d9cf1:0" Server: Microsoft-IIS/8.0 X-Powered-By: ASP.NET Date: Mon, 28 Aug 2017 01:34:20 GMT Content-Length: 207 <!DOCTYPE html>
What is Fiddler? Tracing tool built specifically for HTTP Eric Lawrence (@ericlaw) Acquired by Telerik in 2012 http://fiddler2.com (free) C# HTTP HTTP is protocol used by the web Ignores other types of traffic (simplifies review, easier to see problems) Complete request and response Don’t need to “assemble” a request and a response like would need to do in Network Monitor/WireShark A few instances where care about packets (compression, etc), generally can look at size for that Requirements Fiddler 2 requires .NET v2.0+, Fiddler 4 requires .NET v4.0+ A beta for Mono and beta for OS X
How Does Fiddler Work? Proxy Adjusts system’s proxy configuration to intercept traffic Medium to large companies have these to allow access to the Internet Fiddler remembers the original proxy settings so it can send traffic onward (chain)
Chrome Developer Tools F12 or Ctrl-Shift-I (Windows), Cmd-Opt-I (Mac) Experiments chrome://flags/ Developer Tools experiments Canary Developers and early adopters Run side by side with Chrome Real life use dev tools in all various browsers because typical that only one has the problem…
Site Failure HTTP response status codes JavaScript errors Style issues Performance concerns Mixed content warning Compare a success and a failure!
Who’s Doing That? Who requested that? Who modified that? A configuration change can be made to Internet Explorer to indicate, via the X-Download-Initiator request header, why each request was issued
What if? Request was different Blocked something Slower connection or response Another user agent First request Simulate lat/long or orientation A configuration change can be made to Internet Explorer to indicate, via the X-Download-Initiator request header, why each request was issued
Miscellaneous Other platforms/devices Backend APIs HTTPS Someone else’s computer Render on different devices Non-optimized images Saving and sharing traces Filmstrip Setup as “Reverse Proxy” on devices where can’t set a proxy easily
Resources Pluralsight Course – Fiddler https://www.pluralsight.com/courses/fiddler “Debugging with Fiddler: The complete reference from the creator of the Fiddler Web Debugger” 2nd Edition (http://tinyurl.com/zavnkhs) https://developer.chrome.com/devtools
Questions boedie@outlook.com @boedie weblogs.asp.net/boedie