Debugging your website with Fiddler and Chrome Developer tools - Robert Boedigheimer

all right I think we'll get bugging your website with fiddler and chrome developer tools a little bit about myself so I've been a web developer since 1995 I work full-time for an e-commerce site and then I do conference speaking and Pluralsight videos as well got my email my Twitter and my blog information up there so if you need to get a hold of me at some point you can reach out via those so we'll dive right in we're going to talk about HTTP today so HTTP is the hypertext Transfer Protocol I gave you the two lengths to the two current versions HTTP 1.1 HTTP 2 as we're going to focus on when we're looking at our web troubleshooting it's a request and response paradigm I put an asterisk after that there is a feature in HTTP 2 called server push that would be the first time that servers are actually initiating connections to clients but in general the client will make a request the server is going to respond each one of the requests and responses is going to have a header with just meta information about that request or response along with the body that has the actual content so I do a lot of mentoring for new web developers and so I like to show them what an actual get request looks like in case they haven't seen one on the wire I think it helps answer questions they might have about you know do I know client resolution do I know how many colors the client supports no I mean this is all that gets sent up from a client to a server as far as when the server is going to make decisions this is all that's going to see so typical requests will have a get so I'm just i want to retrieve something from this URL in this case decline is specifying it wants to use HTTP 1.1 these are the other headers that get transmitted along and we'll look at these as we go but except language is just saying this is the language I have my browser configured for so if you happen to have a multilingual website that's how the server knows what language to respond with will see the user agents as we go through some stuff everybody lines right they have all sorts of things in there that they really aren't but just to advertise usually there's one thing you can key into to tell you what that specific browser is I don't personally do a lot of browsers and on servers but if you need to take advantage of that for some reason we'll talk about encoding later and we can get into performance that just says the client supports compression and the host header lets the server know which of the particular sites it needs to route to so if you're using iis like I am the host header lets me use a single IP address for all the sites that I have it actually sees that host header in the request and it knows which one of the is sites it needs to serve ok so that's what a basic get request looks like if we look at a typical response we'll see the server did indeed say it'll use HTTP 1.1 200 just means that everything went ok there's a whole list of all the different status codes it has the date on here when the response was I see we're being kind to hackers here right we're telling them exactly what we run usually it's nice to give them a version number - it can save some time but it's also saying how long it wants you to keep it in the cache so we'll talk about expirations later and again just some more headers talking about what's here how big the content is a blank line and then the actual body for that content so that's the typical request response paradigm we're going to look at in the tools that we're using by the way if you have any questions feel free to interrupt we do have a microphone so we get down the recordings just raise your hand and we'll go as we go so we'll start with what is fiddler so Fiddler's a tracing tool that was built specifically for HTTP so Erik Lawrence was working at Microsoft I think he was on the clipart team and people would call in customers would call and say we ordered clipart we can't download it and he was listening to his own customer service people try to help them and there were no good tools around to try to help troubleshoot what's going wrong why doesn't this download so back then Microsoft had met Mon which is similar to Wireshark and also you use any of those but it does work it's a packet tracing tool it's not very fun to look through that tool and try to reassemble the full get and the full response so you said I want to make a super simple tor tool specifically for HTTP that makes it as easy as what you just saw here's the full request here's full response so he worked on that part-time when he was at Microsoft he decided that he wanted to work on it full-time so he asked Microsoft will you allow me to work on this full-time and they said no so he started looking for some other partners that might be interested and he actually I was acquired by telluric in 2012 so he became a full-time employee with telluric and I think he worked there three years and now he's moved on to work at chrome so telluric now owns fiddler they promise to keep it free and they've been doing a lot of innovations lately so the people who currently own it you can download it from fiddler to calm it is free it's written in c-sharp so we'll talk about some of the dotnet stuff potentially as we get into it but I think it's cool that he said he didn't know HTTP he didn't know dotnet he didn't know c-sharp and he went and learned all that and wrote fiddler which is pretty impressive on the side it's what he did on weekends and stuff over whatever it was 10 to 13 years from when he started so I've used it for a long time it's a really great tool so we'll just show the basics of how we're going to run this so I'm going to startup fiddler we go into Chrome and just pick the conference website I have some of the cash I'm just going to remove all I'm going to hit ctrl f5 and chrome to force it to refresh and then we'll just watch all the requests so the other thing I like to show web developers and I occasionally will show this to my marketing group too just to show them that it's not a single request between the client and the server to get a web page there's a lot of requests I'll show you HTTP archive if we have time later the average web page today is about 105 requests I think it's up to two and a half Meg the average web page which like I said I've been doing this for a long time that kind of freaks me out that's as big as the doom program needs to be so if you ever used to play Doom on a PC your installer average web page is actually bigger than that now just to give you an idea of context and you'll see it grow over the years but inside a fiddler what we'll look at is on the left hand side these are all the requests that were made so it made the HTM request and I'm going to go on the right-hand side here I just like looking at the raw requests popping into notepads you can see it better but that looks like what we looked at before so that's just my client asking for the homepage on that particular host I'm going to take this off you'll see this little animal shows up this gold bar here that says that the response body is encoded it's actually compressed which is a good thing so I'm going to take that off and we'll look at the raw response and you'll see the same thing it's got all the same headers and then the actual body for the HTML that came down okay and then all of these additional requests are all the JavaScript the CSS all the images that make up that page are all downloaded and we can look at those individually and we'll look at that as we go through this talk again you can get it from fiddler to there's a lot of different things out here they actually have some pretty good documentation they have some videos out here as well they've got different areas that you might want to use fiddler for and they walk through that they've now also got so the normal download was for dotnet they also have a beta that runs on mono and they just put out a beta for OSX so we'll talk about a little bit later at how you can troubleshoot devices other than Windows but just be aware that those are out there as well so you can come and download down so how does fiddler work so I talked about Wireshark and net Mon those kind of network monitoring programs are sitting on a wireless adapter or your network adapter and they're just intercepting all the calls that go through that particular adapter that's not how Fiddler's work fiddler is actually set up as it's a separate application and you're going to set it up via a proxy so if you're familiar most companies have a proxy server that you all your computers will connect you to get out to the Internet the idea with this is whatever client I'm using I need to configure its proxy to point at where fiddler is that way all that stuff will get sent through fiddler and can get traced okay so what fiddler does by default as soon as I open fiddler it's going to look for all the open browser instances that I have and it will actually go in and change their configuration to route through fiddler so I'm going to show you what that looks becomes important later when we talk about tracing different clients and stuff that you understand that it goes through a proxy so I've got Sadler running right here if I open Chrome we go look at the settings put onto advanced we've got change proxy settings if I come in here it's got use a proxy server have you ever seen the shirt there's no place like one 27.0 that 0.1 yeah no place like home this points to your own machine so this points to localhost so what it's done is it says fiddler is running on port 80 8 8 8 on this machine so I'm going to set my proxy to point at this machine in that port now everything I'm doing in that browser is being routed through fiddler ok so that's how fiddler is actually getting set up and that's how it sees all that traffic kind of freaked out our security group at first they didn't they weren't happy to have net Mon or Wireshark people running and especially when we're all on switchers before because you could watch everybody else's network traffic that's not a good thing but with fiddler you have to specifically route your proxy to go through fiddler to be able to see anything so you don't have that risk that you're going to be looking at things from other people's machines ok and what as we go through the talk I'm going to focus so I support an e-commerce site I have a lot of different clients I have to worry about a lot of different devices that have problems I tend to use fiddler first because it gives me consistency so if it's something I can do in fiddler I'm going to do it in fiddler there's a lot of things that I can't do in fiddler that I'm going to fall back and that's what I'll show you in chrome developer tool so it doesn't mean that's not in chrome developer tools it's just if I can do it in fiddler then it's consistent for me across all these different devices this easier for me to troubleshoot that way ok talk about chrome developer tools I can hit f12 when I'm in Chrome to get into developer tools or you can use the windows or mac keyboard sequences when it comes to developer tools there are flags you can set so you can actually go to Chrome flags and if you scroll down there'll be a spot I can check that says I want to use experimental developer tool things none of the things I'm going to show you in this talk penned on that if you happen to run into something where you see that's a cool feature they may tell you to go there and enable it because it's not enabled by default for everybody but like said none of the things I'm going to show you are going to do that you could also get canary so canary is meant for developers and early adopters that want to see new features that are potentially going to make it into Chrome itself you can download canary and you can run it side by side again I'm not going to show you anything in canary here everything I'm going to show you is something that works in shipping Chrome and I want to do that because I have to troubleshoot on other people's machines I want to be able to use techniques that I know are going to be available say of Chrome ok but if you see things you can use one of those so I'm going to try to focus on different areas for the talk I'm going to start with your site is failing and you don't know why and break it down into some different categories show some simple examples from each one and how these tools can help you troubleshoot problems that you're having so the very first one is somebody will come to me and say their sites not working the first thing I'm going to do is I'm going to open fiddler and I'm going to check all of the response status codes that come back because that is very often where I start realizing where their problem is type a web page I can pull it up in the browser just going to clear by the way I'm just going to say remove all to say less in here so I'm going to pull up this particular page right away I see it's not what I expect so this is bootstrap I expected the top to have a carousel that showed me some of the different cities it's a fictitious travel site and I can tell right away that something's not working with this like I said the first thing I'll do when somebody says stuff doesn't work I want to make sure that all of the files and stuff they need are being pulled down correctly so in this case I can look through here's the request for the actual page and right away nicely highlighted in red if it were only this simple all the time right that's my problem the CSS stylesheet that is controlling a lot of that look and feel for that page isn't correct right I can see that that file is not being downloaded it's not very typical on your own machine but how many times do you go to somebody else's and they said well it all worked on my machine doesn't work when I got to stage and so I'll start asking did he deploy this did you move somebody couldn't get their video to play did you deploy everything yep go do this boom the video file wasn't deployed where it's supposed to be you get a 404 star easy to fix that way so now that I see this I'm going to show you this in Chrome as well but I know that that's probably what the problem is so here again I'm going to hit f12 they have a network tab here as well slide it up this two hair here so if I go control f5 hit this request again and then if I scroll up in here and see the same thing that style sheet for whatever reason that's not being pulled down like it should be nice thing I can do in Chrome if I want to I can come into here it turns out that I know that that's not the right style sheet name so somebody mistyped it shouldn't be site one should be just site could be that I deployed it wrong could be the server's not working so nice thing is I can come right here and change it hit enter and I can see immediately that now I get the experience I wanted so I haven't had to go back into the development environment I can do a lot of stuff in the client make adjustments see did that fix it or not fix it I can go then to the sources tab if I want and see if I can see my list here there's a way in here I can tell it shows me that that's been modified on the client and usually on here I'll see my CSS file and then I can actually just right-click and save it another thing I can do I'm not going to show in here there's a feature called workspaces so you can actually set up a workspace in Chrome to point to the folder so on my own development machine I can actually point to where the source code is so I could make changes on the fly and the CSS like that I can say save and I can actually push it directly to the folder with that CSS file sits now I do sass and stuff in production and I do bundling and minification so that doesn't work out well for the way that I do development but if you want to just be aware that you can make changes with them browser and actually push it via workspaces okay so again if I now know that that's the problem I can come back in here I can change this save it we go execute that again now that change is going to be permanent because it's not just in developer tools and then everything works like I would expect and I'm happy AC be surprised how often it is especially with people using CD ends and third-party components and stuff it's just a missing file or something not deployed right that's a really quick way to test and see that that's the problem next one we'll talk about is JavaScript errors so go the JavaScript file let's pull this one up and what I expect for this one is I've got an image on it and I want to be able to click the image and have it do a modal dialog box that shows me like a zoomed in picture from this so if I can click on this I can see I'm using bootstrap I get the mobile to pop-up but it doesn't have the picture embedded or anything like I would expect this is going to be a good case to use developer tools for and so I'm going to use Chrome developer tools and try to troubleshoot this I could just try to step through line by line until I finally get to where I think the problem is it's a lot easier in chrome I can just actually set here's my on click where I know the code is here that I want it to run I can actually just type the bugger and if I save that now what's going to happen is when I go re execute this when I get to the case where this actually fires and get my thing to come up here why are you not behaving when I now shut it down I'm just going to control f5 make sure I have the recent copy hit f12 now if I scroll down here I should be able to click this and you'll see it immediately paused in the debugger so it hit my debugger statement and it's now sitting directly where I am on that on click so just saved me time to get to where I was so now I'm going to hit f11 and start going into that file the first thing you'll notice is I do minification and bundling and stuff so that's all minified all the white space is gone that's not very entertaining when you're trying to do client-side troubleshooting so if you know there's this pretty print on the bottom so I can actually just say I want that to be unmet off' i'd if that's a word we'll use that as a word today so now it's unmet off' I'd it's not back to the original source you can see it's got things like our that isn't what I named things that's just how some of the minification occurred you can look at source maps and other things to try to get you back to the original source but now I can actually start stepping through here on the client next thing you notice I'm going into jQuery so I'm using jQuery for this I'm using it in bootstrap not very often when I'm troubleshooting is they're actually going to be a problem in the jQuery library in fact I've used it for years I've never personally run into a library problem so I don't really want to troubleshoot in jQuery I can simply right-click and say black box this script when I do that what it's saying is it's now going to save that in my configuration every time I do client-side debugging and it's about to go to jQuery it's going to skip over all of the jQuery code so I don't have to spend time wasted looking to the jQuery stuff so I'm going to come out of this another thing you'll notice it's giving me variable details so instead of having to hover like I do in visual studio to be able to see what some of the variable contents are it's actually displaying it to the side so there's actually features it's on by default but if you didn't like it you can turn it off display variable values in line while debugging that's what's giving me the feature it's showing me as I'm stepping here each line as you'll see as I go to the next one it's showing me all the values next to it that's where that feature comes from so as I'm looking at troubleshooting this I won't spend a lot of time on this it turns out that I'm using children and if I look at my markup it's not a direct descendant child I'm trying to find some content that's further down so I'm trying to find the title and the body of this I've got this modal I want to get down into these things and start playing with that in the dom children isn't actually what I should be using so when I looked at the jQuery documentation it turns out to be fun find instead of children so I can fix that another thing that I'd like to do on the server side I can actually set something I can spend a lot of time on this I just want to tell you that it's there so I can do things like console assert or I can do traces or warning or debug all of those things are going to get put out into the console for the developer tools so in this case if I were concerned I want to make sure that when I do the children I get back something that's at least length greater than zero I can just say I want to assert that if I save that and run that again and I'll actually go click on this again I'm paused in the debugger again so now if I step in here let these a pretty print if I open up the account so I can hit escape and the console will open here so it should show me must has already tried right there there's my assertion so I can put all of these things in my JavaScript to tell me these are things that are happening on the client and there's a ton of things and chrome and all the other developer tools are pretty well standardized on what's in the console so you just go out here and search for the console reference under chrome in this case but it shows you all the things you can do with assertions you can serialize objects into the console so you can see all of their contents do tracing to stack traces etc so those are all things I can add in them javascript and when it comes to the minification the pretty print is handy but I don't like to do that if I have a lot of different JavaScript files that's where fiddler can help actually has a feature called make JavaScript pretty if I do that and click in here because Fiddler's a proxy between my client my server its intercepting all of the requests it can actually make modifications so it's going to see all the minified javascript files come back from the server and actually unmess IM there and send them down to the client so that i don't have to look through and keep hitting prettyprint since i hit the skin now if i hit f12 and i want to do troubleshooting i can look under the sources and close this i can look at all the things that say their minified here you can see actually now our unman aside and i can do all my troubleshooting the way that i want to so if you do a lot of this and you don't want to have to hit pretty print just be aware that you can come in here and change it and then fiddler notifies you which files have actually modified by doing some color coding to it to see have an idea next thing we'll talk about is style issues so we get a lot of CSS styles we have to apply from third-party and other people and of course when they have their ads and wherever they want to put in everything works perfect right I mean it all lays out right everything's ok I put it into our e-commerce site things don't like work the way that they should so I want to be able to troubleshoot issues that I have with those styles so again we'll do this in Chrome developer tools so I've got my page shut this know what I can do is I look at this and for whatever reason I didn't expect this to be the color green so the fast way to get to dev tools and see exactly where this is I can just right click and say I need to inspect that particular element now it's going to bring down below it'll bring me to the Styles tab so here I can see all of the CSS style rules that were applied to that particular element and then I can make modifications to see if I want to change anything so for instance I can see the reason I'm getting green here it's coming from custom CSS that's the file that that rule came from if I want to I can simply say I want to turn that off and see what other style would apply it turns out I didn't have any other styles in here so it fell back to what the browser default would be but if you see it slashes out things that other rules take over so it's very handy to come in here and say yeah I know I've got all these style rules and this one should be working but it struck out because some other rule ended up winning and then you can troubleshoot why is that rule if you've ever looked at like CSS I hate this word specificity actually senator agency very specific rules about how things get applied so if it turns out at least I can see that it was struck out and I can go figure out and try to understand which rule is applying here and why the other thing I can do is I can come here and actually change the color so they have a nice color picker I can just type this by hand if I want to I'm not a designer so I'll do orange but I can make those changes on on the client on the fly they also have where they have autocomplete so if I want to make a new rule here I can just start typing like maybe this is really foreground color or back color that I want to change you can see it's giving me autocomplete or type-ahead so it's got nice features for that some of the other things that I can do in here is that if I have some particular style rules on hover so let's say I want to go and look at this element again I happen to have a hover rule I can actually come here and say I want to force that into a hover State so now when I do that I expected it to be another color I've got another style in there for hover I think I'll do this one control of funds see now I'm targeting this if we go back here you can see well in this case it's applying sorry for the resolution here this is some of the strikeout stuff I was showing what just shows this rule now overrode the other one because it's targeting a specific ID if you don't want to look at the style we see all those strikeouts you can actually go to compute it and it's just going to show you all the actual properties and all of their values so if you don't really care which rule is it that made it this way but you want to see what it is or you want to edit it you can do that directly here like I said we use this a lot that's how we find style problems because otherwise it's just not very entertaining this is a good way for me to client-side troubleshoot that stuff and then they also have the box model I can play with but that's the core thing that we'll do is under the Styles tab just try to troubleshoot what's wrong with our styles next one is performance concerns so I have a lot of people I do a lot of web performance work that will say my sites not working I want to understand why so we'll talk about ways to troubleshoot that so open up fiddler here we'll go back to the conference website and clear all of them and just do a refresh so I'm just doing a control f5 which is forcing all those requests to get remade so if anything was cast on the client I want to see all the requests that go on an initial so there's a lot of things I can do in here because I've done a lot of web performance work I kind of know what to look for so I'm just going to tip you off to things that they should be doing or ways to investigate where the problem usually is so we'll start here the first thing I look at is the HTML that comes back I do notice that it's compressed so if you don't use HTTP compression on your web servers you should we turned it out on our e-commerce site like 10 years ago and I cut our bandwidth usage in half so it's free it's built into all the web servers all of your static files you should do compression we use it for all of our dynamic files as well so it's good that they're doing that if I look at their CSS file I'm going to take that off and just look it looks like they have it minified which is good that's the best practice we'll do the same for the JavaScript take this off see that's minified as well so they're doing minification you notice though they're not doing any bundling so they actually have five or six separate JavaScript files so we minified and we take all of our javascript files and put them into a single bundle with a version number every time we do a build and that also cut our home page time in half it just makes that big of a difference because when you looked at fiddler all these requests have to go back and forth between your client your server potentially over a slow Network the less things that you have to transmit where you're doing that back and forth over that latency the better so that's something they should do next thing I'll typically do is I'll sort by the body just to see what the biggest files are so we see that Scott Allen is being a hog at 285 K so the first thing I noticed by looking at this that's pretty big for an image and it's a PNG which strikes me as odd I mean photos should really be JPEGs not PNG s so I can quickly go out first thing I'll do is I'll save off this image so I can actually just say I want to save the response body so I'm going to just save that on the desktop I happen to use Paint Shop Pro there's a lot of other tools to do editing of images but I'm going to go open up that file and just by doing a saving it as a JPEG one of the things they have in here they have an optimizer so I actually do a side by side and JPEG you can do compression and trade-off quality for size so I'm just going to start changing the quality see if I put it at 90 it's going to tell me I'll get down to 18k but you'll see now it's got some artifacts in there so I'd probably back off to like 75 yeah he still looks decent there she'll do that I'm going to save this to the desktop as well then if we go do a quick compare that's 24k instead of 288 some K so it's just a tip off when you see things like this quickly you can see it's pngs when it really shouldn't be they're really big and then the other thing I noticed is I'm not in this list all these other guys I'm not in there so anyways but that's some of the quick performance things that you can do in fiddler if you know some of the performance rules you can just look through for specific things that you know the other one that's slightly off the screen here is caching so by default somebody comes to my home page gets my HTML I listed out all my CSS JavaScript and images it downloads them all they close the browser they come back tomorrow what I'd like to do is if I haven't changed any of those things I'd like to have it served right off their own machine I mean it's sitting in their browser cache on their machine it's never going to get faster than to use that if you don't set expirations on your content to tell it how long this stuff is considered fresh your browser has to guess and a lot of times it's going to go back to the server and say I have a file I got yesterday hasn't been changed since then and since you have a hundred and four requests or whatever on a typical web page that's a hundred and four trips back to your web server to find out that nothing actually changed so we set expiration for all of our images for 30 days our JavaScript and CSS we do for a year because we have version numbers built into them that way when you come and revisit tomorrow you don't have to download any of those images again okay if it turns out I really have to change the logo I'll just change the name to logo one jpg instead of logo and that'll everybody won't have that in their browser and they'll come back and get it so the other thing I notice on here they're not using a lot of caching for things like all those pictures for the speakers so if I come back later it's up to my browser I don't want to leave it up to the browser to decide if it's going to go ask again I want to set expirations and that's something else that's missing on there so that's some quick performance things the other things you can do in chrome dev tools they have an audit stab so if you're not real familiar with the performance rules and you just want to get a rough assessment of your page you can actually come in here and say I want to run a web page performance audit and it's actually going to spit out things that it thinks that you should do so if I look at some of these it's just going to say I've got all these images I don't have dimensions specified for tells me I can minimize my cookie size things like that usually this comes up with more specific so here there sorry there at the bottom remove some of the unused CSS rules and look at your images and tell you if you could make them smaller by doing some compression on them so that's pretty decent I'm going to cheat one time in my talk and go outside of dev tools and the other one because they used to have this in dev tools when I took it out chrome has a PageSpeed insights I can actually you'll punch in a URL and it will do a mobile and desktop performance analysis for me and break down things that I should SiC so it's similar to the auditing it just has more capabilities than what's built in the dev tool so again I can come out here and see here a bunch of different images that they basically took every image compressed it and said I think you could do better on your size by doing more compression of these images okay so again just a nice tool to be able to get a sense for how your performance is mixed content warning so if you haven't have a site that's not completely HTTP somebody gives you some of their content or even if you are they give you content that's not using HTTPS and you get that mixed content warning that's annoying it's very easy to find that in Chrome so so you pull up the page I'll hit up 12 I'm going to re-request this I'm going to go to the Security tab and hit control of size and what I'll say is they've broken it into a specific area where it says you have a particular resource on here that's not being requested correctly and I can see its Lunden jpg on mixed content dot HTM and see right here it's referencing it with HTTP colon even though it's a HTTP page you shouldn't do that I've used what's called protocol s links for a while so they actually go back to this page on the server here and instead of referencing that like this I can leave off the protocol that'll actually say I don't care if you're HTTPS or HTTP match the protocol the page is using to make this request so now when it's on an HTTPS page like this one so I hit ctrl f5 again it's going to request and now everything's green everybody's happy and I don't get that mixed content warning like I would get at ie it's not easy to find these with other things it's nice that's easy to do if you're in Chrome developer tools also the next thing is always compare a success and failure so we have a lot of cases where something doesn't work so we we own a lot of different food companies so you could go and find where to buy our pizza that would use html5 geolocation on the client and figure out your lat long and then we plot out all of this in places you could buy our product and works fine somebody did something of course and suddenly it didn't work anymore but only on iPhones didn't work so we did some tracing with our various tools and we couldn't spot it so what I did is I actually pulled up I pulled up a fiddler trace of one that worked so I knew that edge worked we'll see things have been here at all one see here's the latch and I just looked at this and said okay this is one that works I don't know why this one works and then I pulled up one that didn't work so I pull up a trace of an iPhone and the thing I noticed was the precision from the iPhone was much more decimal points than the one on the other one I mean I had looked at it for days and I couldn't figure out what was different when I did the trace of the two of them and then can look at the requests and Fiddler's side-by-side it became immediately obvious that this had a lot more precision turns out somebody swapped out our back-end to a different tool and that one could not handle that many decimals of precision it was dying so so the point of it is if you're running into things you can't troubleshoot take a working and a nonworking and then eyeball the two of them but side-by-side because then you can often see what's different about the two and be able to figure it out now who's doing that often have pages where you think it's going to look one way but somebody is changing it so I've got an example of a page I've got a page you know it looks great just got a little time delay on it so I'm sitting here maybe reviewing this page and said yeah that's exactly what I expect and then suddenly suddenly there we go and I think why does that happen who just made a modification to this and trying to figure out through all of our JavaScript and third-party stuff we use who did that is not very entertaining what I can do is I can say inspect now I'm on that particular area I can right click and say please break on sub-3 modifications or attribute modifications so now if I run this again what it's going to do it's going to take it's got a timer in there to sleep but after about 10 or 15 seconds it's going to find as soon as that thing gets modified it's going to pop me into the debugger on the client and it's going to give me a stack trace to who actually made that call so there I got the pop and then here there's the code right there so now I can go look and say I don't know why somebody did this but they're specifically changing the class on this attribute and they're changing the HTML so again when you have a lot of moving parts it's hard to see who's actually making changes to your Dom you can actually just say that break on a little target and pause directly on who made that modification ok next one is I flip those around sorry who requested that so there's a lot of times where somebody will come to us and say you know we did a fiddler trace or you know there's this javascript file in there we didn't expect or I'm going to show you an example of a font how do you figure out who actually made that request so go back to fiddler I'm going to clear this out so they made a request and let's say in this scenario we're using web fonts we have corporate stance and what the fonts supposed to be they're not using the corporate fonts and now we're getting an extra download we don't want who's doing that why is that getting pulled in so fiddler does have a searching tool I can find sessions the important thing is this I used the tool forever and I never knew what that setting was and I was searching if you have compressed content the search wasn't actually looking into any of the compressed content so I would never get matches in the tool and I thought to find just sucked and I didn't know why if you check this anything that's actually compressed now we'll get uncompressed and you should be doing compression so you just set that if you do find sessions now it shows me bootstrap is the one that's pulling that in so now I can go in as a bootstrap file so it just helps me figure out again when you have a lot of third-party libraries and such who's pulling in this extra file or why is this getting used it's a quick way for me to troubleshoot and see where that is there's another place it's in developer tools I will admit that this is a little flaky and doesn't always work so I'm just going to show you not working if you believe me you can actually see there's an initiator column right here that tells you who is it that drove this request so in this initiator that should point directly at who requested that file so if I go to this halflings right here it says it's bootstrap line 153 but if I click that it's actually jQuery file which isn't correct I want you to know if you're stuck sometimes initiator is correct and sometimes it saves you a ton of time just be aware that it's not always right okay it's a little flaky but that's a good way to pinpoint who's making requests for that particular file the next branch of things we're going to look at is what if so what if I did certain things how would things be different so the first thing is what if the request was different so because fiddler is acting as a proxy it can actually intercept all of the requests between the client and server and allow me to make modifications so I've got a simple page here it's supposed to do validation so if I hit one it says hey that's great if I hit zero I have client-side JavaScript saying that you know that's not valid everybody knows client-side JavaScript does nothing for real security right I mean it's just a user interface or interaction thing so what I want to see is I want to see that the server person do it correctly will this work if Java scripts not enabled I'm a real fast way to do that there's a composer tab I think somebody showed me that was using this in an earlier demo today too if I drag this guy over and drop it it's going to have the request that I made so let me pull the other one because I want to post so here's my successful post when I posted when I was posting the value one in the textbox I'm going to just change that so literally I can change anything in the request and send it to the server this isn't always easy to do it's super easy and fiddler so I'll say go re-execute that then I can look at that I'll go look at what its response was and you can see the value 0 it shouldn't be doing that right it shouldn't have gone to the server and allow that to occur so the people on the server are not doing validation the way they're supposed to and that was a fast way to find it another thing I can do with this if I go back to composer like said I can change literally anything in here so if I drag this request over I can play with what if the client doesn't support compression you know is my server responding correctly so I can execute that go back to the response you'll see there's no gold bar here it's not compressed anymore so we use this a lot for doing various security testing and stuff faster than writing a client that can make up headers and things I can just drag those requests over and change them as I want okay what if something was blocked so if we go into will do this one in fiddler you can actually go into they have a bunch of filters so I can actually just say what happens if my CSS files get blocked so I'm going to click I can get it to click here I'm going to go request my bootstrap page again hit ctrl f5 voila looks like that not a huge surprise but we actually when we bundle of our CSS files and put them we put them on on our CDN and like two days after I did that my CDN had a hiccup and everybody saw this so I learned how to write fallback code which I wish I would have known before I'm happen you can actually write code to see the CSS didn't get downloaded so instead of pulling it from the CDN pull it off my own server instead so I have that type of code now this is a way for me to test and what happens if that request doesn't work that's kind of a heavy hammer so there's another way to do this as well I can take individual files let me clear this to make a request the other thing I can do is there's an autoresponder tab so I can actually drag I can say I don't want to all CSS to go away I just have a particular CSS from a CDN or something I just want to see what happens if it gets at 404 I can drag that over to the autoresponder now I can because it's a proxy every time the client tries to ask for that file I can now intercept until it do something else I'm going to enable rules I'm going to let all unmatch requests pass through to the server because I don't want to mock them all I just want to do this one but if I get this one I want to see what would happen if I get a 404 so I'm going to save that and if I go back and run this you'll see what we saw before right the carousel is gone without that stylesheet this is what happens so I can use this to troubleshoot like what happens when a web font is slow so not only can I block it and come in here and put a delay like this one of 20 seconds and I can actually see if bootstrap CSS doesn't download I have a blank page right if I move stuff around I might be able to get my important Styles above that so that I'm sure if bootstrap is slow at least I get some basic rendering of my page I can do that kind of stuff by using auto responder and targeting specific requests okay what if I'm on a slow connection so if I'm on a slow connection we'll do this one in dev tools they've added the ability to do throttling so they can actually come down here and say I want to act like I'm on a 2g connection now I'll go up here and hit ctrl f5 and we'll see how long that takes to paint and all the images and stuff if I'm on 2g so it's just a way for me to quickly simulate I want to see how this page is going to run on various levels of connections you can do that just by setting this throttling here and again I can set my own custom for what I want the latency to be and all that kind of stuff so that's kind of a cool feature what if I have another user agent so I'm going to skip that a given time' but you can spoof out what your user agent is if you want to so you can go either into Fidler or in dev tools and say I'm not really chrome I'm really iPhone 6 and then you can see you know from a client perspective how is the server going to react to me telling it that I'm a different type of browser or device okay how do things work on a first request so browsers are caching things the quick way and fiddler to do this I can actually just come in here and say clear cache that will clear II's cache so now when I go into IE it's going to force it to do that if you go into developer tools there's a setting by default that just says disable cache while dev tools is open so if I do this request let's go up here first I'll do it where dev tools is closed I think since we just went to that page if I just hit a normal refresh here should this ask for the bootstrap and probably nothing else okay if I pull up dev tools now that if dev tools open and I have that setting if I do that same refresh you see it actually requested all the particulars files so this is the way be aware you have dev tools open it's going to act like it's a clean cash situation the other way that we'll do this occasionally is go into like incognito or in private will also act like you don't have any browser cache so if you want to see what happens on a first visit that's the easiest ways to do that you can simulate different lat/longs like I said when I was testing for where to buy our pizzas I can actually put in specific lat/longs you can also change the orientation of your simulated device some dev tools here if you look at this device toolbar if I click that here's where I can choose they do some basic emulation so they know like what what would this basically look like on an iPhone or an iPad just to give you a feeling or you can set it to responsive and change it but I can also come down here and say I want to do more tools sensors and I can actually put in a lat/long or I can actually play with the orientation so I can actually grab that device and act like I'm turning it anyway now I don't write websites that are changing by you know I might do like side to side so I can do orientation like that I don't do stuff that's spinning on accesses and such but if you need to do that that's a cool feature that's in here or like said if you need to spoof out a different lat/long just to see what it looks like when you're coming from somewhere else you could do that as well some miscellaneous things so I talked about fiddler for now is its stable release runs on Windows ok so I can run it on my development machine but I have to troubleshoot all sorts of devices iPhones you know any tablets anything like that that I want to do how would I do that so the way that I can do that is I set it up on the same Wi-Fi network so what I do is I typically end up doing it at home our security doesn't let me do this at work so I get on the same Wi-Fi network with my laptop and whatever device I want to trace I go onto my laptop that's where I'm going to run fiddler I go under tools connections and you see this allow remote computers to connect so that's going to let connections come into my machine I'm not going to talk about firewalls and stuff you may or may not also have to let your firewall let these connections come through but this is saying I'm running on this machine on port 80 8 8 8 the next thing I'll do is I'll go run IP config on my laptop and figure out the IP address of this machine ok once I have that info now I can go on my phone so I'm going to show you an example it's not fun setting up an example with some on the fly for this sighted one ahead of time on the iPhone you actually go into your wireless settings ok and it's going to be different for all your devices but if you go into your wireless settings you scroll to the very bottom there's a proxy setting you just set the server to be the IP address of your laptop and port 8 8 8 8 now all the traffic that you're doing on that device is now being routed through fiddler so I can do all that tracing ok this works for anything if I have to help somebody at work on another desktop I can route it to my machine through fiddler if I want to do that so now I can troubleshoot I've got a trace just to show you here's my iphone trace that I did and if we look at the request see if I can find it here let me clear that out we'll do that again I'll show you that all of the iPhone specific user agent stuff right there the iPhone so again this is a way for me to trace so regardless of the device and the fact that I can or can't run fiddler on it as long as I can set a proxy for it and route it through a machine running fiddler like that I'm able to get that trace talk about back-end api's a lot of people expect so I've got a page here that calls a web service and I just gotta pull it up and show you converts from Fahrenheit to Celsius I can find it so 212 Fahrenheit 100 Celsius so when I did that if I open up fiddler a lot of people expect that you'll see the call from the client to the server I really wanted to capture the web service call being made by asp.net out to a third-party service if I come in here I don't see that and again the reason is because dotnet called by default within my code are not set through a proxy like a browser would I have to specifically either do this I'll set it and say this call has to go through this proxy or if you prefer you can go into web config and there's a default proxy setting if I uncomment this all of the calls from any of the dotnet classes will now get routed through fiddler so I can trace all my web api WCF all that stuff that would normally be from my server-side code going out to other places I can trace that in fiddler as well by setting up the proxy for it but that's why it's important to understand that fiddler is a proxy so if you're not seeing it that's probably why you can also see HTTP traffic right this should freak you out little the whole point of HTTP is that you can't see the traffic where you can with fiddler because it's a proxy and you can in chrome dev tools because it's already decrypted so they come into here and I go to HTTP I just have to say decrypt I'm not going to do it here but the first time I do this fiddler is going to create its own server certificate so now when I go on the client and try to go somewhere fiddler is going to intercept and give me its server certificates on the client I'm going to see a warning that says this is not Bank on you're going to its do not trust fiddler you want to trust this certificate I do right I'm intentionally trying to do a trace I'll add it to my browser safe certificate store then for the rest of time every time I'm debugging I'll be able to see the HTTPS so if I go out here and go out to a let's go out to Google they're using HTTPS if I go down to their request which is right here you can see it uses HTTPS but if I look on the right and look at the raw I can actually see all the HTML so if you need to troubleshoot HTTPS this is a good way to be able to have fiddler sit and be and basically decrypt it all for you okay and again it shouldn't freak you out too much from security because you knew it was a bad certificate you choose to trust it it's only on my own machine so but it lets me see all that traffic I get a lot of calls from people that say your sites not working on my computer like even senior vice presidents I don't want to install Fiddler on a senior vice president machine I'm going to get blamed when she can't print three years from now it's my fault so I'm not going to do that so by default I'm going to use chrome dev tools first because I can actually do Network trace and if I do a network trace let's just do by hit f12 I go to the network this is my best case scenario I can do all my tracing and then come on I can actually right click here and say save as har it'll save a har file with all of the same requests that I can go import then into fiddler and it's got like 95% of the stuff that should be there it'll look like I captured it in fiddler even though I didn't and I didn't have to install anything on their machine which is good the other choice would be if I'm near them I can actually just go configure their proxy to point at my laptop at my desk just like I was with the iPhone device and I can route it all through my normal laptop through fiddler that makes me happy there's also a tool called fiddler cap I actually had to send this to a senior VP that was remote that didn't have Chrome she installed this all she has to do is hit start capture go do whatever she wants to do when she's done she can hit the I'm done with the capture please save it she gives it a name she emails it to me and then i open it up in fiddler and i do all the troubleshooting that i need to do and it makes things like please make sure your cache is cleared and your cookies are cleared all those things are easy for her to do okay but I didn't have to you know I did have to install something which is unfortunate but at least it's something that's easy for a non-technical person to use we'll talk about some non optimized images if I got a second here so another tool in fiddler is show image bloat so this is a third-party thing that you can get off the fiddler site I'm going to reestablish my proxy so if I go run this against the conference site again turns out that pngs have a lot of metadata in them that describe you know things about the image that the user doesn't actually see but if you look this thing adds bricks to show you how much of the image is actually metadata so most of this image is actually metadata that comes from Adobe Photoshop and stuff I can actually just go into fiddler pick any one of them go to image view right click and say please PNG distill this and it's going to run it and it's going to cut it from eight hundred and forty K or some third bytes or whatever the hell that is to something smaller okay then I can actually save that off and take all that metadata out so we do this on with JPEG there's a tool called jpg Tran with strips metadata but if you have metadata in your PNG s it's a quick way for you to get a visual of which images have way too much metadata go strip that metadata out and they'll be substantial like eighty-five percent of that one is metadata we don't want to send that to a client it doesn't help them saving and sharing traces I talked about how to do with a har file you can also do that with fiddler so I go back and run this again whatever I have in my trace I can just say save all sessions give it a name I can also password protect it so if I send the third party people I don't want people to see all of our network details and IP addresses and such I can just say password protected type in a password I can then email it to them and they can use it and we actually have a lot of third-party vendors that understand fiddler these days so they can actually help us troubleshoot problems with their stuff I didn't have time to show you filmstrip but if you go on the network tab of Chrome developer tools it shows you how fast your page is painting and how soon you can see things so that's useful in the network part some quick resources I do have a fiddler course on Pluralsight course on Jinjin that Eric had written a very good book on fiddler probably read it like 10 times every time I read it I find some more stuff so that's available and then you can look at the docs for Deb tools and if you have any questions that's my email Twitter and blog information and I'll stick around for a little bit and when next speaker comes we can take it aside if you have any particular questions but that's all I had I'd appreciate it as you walk out there's a feedback bin if you'd put in your feedback Green is good okay so all right thank you [Applause]

Channel: NDC Conferences

Views: 30,613

Rating: 4.9219513 out of 5

Keywords: debugging, ndc, ndc london, Robert Boedigheimer, fiddler, chrome

Id: QxKHi1wFBfc

Length: 59min 52sec (3592 seconds)

Published: Thu Feb 16 2017