Exploring web apps with Fiddler and Chrome Dev Tools

Editor's Notes

• #2: Invite participants to a discussion – questions, comments (don’t wait until the end)
• #3: Learn how stuff works (especially in technology or with a tool used often) Don't settle for "it's magic“ even though we probably all did it at some point It’s just an easy way out – there is ‘no magic’ … it just means that somebody else spent a lot more time thinking about a problem and how to solve it
• #4: Guessing game – what is this?
• #5: Yahoo 1997 – top of the line in web design at that time (Google wasn’t even around) Good old days when web requests were simple html pages with a few images and other static resources Now most traffic is probably JavaScript calls, AJAX (or XHR - XMLHttpRequest), JSON, async and so on Pages with tens/hundreds of external resources and multi-megabyte sizes are not at all uncommon today Much of the content that's transferred today is ad related
• #6: We added many layers of abstraction, UI frameworks but in the end the HTTP protocol at the basis of the WWW is architecturally still the same as it was 20 or so years ago when the web was born HTTP/2 - close to 20% of the top 10 million Alexa sites are now using HTTP/2 (most major players do - Google, Facebook, Twitter and so on) HTTP/2 demo in a later slide
• #7: Understand that typically displaying a 'page' in the browser requires many small & separate requests/responses Latency and not bandwidth is the problem today (most HTTP traffic is in "short bursts") Speed of light limitation – how fast can a server respond Comparison to highway - number of lanes is bandwidth, speed limit is latency ... how to increase the number of cars that go through Most browsers limit number of parallel connections per domain under http 1.1 (Chrome has a limit of 6)
• #8: GET / POST most popular for a long time The other HTTP methods started gaining traction with the rise of RESTful Web APIs
• #9: Talk about some sample codes 200 – OK 301, 302 for redirect 404 – not found 500 – server error (much pain)
• #11: Nice to hackers (we return info we really shouldn’t – Server, X-Powered-By) Security conscious sites will remove those response headers from their server signatures
• #12: UI developer - quickly edit code and see effects real-time short feedback loop - skip the change & deploy cycle use Chrome as full IDE Site performance best practices - make sure those rules are followed Inspect traffic / calls to make sure the UI layer behaves as expected Why am I doing this presentation? I'm not a UI person Trying to get best performance out of backend infrastructure (databases, web servers, network infrastructure) Needed to understand why the application (UI layer usually) was sending traffic the way it was Keep browser dev tools or proxy open and monitor web calls made to make sure observed behavior is as expected
• #13: See who’s NOT using Chrome as their main browser See if everybody is on the same version of Chrome - 60.0.3112.90 as of 8/15/17 (major updates every 6 weeks or so) All major browsers have similar developer tools - we're focusing on Chrome's version since it's the most popular browser at the moment
• #16: Show how it can be docked in various ways Settings (press F1) -> Shortcuts Command Menu (Ctrl + Shift + P on Windows or Cmd + Shift + P on Mac) - easy way to find and interact with various settings Show how to easily change the theme
• #17: Demo - edit a web page real-time – edit text, button color Very easy to create screenshots with fake data from Facebook, Twitter and so on Demo – JavaScript debugging https://googlechrome.github.io/devtools-samples/debug-js/get-started event listener for mouse click - show how to step through code, watch variables before going to the network tab - audience exercise Demo - how to track down an instance of mixed content https://www.bennish.net/mixed-content.html
• #18: disable cache (while tools are open), network throttling, preserve log, additional columns to add to display grid press Shift while hovering over a request to see who called it and who it called filtering - type '-' to see the filtering options (such as larger-than, domain, status-code) ... when it starts with '-' it's the negative of that criteria how to record with screenshots (screenshots only show the viewable area as seen when dev tools is open - might want to open dev tools in a separate window) https://googlechrome.github.io/devtools-samples/network/gs/v1.html Enable throttling - Large image, delay in js file (based on DOM display time) discuss why mixed content is a problem and why it's blocked (look at cookie data when static resources are requested - could be intercepted over http) HTTP/2 demo - https://http2.golang.org/gophertiles Latency vs. bandwidth use multiple tabs for 1.1 vs. 2 and show waterfall timeline and how requests are in blocks of 6
• #19: headers are actually modified in requests dev tools menu (upper right) -> More Tools -> Sensors (for changing geolocation, orientation and such when working with mobile device view)
• #20: map local site resources to what the browser sees in order to do real-time development (use Chrome as a complete IDE) how to pretty format text when looking at minified sources ({} button)
• #23: shows web performance tips based on well-known best practices as of Chrome version 60 it's using the Lighthouse project (test for Progressive Web Apps, only tests for Nexus 5s with a certain throttling emulation) better than previous versions (more in-depth) but must offer better ways to configure / select the profiles used when testing https://www.webpagetest.org/ is probably a much better starting point if you're trying to understand web app performance and best practices must have access to site being tested (for public sites) also offered as a software package for use on private servers (for private sites)
• #24: records detailed data from the client side tracks how interacting with a particular site affects local memory, request timing and so on
• #25: Ask how many people heard of (or used) the tool
• #27: History – Eric Lawrence (author) started it as in-house tool at Microsoft around 2002 to help the Microsoft Clipart team developer moved to Telerik and they own it now it can also generate and modify traffic in addition to observing traffic that passes through
• #28: Explain that Fiddler automatically modifies the overall proxy system values on application start/stop Start the app and show the various areas – capture a session and look at the data present
• #29: It used to be the go-to debugging tool for web traffic analysis but browser developer tools are getting better all the time Browser dev tools enough for maybe 80% of the issues – for the remaining 20% use Fiddler for additional options & customization Single tool to intercept and analyze traffic that can be used across multiple browsers and external devices It can modify requests on the fly and reissue captured requests With FiddlerCap it offers the ability to easily share web sessions with customers demo FiddlerCap
• #30: Demo - intercept traffic from my phone (must be on same wireless network – IP address and port 8888) open the CNET news app or USA Today (look at json return data with news articles) Demo - resend a request with composer https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html Demo - use auto responder to create a rule that does something when a particular request is made (return 404 status code for example) Demo - image bloat rule to see how much metadata exists in images Demo - explore image quality optimization sort responses by size, look at ImageView Inspector, right-click on image Tools -> Explore Quality
• #31: show how a site's certificate differs when traffic goes through Fiddler
• #33: Stay curious and explore Learn the tools you work with often so you can be more efficient
• #34: Any questions?