How to use Fiddler

I have a web page.
I want to debug
the web page has a expand/collapse section.
I wish to find which CSS & Javascript function is involved in expand/collapse operation.
I am using IE 9 browser
I wish to debug this with Fiddler only.

How does Fiddler help me to debug this ? Could you please tell me the steps to try ?

I have downloaded Fiddler 4 and installed in my PC.

Thanks for your time.

Sorry, I don’t know anything about Fiddler and would suggest you refer to their documentation in order to learn how to use it.

For most debugging you can just use the browser’s built in webdeveloper tools and Chrome has a wealth of tools available (other browsers have their own tools also).

Finding the css that applies to an element is a simple as highlighting the element in the inspector window and the associated css is shown.

If you have a link to the page you are trying to debug we can tell you which code is responsible.

Paul,
Ok…no problem …lets set aside Fiddler then …I can live with IE developer tool also if it works.

application works only in IE browser …Can I use IE developer tool (F12) to debug this ?

I want to know things basically
(i) what is the javascript involved there for expand/collapse
(ii) what is the css involved there when I do expand/collapse.

I dont know how IE developer tool can be used to find that out.

The first thing I would check the javascript tab to see if anything was logged.

If so it will point to the file and line numbers, with various other information.

If nothing there I’d look for script tags in view-source and after disregarding “jquery something” and jquery-ui somneting" (BTW, one each, no duplicates please) and do my best guess to figure out what was involved. Not as easy as the console log, but doable.

Hi, the developer tools in IE are explained here and probably better you should read directly than me trying to explain them. The IE tools are not as good (or intuitive) as other browsers (like chrome or Firefox) but can be used to debug pages. There is no reason why you can’t download chrome and use it for debugging (unless you are just doing this on an intranet with only IE support).

Mittineague explains the usual process for javascript debugging above but is not quite so easy as finding the css involved.

You can just highlight the element and the panel wil show what css is applied and where it came from.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.