Justin is dead on. The key point here is that HTML is just a language for describing a document. Once the browser reads it, it’s gone. Open tags, close tags, and formatting are all taken care of by the parser and then go away. Any tool that shows you HTML is generating it based on … Read more
I used Firebug from the start and it was a godsend like the invention of fire. But then Chrome came out with its debugger and I tried it. I kept using Firebug, but kept an eye on Chome’s dev tools and finally could not longer come up with a reason not to switch after JSON … Read more
FireStorage Plus! A great new FireFox Addon which is officially recognized by Firebug is available from the Mozilla gallery: http://addons.mozilla.org/en-US/firefox/addon/firestorage-plus/ This plugin extends Firebug to give you the functionality you need. As with Firebug itself, FireStorage Plus! is currently under heavy development so new features come out every couple of days… It is stable and … Read more
Firefox provides console.trace() which is very handy to print the call stack. It is also available in Chrome and IE 11. Alternatively try something like this: function print_call_stack() { var stack = new Error().stack; console.log(“PRINTING CALL STACK”); console.log( stack ); }
Firefox’s native developer tools have come a long way since this question was written. The differences have mainly reduced to the following points: Can’t stop the script execution on DOM mutations, XHRs, or cookie changes. XPaths can’t be copied. Missing an events side panel in the Inspector (though events are displayed within the DOM structure). … Read more
Wireshark, Firebug, Fiddler all do similar things – capture network traffic. Wireshark captures any kind of network packet. It can capture packet details below TCP/IP (HTTP is at the top). It does have filters to reduce the noise it captures. Firebug tracks each request the browser page makes and captures the associated headers and the … Read more
As of Firefox version 50, it seems that Firebug will no longer work as Mozilla are migrating to Firefox Devtools. The tab Tools/Web Developer has a ‘debugger’ option. See this page for a discussion on the migration. Read all the posts dated 19 November for further information. It seems to me that the option gives … Read more
In Chrome’s Dev tools, the styles of a pseudo-element are visible in the panel: Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclaration object: getComputedStyle(document.querySelector(‘html > body’), ‘:before’); window.getComputedStyle document.querySelector
Chrome 15 allows you to change the scope of the console. On the bottom of the console, next to the clear console button, there is a menu that says <top frame> which will give a list of available frames: Firefox has a similar feature currently in development: You can also navigate across frames using the … Read more
You can access IE8 script console by launching the “Developer Tools” (F12). Click the “Script” tab, then click “Console” on the right. From within your JavaScript code, you can do any of the following: <script type=”text/javascript”> console.log(‘some msg’); console.info(‘information’); console.warn(‘some warning’); console.error(‘some error’); console.assert(false, ‘YOU FAIL’); </script> Also, you can clear the Console by calling … Read more