Saturday, November 03, 2012

Debug your Web page: F12 Developer Tools and Fiddler

In my day to day job, when it comes to debug a web page for finding out what's the problem, from which server the request coming through, debug html, css, change document mode, to analyze cookie, to do high level performance analysis, I will go for the below two tool sets:

How to use F12 Developer Tools to Debug your Webpages

Common usage:
  • Profiler Tool to analyze the performance of your code
  • Clear-up Cache
  • Identify the size and position of elements. do some minor modifications and visualize the change.
  • Always Refresh from Server : Forces Internet Explorer to always acquire webpage content from the server rather than using cached content
  • Informational and error messages in Console Tab
  • Debug JavaScript code without leaving the browser

Fiddler: Very powerful  tool which allows you to inspect traffic, set breakpoints, and "fiddle" with incoming or outgoing data.

No comments: