Presentation is loading. Please wait.

Presentation is loading. Please wait.

Debugging Your Website with Fiddler and Chrome Developer Tools

Published byShon Hart Modified over 5 years ago

Similar presentations

Presentation on theme: "Debugging Your Website with Fiddler and Chrome Developer Tools"— Presentation transcript:

1 Debugging Your Website with Fiddler and Chrome Developer Tools
Robert Boedigheimer Principal Systems Developer Schwan's Shared Services, LLC

2 About Me Web developer since 1995 Pluralsight Author
3rd Degree Black Belt, Tae Kwon Do ASP.NET MVP @boedie weblogs.asp.net/boedie

3 HTTP HyperText Transfer Protocol Request/response paradigm*
Header and body

4 HTTP Request GET 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/ Safari/ 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

5 HTTP Response HTTP/ OK Content-Type: text/html Last-Modified: Thu, 25 Sep :36:00 GMT Accept-Ranges: bytes ETag: "61b5a2510d9cf1:0" Server: Microsoft-IIS/8.0 X-Powered-By: ASP.NET Date: Mon, 28 Aug :34:20 GMT Content-Length: 207 <!DOCTYPE html>

6 What is Fiddler? Tracing tool built specifically for HTTP
Eric Lawrence Acquired by Telerik in 2012 (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

7 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)

8 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…

9 Site Failure HTTP response status codes JavaScript errors Style issues
Performance concerns Mixed content warning Compare a success and a failure!

10 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

11 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

12 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

13 Resources Pluralsight Course – Fiddler
“Debugging with Fiddler: The complete reference from the creator of the Fiddler Web Debugger” 2nd Edition (

14 Questions @boedie weblogs.asp.net/boedie

Download ppt "Debugging Your Website with Fiddler and Chrome Developer Tools"

Similar presentations

Fred P. Baker CCIE, CCIP(security), CCSA, MCSE+I, MCSE(2000)

Fred P. Baker CCIE, CCIP(security), CCSA, MCSE+I, MCSE(2000)
Improving Web Site Performance and Scalability While Saving Money Robert Boedigheimer ∙ Web Application

Improving Web Site Performance and Scalability While Saving Money Robert Boedigheimer ∙ Web Application
PHP syntax basics. Personal Home Page This is a Hypertext processor It works on the server side It demands a Web-server to be installed.

PHP syntax basics. Personal Home Page This is a Hypertext processor It works on the server side It demands a Web-server to be installed.
How the web works: HTTP and CGI explained

How the web works: HTTP and CGI explained
The World Wide Web and the Internet Dr Jim Briggs 1WUCM1.

The World Wide Web and the Internet Dr Jim Briggs 1WUCM1.
Web, HTTP and Web Caching

Web, HTTP and Web Caching
2/9/2004 Web and HTTP February 9, 2004. 2/9/2004 Assignments Due – Reading and Warmup Work on Message of the Day.

2/9/2004 Web and HTTP February 9, /9/2004 Assignments Due – Reading and Warmup Work on Message of the Day.
WEB DESIGN SOME FOUNDATIONS. SO WHAT IS THIS INTERNET.

WEB DESIGN SOME FOUNDATIONS. SO WHAT IS THIS INTERNET.
Web Servers Web server software is a product that works with the operating system The server computer can run more than one software product such as e-mail.

Web Servers Web server software is a product that works with the operating system The server computer can run more than one software product such as .
CP476 Internet Computing Lecture 5 : HTTP, WWW and URL 1 Lecture 5. WWW, HTTP and URL Objective: to review the concepts of WWW to understand how HTTP works.

CP476 Internet Computing Lecture 5 : HTTP, WWW and URL 1 Lecture 5. WWW, HTTP and URL Objective: to review the concepts of WWW to understand how HTTP works.
Rensselaer Polytechnic Institute Shivkumar Kalvanaraman, Biplab Sikdar 1 The Web: the http protocol http: hypertext transfer protocol Web’s application.

Rensselaer Polytechnic Institute Shivkumar Kalvanaraman, Biplab Sikdar 1 The Web: the http protocol http: hypertext transfer protocol Web’s application.
WWW, HTTP, GET, POST, Cookies Svetlin Nakov Telerik Corporation

WWW, HTTP, GET, POST, Cookies Svetlin Nakov Telerik Corporation
Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.

Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.
CIS679: Lecture 13 r Review of Last Lecture r More on HTTP.

CIS679: Lecture 13 r Review of Last Lecture r More on HTTP.
HTTP Here, we examine the hypertext transfer protocol (http) – originally introduced around 1990 but not standardized until 1997 (version 1.0) – protocol.

HTTP Here, we examine the hypertext transfer protocol (http) – originally introduced around 1990 but not standardized until 1997 (version 1.0) – protocol.
Week 11: Application Layer 1 Web and HTTP r Web page consists of objects r Object can be HTML file, JPEG image, Java applet, audio file,… r Web page consists.

Week 11: Application Layer 1 Web and HTTP r Web page consists of objects r Object can be HTML file, JPEG image, Java applet, audio file,… r Web page consists.
Simple Web Services. Internet Basics The Internet is based on a communication protocol named TCP (Transmission Control Protocol) TCP allows programs running.

Simple Web Services. Internet Basics The Internet is based on a communication protocol named TCP (Transmission Control Protocol) TCP allows programs running.
Fiddler and Your Website Robert Boedigheimer. About Me Web developer since 1995 Columnist for aspalliance.com Pluralsight Author 3 rd Degree Black Belt,

Fiddler and Your Website Robert Boedigheimer. About Me Web developer since 1995 Columnist for aspalliance.com Pluralsight Author 3 rd Degree Black Belt,
Lecture # 1 By: Aftab Alam Department Of Computer Science University Of Peshawar Internet Programming.

Lecture # 1 By: Aftab Alam Department Of Computer Science University Of Peshawar Internet Programming.
What’s Really Happening

What’s Really Happening

Similar presentations

Ads by Google