Most of the modern browsers provide default built in debuggers so you don’t have to launch any third party tools. It has never been easier to debug in browsers and try out some tweaks before making any changes. Let us take a look at the debugging tools available in top-used browsers of today
Firebug (Mozilla Firefox)
Firebug Lite (IE6+, Opera, Firefox, Safari, Chrome)
A lite version of Firebug for Mozilla is available for the other major browsers as well. The fans of Firebug who prefer other browsers would definitely like it. Firebug Lite has the same look and feel as original Firebug and provides most of its features except for the following: live editing for all panels, Context menu options, layout side panel, search option, tooltips.
Chrome Developer Tools (Chrome)
The pre-installed Chrome DevTools is deeply based on the Webkit Web Inspector which is a part of the open source layout engine Webkit. To access DevTools click Chrome menu in the top-right corner and choose Tools > Developer tools. There are eight main task-oriented groups of tools at the top of the window: Elements, Resources, Network, Sources, Timeline, Profiles, Storage, Audits, and Console.
IE Developer Tools (Internet Explorer)
Dragonfly is a built in tool for Opera which provides a whole range of features for convenient debugging. It is also ready for cross-device use on on your mobiles, tablets or TVs. Dragonfly automatically updates behind the scenes.
Safari Developer Tools (Safari)
OS X and iOS users have a powerful set of tools in Safari browser. It can be enabled in Safari Advanced preferences. It allows for easy modifying, debugging and optimizing a website.
Actually, choosing the most convenient debug tool often depends on personal browser preferences. In other cases developers have a strictly defined choice of debugger which meets their demands in the best way, regardless the browser they prefer.