Filter network requests when debugging.

When you are debugging, you would like to filter out the various requests so you can concentrate on what’s important eg: filter image or css file requests. Google has finally listened to the developer community and has added support for “negative filters” in Google Chrome-version 42.
Here is the text filter I use when debugging where the “-” sign before each file extension keyword filters the requests. The requests then do not show in the “Network” tab:

-png -svg -aspx -axd -jpg -css -ttf -js -gif -ico -woff2

When you are adding the text filter make sure that the “Regex” checkbox is unchecked.

You can further filter the requests by using the following supported keywords

eg:

-mime-type:image/png,-larger-than:20k,-domain:yoursite.com,-status-code:404
Continue Reading

Fiddler not capturing traffic from browsers

Sometimes when you are trying to capture browser traffic for debugging, Fiddler does not capture the same.
One of the options to try is to make sure that the “Use Filters” checkbox is unchecked in the “Filters” tab in Fiddler.

You can also troubleshoot filters to see which filters are hiding your traffic.

If this does not work then you might have an extension (Like ZenMate or TunnelBear) installed that might have messed with your traffic. You might need to disable those extensions to ensure that Fiddler captures all the traffic from the browser.

Continue Reading

Only step into our files when debugging in Chrome Developer tools.

A lot of times when we are debugging our front end javascript code using Chrome Developer tools,

the system steps into other files. To avoid this, we can ask the debugger to ignore these files by “blackboxing” them. To do this, right click on the file and click “blackbox script”

To get to the blackboxed files, go to the “settings” section by clicking on the symbol as shown below or press F1.

The “blackboxing” tab shows all the files that have been blackboxed.

Continue Reading