Telerik Fiddler - Capture Web Traffic - Rest API Testing Basics | Jason Myers | Skillshare

Telerik Fiddler - Capture Web Traffic - Rest API Testing Basics

Jason Myers, Sr Quality Assurance Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (42m)
    • 1. Intro to Fiddler

      0:53
    • 2. Fiddler Installation

      5:49
    • 3. Understanding the session output

      4:24
    • 4. Inspectors

      3:42
    • 5. Configuring the Session Data

      4:34
    • 6. Filtering Requests

      5:50
    • 7. Session Timeline

      2:41
    • 8. Replaying requests

      2:17
    • 9. Auto Responder

      8:11
    • 10. Simulating network speeds

      3:14

About This Class

Learn to use Telerik Fiddler to capture, modify, and replay API requests.

In this course you will learn the following:

- What is Fiddler?

- Installing Fiddler

- Understanding the session output

- Inspectors

- Configuration the session data

- Filtering requests

- Session timeline

- Replaying requests

- Simulating network speeds

- Auto-responder

I look forward to working with you in this course!

Transcripts

1. Intro to Fiddler: in this section, we're gonna be going over how to use the fiddler application. So what Fiddler is is a debugging proxy for use of capturing Web traffic that comes from browsers and from mobile applications. So you will be able to see all of that traffic and be able to do all these cool things with it. And this is going to be mostly a Windows based tutorial. They do have a beta version for the Mac, but I have not used it. So I am not going to say that it works perfectly. So this is going to be focused on Windows because I know that it works exactly as it should and that it is stable, so follow along and we will get into the lessons right now. 2. Fiddler Installation: all right. First things first is that we need to download and install the feather application. So head on over to telerate dot com four slash fiddler and you should see a page and made look different than this. But look for the download button. Fiddler is a free application. So we're gonna click that download button and it's gonna take you over. You have to answer these questions. You can put whatever you want. This is just for survey purposes, um, and do all that stuff and then click the download, and then it will download a execute herbal file for you. And if you see over here, there is an OS X beta, and it looks like they also have a Lennox Beta. If you want to try those out, I am not going to do either one of those today because I know the Windows one works perfectly. But if you want to try it on Mac or Lennox, then feel free to do that. Okay, So once you have your execute herbal here, let's open this up and go ahead and accept. And this is gonna be pretty straightforward if you want to change the folder go out and do so, but I'm just gonna choose the default and let it go. And that should just take a few seconds. And once it's done, it will open a little webpage there that says installation successful. And you can go ahead and close the installer. All right, so let's go and find it. So, Fiddler For Wouldn't open this and disable this warnings or hit Cancel. You can just do that. And let's see what happened so you can see that there was a little bit of traffic Here. Let me pull this over here. Come on. There you go on. And that's just refresh this page. All right? So you can see that stuff is happening here. Stuff is happening. Refresh this page. Stuff is happening, but the problem is thes are all tunnel twos, So thes tunnels are not going to allow you to see what's going on. It's it's not set up correctly if you're just if you're only seeing this. So we're gonna go to tools options, and then let's do head on over to http T https tab. First we wanna decrypt https traffic, and then it's up to you If you want to do this? Ignore server certificate errors. Um, if you don't ignore it, then, uh, you might have little pop ups that pop up in before it will continue doing stuff. I'm gonna go ahead and ignore it because I'm not too concerned about it, because everywhere I'm going that I'm testing with Fiddler is a site that I know where it's from, So I'm not concerned about security. But if you're just gonna go out and randomly hit a bunch of websites that may not be secure or may may be doing bad stuff, you may not wanna check that. So that's what we need there. And we need to do this actions button over here. And then we're gonna do trust root certificate and then go ahead and hit. Yes. And then yes, yes, again. And there we go. So that basically added some fiddler code to your certificate store on windows and that allows fiddler toe work properly. You can look at connections. There's some default information here. Usually don't change this, but sometimes you might need this port here, but we're probably not an and that should be it. So go ahead and hit. OK, we're gonna go and close Fiddler all the way and open it one more time, okay? And just hit no there and let's go to a browser and let's see. Refresh. All right, so now you can see that there are some things that are coming back that are not tunnels this time, so you can see that getting there and it actually did. Quite a It's doing quite a lot of stuff. So I'm gonna go ahead and hit this X button up here. This is remove all just so that we have a clean slate. That's refresh this page. So here we go. So you can see that you still have some of those tunnels. But now you're getting all all the traffic, right? So now it's going to look similar to what it did in our developer tools section, where this is all the stuff that would show up in the network tab. So, just as comparison, Lett's open that network have ah, and go and refresh. You should see a bunch of stuff. So I pulled us over here so you can see that stuff over here should be very similar to the stuff over here. might not be in the same order, but whatever. It's all good. Um, yeah. All right. So you have If you are at this point, where you seeing this, then you have Fiddler all set up and ready to move on. 3. Understanding the session output: All right. So we're gonna go over this left pain section here, which is called the session window. So it's going to give you all of this is your session. Basically, this is what is happening during during during one session. OK? So if I You can see some things pinging if I go ahead and refresh this page here this Telerate page, you can see that these air, all the web service calls that are being made. So some things are downloading. Some things are making a p. I call some things are sending data as though when you see these Google analytics things thes are sending information to Google analytics so that they know that Oh, somebody visited this page on this day and they they spent this much time on the page and they click these buttons, that sort of thing. Um, a lot of these things look like kind of that sort of thing. There's Here's the actual page request here and and so on and so on. So let me go ahead and there's a X button up here to remove all. So if you wanna clear, there we go. If you want to clear out the session than just so that you can see what's going on because it gets it gets kind of crowded in there. Let's go over to our pokey a p I. There we go. I noticed while I was doing that, you can see that Google was doing Ah, sending sending requests, right? You see all this stuff from Global as I typed, it was it was doing stuff. So let me go ahead and clear this again. Then let's refresh the pokey AP eyesight so you can see that there's some stuff there. Awesome Samore, Google Analytics stuff, um, was going and submit this request. It doesn't want to show up, which happens occasionally. So let's go ahead and close out Crumb all the way and then open a new one. Pookie, a PR and oh, I think there's Semana cashing going on here. Possibly. Let's see. Submit. That's still not finding it. It's closed all of these out. So sometimes when you launch Fiddler for the first time after you set it up, things don't work 100% the way you want it to, or the way that it should. So let's just keep on beating on it until we get the desired result. Interesting. So let's trust him to those there we go. So I think what's happening here is that there's some browser cashing going on so that the browser already knows that this request has this request into memory. So let's let's Dio 35 and then I'm gonna clear this out so you can see what's going on here . Submit. And then that one that one went through right? And then if I try to submit it again, I think there is some browser cashing, so it's not actually submitting again because their browser has this information in the memory already, So it's not making the call again. But if I do 36 now, you now you can see is there. All right. Okay, so that's all I wanted to show you about the left pain at the moment. We'll see how to configure this in a later section. But for now, I just wanted to show you that this is basically how to see the requests 4. Inspectors: all right. The next thing we're gonna look at is the inspectors tab. So let's go ahead and make a request. That's just type three. That should make a I think I request for us. Maybe not. Try type for cement and there we go. All right, So if you go ahead and click on your request here on the right hand side, you'll see a bunch of tabs. We want the inspectors tab. And this is where you're gonna be able to see what your request waas and what your response ? Waas. So it defaults to kind of this view that you have different tabs here to change the views, but the one that I use the most is going to be this raw one here because this is going to give you this simple, just clean what was sent? No formatting or anything. If you like it in other formats, you can You can do that. But typically, I just stick to the raw on the bottom here, a see that says response body is encoded. I'm just good and click that that should not display anymore. But if it does, then you can click that, um, you can see that you can. And the response Down here you have the JSantana, which kind of formats it like that. But once again, I still like to do the raw because I like to look at at the Jason data in in that format that I am used to end that I've been showing you guys all this time and has a few things in here. So you can surge. So the top has a search bar. That bottom has a search bar, so you can do I d so you can find what i d. This is C type it enter. It will shuffled through there and all that good stuff. So this is just another way for you to see all the details in there. And it's really nice because the bottom here is is nicely formatted, and you can see all the headers and all the body all in one section on All that is good. One thing you can do it, which I do when filing bugs on a P I request is if you go to the session section over here and right click on the request, you conduce a copy, copy session and Then let me open up sublime here so I can show you what it looks like when you it's pasted in here. And then you can see that the whole session is there. So you get your This is your request. And here is your response. So you can just kind of pace that into a bug. Another thing you can do is you can go to save selected session as text, and then it will do the same thing. It will save a text file out for you. Basically, instead of having to do this and then I save this as a file. You could just short cut that and just save it as as a file and Yep. Alright, so that's pretty much it. So when I'm using Feather going forward, I'm gonna be sticking to this raw tab here within the inspector. So if you ever get lost and you get reset back to the headers, or you might have clicked on one of the other tabs, just remember that Go back to the raw tab for both the request section and for the response section 5. Configuring the Session Data: All right, We're going to do some customization of this session section here. Eso In order to do that, we're gonna just mess with the columns and the data that's displayed. So go ahead and right click up here in the header section. If you do it down here in the body, you won't get the same options. And make sure you do it up here. Choose this customized columns and then you'll see this little window pop up. You can do some customization so you can see that there's some different options here. The ones that we care about are the ones at the bottom here. So session timers in miscellaneous. So it knows that when you click session timer, there's a timer name and it's now a drop down. All right, so let's do it's at overall elapsed. Okay? And then let's do so. You have things like client connected client. Begin requests. Got requests, headers. So you can very much customize this to say, to figure out when specific things happened during your request. Let's do this. That's to client began response. Then client done response. All right, Okay. And that's gotten closes. That's deus ex here and clear out and you can see that client done Client began and overall elapsed are in the front here. So let's go to our Pokemon a p I. And just put another number in there and submit That should have made a request. And there it is. And you can see that we have some timings here now. So client done response client begin response. So these air actually backwards there, so begin and done. So you can see that it pretty much took those instantaneous too, when the client began and finished its response and overall elapsed time for the whole request was 0.194 seconds. So still under that threshold of, uh that we that we set earlier and there we go. So let's, uh, let's see what other options we have here. So let's go to Miscellaneous, and you can see feel name. You can see I'm so you can put the request method in here and body size request size, um, security headings and all sorts of things like geo location in here. And I'll get so let's just go ahead and close that. So we added the request method. So now you can see that there's a get method for this, right? So you can see this is a connect. This is a GATT. Let's do another coal exchanging a six submit and you can see there's another get method. All right, so now it will be easier for you to find the methods. If you don't want these other columns here, you don't have to have. Um let's see. I just call them. Would you like your moves come Yes and hide. Yes. And I'll keep the overall laps there and see comments. I don't need that one either. Custom, I don't need that won t there. So process. I don't think that helps me there. So I'm just kind of set mine like this right now. So the request method over overall elapsed time the result Let's move things around. So I'm gonna put the elapsed time in the beginning and put get next to the result Protocol's there is fine for now. See, body. This is by size. Cashing may or may not need that, but it's OK for now and content type, so you can tweak this to what you like and to what's important for you. But I'm just gonna leave it like this for now for going forward 6. Filtering Requests: All right, I'm gonna show you a few ways to filter the request. You can see that, uh, this section in here for the sessions can get very busy. So let's go to some random website. Let's see. Um, let's go to, uh it's good even. Right. So I bet you once I do that, we're gonna get a lot of stuff in here, right? So it's downloading images, files all sorts of things, is making e p a calls it's doing, but you're processing blob. Ah, right, okay. And a lot of the stuff I probably don't care about. Right. So let's see, what is this? This is it's getting some file. It looks like some kind of image file. So the first thing I can do is if there's a type of thing that I don't want from from a specific source than I could feel through those specifically. So if you right click on by item here and then go to filter. Now I see. So you have options so you can see hide chrome, hide the process. I'm hide eBay image dot com and hide images. Hide your also. I'm gonna go ahead and click this one here. That word says this is the name of the host name. So if I do that, you can see a lot of it got cleaned up. So we don't see those type of, uh, requests in here anymore. All right. And then you can see down here that these air that filters were currently applied, and this looks like it's not helpful also, So I'm gonna go in. Filter, hide, hide those. Sure. All right, you base static filter. All right. Okay. Getting getting closer. So you can see this list is a lot shorter than it was before. Let's get really used. All right? Getting better. Then we went to eBay, so I don't really care about these things from Google Filter. Now Google. Right. Okay, so it looks a lot better now. You can continue to feel to things as you wish. Just so that you can pay attention to only the things that you want to see. Right. But this is how you do this. This, however, is a temporary fix, because once I close fiddler and that's opening up again, let's go ahead and refresh eBay site. You can see that the filter section is no longer there. And now we're getting all the things that were previously filtered. So that was just a kind of one time, quick and dirty way to do it. But if you close feather than it will, it will reset back to default. All right, So another way to filter things is by the type of activity. So you can say you want everything or you want Onley activity from Web browsers or you want it from non browser. So my brother's obvious gonna be if you have chrome ie, Firefox safari, one of those open and you are browsing the web and you're gonna get any content coming from those non browser is gonna be something like you have an application that is not a browser that's doing making requests. This will also apply to if you are approx ing your device like your iPad or your phone through Fiddler. It would pick up this so you can say that you only want what bro's air traffic. If you only want your device traffic, you can set it to non browser. If you do hired all, you're not gonna get anything, so I don't know if that's helpful, but, um, just going ahead all processes. All right, let's see. And the next way to do filters is in this. Filters have up here, so you can, uh, check this box is is used filters. Then you can save the filter set as some file. Then this way, if you want some filters to be reusable, you can do it within here. So you can say I want to only see traffic from from a certain certain thing here, or show only if you are all contains some certain headers. You break points, you can hide status codes. So say I don't want to see any 300 status code, so you could just ignore them or you don't want to see any of these. You can ignore those. So you have a lot of power on how you do filtering of state Over here. Eso It's good. I would be careful, though, of filtering too much, because you might be filtering out errors or or something that might be causing causing problems. So use filters sparingly, um, and Onley, if you're 100% sure that it's something that you do not want in your view, and it's unrelated to anything that you're working on, 7. Session Timeline: all right. The next thing I'm going to show you is the timeline. So if you see up here on the far right, there's a thing that says Timeline. If you click that right now, it's not gonna show anything because it says you have to select one or more sessions. So let's go back to our eBay site here and refresh. And once we get a bunch of sessions over here, go ahead and select one and then let's you can see that on the right. It gives you some information. Um, not not too useful, though. So that's good. And select the top one and then go all the way to the bottom. Press the shift key and then click on the bottom. And now you can see a better view here. So, um, here are all the transactions or all the things that happened once you did that Refresh. So something happened here. Something happened here, and you can see how long at what point these things occurred and how long they took right. And if you double click on them, then they will take you to the actual item that you were looking for, and it looks like that, but to fill trying it also, let's go back to the timeline. Let's do that again away there. Okay. And so this is useful if you're having some, like performance issues. So you're trying to figure out, um, so say this is when you hit the refresh button and then all the way down here all the way over here is where the pages 100% finish loading and you can see that's almost like 45 seconds to a minute. But 47 seconds from from start to finish. That might not be completely accurate because things were happening and we were moving around, so I might be at the wrong spot. But just just say it was really and then you can see that for some reason, something didn't trigger until this point, and it did that. Or you can say that something took a long time to to complete eso. That's where that's something that you need to look into to optimize performance or or just kind of see all the things that are kind of interacting in that particular, uh, a group of sessions in a time landforms 8. Replaying requests: all right. One of the awesome things about that there is that you can replay a request that was made without having to use a tool like postman to go ahead and and create the request. You can just replay from Fiddler itself. So let's close this eBay one here. That's there's stuff going on in the background, it seems. And let's go ahead and type two. Type seven hit Submit. We should see a new request here, So there it is. So there's a get request. If you click on that and you do a right click, you can do replay and then you can say reissue request. And you can see here that it reissued the request and it got pretty much the same same thing going on here. So this is a very quick and easy way for you to do, um, replay request. Let's let's add some more things in here. Somebody to take eight. Take nine. Go back to here. Let's see. Let's filter this guy out of here because we don't want this hide. All right, so seven and 89 So I select those you got a replay? You can say replay, reissue sequentially, so it's gonna do 789 and then replay requests. If you do, just replay request is gonna drop all of them pretty much at the same time. And if you do, you can do reissue on edit reissue and verify things like that and let's see what else we have here. We play okay, so that's pretty much what I use it for. I just use the reissue requests, and then you can do reissue sequentially if he needs to go to a certain order. But this is a very easy way to just kind of, ah, replay something without having to use a tool to go ahead and generate that request and and play it, or without having to use, like the browser to generate that request. 9. Auto Responder: All right. So the next thing I'm gonna show you is the auto responder, which is one of my favorite pieces of fiddler. And to get there you just go to the auto responder tab and you can see that there's some checked boxes here and some space here. So if you want to use the a rule that we set up, then you would check this box otherwise unchecked that. But first, let's create a request so that we can play with it s so I'm gonna use are the numbers a p I that we played with earlier. If you click on this math and then if you go ahead and just delete the the pound or hash key out of there and hit, enter and then you just see it as plain text there and you will see the A P I request here . Okay, so if you kind of inspector, you can see this. This is a get request and there's ah response. And then there's some texture. So on the auto responder, let's do enable rules and then you can go and drag this over here and then you can see that here is the euro. So it is looking for this one. So let me show you what happens if it does not find this specific. You are l When you when you make a request, I'm gonna change this to a six. And then you can see Fiddler Auto responders enabled. But this request did not match any listed rules. So right now it's on Lee going to do something or allow you to do anything if this matches So if you don't want that to happen, you can click on this boxes as unmatched requests passed through. So that means everything. Anything that's not the specific request will now work. So if I request, I refresh and now six works. Okay? And if I go back to five fireworks again All right, so let's go here. So a couple things you can dio let me show you the inspector first. So we see this is a http 200. Okay, I'm gonna change that at it response and then up here, if you just delete the 200 then I'm gonna make this a 400 bad requests so you can see that once you start typing, it does auto suggesting here good and select 400 Bad request and save doesn't look like it did anything but it saved. So don't worry. And then let me find that request again. So it's up here. Let's do a replay, the issue request and you can see it's down here. If you go to inspector, you can see that now it's doing a 400 bad request. It's still returning the data, so it's not actually a bad request. It is just kind of manipulating the data. So remember this fiddler tool is a proxy. So that means that whatever you do on the Web page or on your computer, all that Internet traffic is first going to Fiddler and then it goes to wherever it was intending to go. So if you didn't have Fiddler, it would just go directly to where it intends to go. But Fiddler is playing as kind of a middleman that it's capturing everything that's happening, Request wise from from your computer. So what? When I made the request for the for the math AP I or the numbers a p I. It went to Fiddler Fiddler Captured that, and it stored all of the information from that request and the response, and then it manipulated this, uh, this value up here before it send it back to wherever is gonna go. All right, we can take a look. So let's see what happens if from the browser, I just make this call again, So looks all good, right? So let's to inspect here and go to network. And then let's do it one more time. So it looks all good. But you can see here that all the way back to the browser, it's getting a start status of 400. It is still getting this body content because that's what's being passed back. But it is getting that status. So it's not just showing up and feather. It's showing up in the actual application itself to, um, let me close this again. All right. Another thing you can do is you can modify the body here, so let's go back to auto responder and that's edit response, and you can go to the raw tab here, and I'm going to make the say there was an error with the number five. All right, go and save and let's just do it from here. I'm gonna open up the inspector again and let me doctors so that I don't have to bounce in now. Not see a doctor to the bottom. There we go. Network, go ahead and hit. Enter up there and you can see that it's still a 400 area. And if you click on this, let's go to response. You can see the response has changed. So there was an error with the number five. All right, so why would you want to do this? So this is very helpful for testing era scenarios with your application. So for the scenario where we're getting this 400 error, So if you get a 400 for 4 500 so anything that's not a 200 to 2 or two or anything that you were not expecting, we want toe be able to throw an error message on your application, and those scenarios are usually not going to happen. Um, in in your testing or development environment, because you're testing something that you have built. But someday down the line, something got mighty get messed up. Somebody deleted a file on accident or or something, and you need to be able to handle it. Because if you don't, then your application could crash. And that's Ah, very poor user experience. So that's why updating the status here faking simulating a bad status is very important for the application so that you can catch those air scenarios and be able to deal with them appropriately. All right, And then why would you want to send a different body here? Well, say you wanted practice. Ah, or test out to sea what different things look like in. And you're in your front end. You I so say this is a very short message here. But what if you wanted something really long, right? So let me go back to here at it. Response. And so this is a short message. But what if Stop that. What if you wanted a longer message like that, right? And then let's go back here and we play that again. So now you have a really long message. But what if you had a piece of you? I That was just a small form field. Um and it was kind of only built to handle that small thing, but you allow people to enter whatever they want So this is kind of a way to test from from the A p I, um, what it would look like if somebody put a bunch of data in there, right, So you can you can be able Teoh deal with these kind of scenarios and with without having to manipulate the actual data that's in the database or without having to manipulate the actual a P. I s Oh, this is good for both developers and testers to be able to kind of scope out different, different edge case scenarios that may happen. 10. Simulating network speeds: all right. One thing that is helpful when you're doing testing of applications, especially things that are like mobile applications or something that sends a lot of a PR requests, is to be able to vary the speed of the requests. So in order to do that, you go to rules, go to performance and then you can do a couple things. You can simulate modem speeds, which is gonna make all the request come back really slow. So let's let's try it here. Let's do a different type and make make a request. It's submit, and there we go. You can see that. That's what happened there. That's let's do another one 11 submit. And there you go. You can see that this went up to one second now, and this one was almost one second. Let me turn that Rule off and let's rerun this one that went for one second replay reissue request, and you can see the difference so you can see the one that took one second with networks. Modem speeds on. Lee took 10.186 seconds when that was not set, so this is very good for testing things like what happens If somebody is on a slow network and tries to use your application, Uh, and then you can kind of simulator by doing this. It's really important to do this kind of testing when you're doing something that involves making a P. I calls because people are people's network speeds are going to be varying, especially if they're on WiFi or on cellular data, because they might not have a good signal or or for whatever reason that the requests are gonna come back slow. And you still want your application to work in these slower speeds. But it's just it's just gonna take longer for for their pages to load. But we don't want the applications to crash and to do weird things. Obviously, you can Onley prevent what's gonna happen up to a certain degree. If there if this took like 2345 seconds, 10 seconds to return. Obviously, you're not gonna You're probably not gonna have a a, uh, check for that to make sure that oh, just wait until 10 seconds or 20 seconds or 30 seconds because it's it's at that point. It's an outlier, and it's no longer kind of in your control. What you can do is say throw messages that says things were taken too long. Try again when you have a better network connection or something like that. Kind of depends on your app, but this is how you simulate those slower speeds. Um, you have, ah, other couple options here. You can, like, disable cashing and cash. Always refresh if you wanna mess with cashing at all.