https://app.pluralsight.com/library/courses/fiddler-chrome-developer-tools-debugging-website/table-of-contents

Introduction To Fiddler

HTTP

• v1.1, v2
• request/response paradigm, messages consist of header and body

What is Fiddler? - telerik fiddler

• Tracing tool specifically for HTTP(S)
• requesting a webpage will consist of request multiple resources
• save session of working website to compare to session when website is broken

How Does Fiddler Work?

• automatically - configures Windows proxy so that browsers route their requests to servers through Fiddler
• manually - configure older browsers or other applications to route their request through Fiddler to be traced

Chrome DevTools

• chrome://flags/ - enable experiments (experimental features)
• Canary version - for developers and early adopters (will run side-by-side with Chrome)
• view http requests/responses in 'Network' tab (can save session as HAR and open in Fiddler)

It Works on My Machine

• works on dev machine, but not in QA or Production
• e.g. view resources retrieved for a web page request and identity any with a 404 response

Diagnosing and Resolving JavaScript Issues

Techniques

• Chrome DevTools - debugger statement, pretty print, blackbox scripts (e.g. third-pary libraries)

• Fiddler - make javascript pretty

• use debugger; to make the debugger pause on this statement anywhere in the code

• use source map to keep a mapping between original code and the minified version of the js script

• enable/disable display of variable values while debugging (in Settings)

• right-click source code and select 'Blackbox script' (blackboxed scripts are listed in Settings | Blackboxing)

• execute javascript statements in console to check statements produce expected results

• Fiddler | Rules | Make Javascript Pretty (Fiddler will intercept files and prettify them which can be viewed in Chrome Debugger) - requires 'JavaScript Formatter' Fiddler add-on

Console Object

• log(), info(), warn(), error() - output to console

• timeStamp()

• assert() - displays a message only if assert is not true

• dir() - pass object to display

• trace() - current stack trace

• group("A"), log(), log(), groupEnd("A") - groups logs

• time("Stuff"), timeEnd("Stuff") - logs time taken

Diagnosing And Resolving CSS Issues