It would be extremely helpful for developing Firefox extensions if I could see the source of, e.g., chrome://browser/content/browser.xul with overlays applied. Is there a way to do this? Chrome List and "View Source" show only the base structure, ChromeBug requires restarting the browser and isn't too easy to get working.
All you need is DOM Inspector, and I highly recommend pairing that with Inspect Context which adds an "Inspect" option to the right-click menu of almost everything, much like the "Inspect Element" option of Firebug.
Related
In Firebug, there was just one window and it would become the debug window for whatever page you were on, in the browser. (although you might have to 'enable firebug for this page')
With the built in Dev tools, it seems you need a new window, for each page you want to work on. Can this be changed?
The Firefox DevTools do not have this feature yet, unfortunately. Though it is requested in bug 1219917.
I am quite sure that with the good old Firebug, it was shown in the Layout tab, together with the box-sizing property.
Is it possible to tell in the Web Developer too? There is a Box Model tab which is quite similar to the Layout tab of Firebug, but it does not show this information.
Btw: I thought the built-in Web Developer was built on Firebug, but when reading about it it actually seems that they are two quite separate things.
That feature is currently only available in Firefox Nightly.
I had installed dozen of Chrome Extensions.
But when I "right click" > "inspect element" in Chrome to check my html structure,
I don't want to see anything from Extensions.
here is a simple page debugger view in Firefox & in Chrome.
clear and pretty in Firebug:
chaos in Chrome:
I just need a clear view in Chrome debugger :-(
Till date there is no way to isolate DOM view from Chrome Developer Tools barring Chrome Extensions.
Work Around #1:
I suggest you to Open page in Incognito Mode, where your extensions are (Most probably) inactive this eliminates extension code being visible in DOM.
Work Around #2:
Create another profile for Chrome Browser, where you can find pure DOM View.
I really dislike Firefox DOM Inspector. Is there one that docks to the page so I don't have two separate windows and also highlights the box/margins/padding like Chrome/Safari does? I can't find one.
Firebug is the best tool for web development missions:
http://getfirebug.com/
Once you get used to it, there is also a (Lite) version for Chrome:
http://getfirebug.com/releases/lite/chrome/
Recent versions of Firefox have it built in. Here is how to open it:
Ctrl+Shift+i (Windows)
Command+Shift+i (OSX)
References
Firefox Tool Shortcuts
Using ColorZilla I found an interesting feature. If I pick a color from firefox (bars,tabs or anything else of the browser) and then go to:
ColorZilla > Inspect Last Element > In
Firebug
Then I can see the markup,css,js that firefox uses in the firebug panel just like a website.
Is there any solution to view this code without use Colorzilla?
As mentioned in the comments, Chromebug is no longer working with current Firefox versions. Instead of opening the limited chrome://browser/content/browser.xul page, you can make the browser chrome accessible to the scratchpad. Open the about:config page and set devtools.chrome.enabled to true, as described in the extension development environment setup guide on MDN.
Open the JavaScript scratchpad (Shift+F4) and select the browser context environment. Now you can type in something like window or document.getElementById('urlbar') and click the inspect button or hit Ctrl+i. This will evaluate the expression and open the element inspector, which shows all properties of the element.
It sounds like you're after Chromebug.
Chromebug is the Firebug code adapted
for XUL applications. It is the
debugger that Firebug developers use
to develop Firebug.
So you can debug your debugger, you know?
Instructions: http://getfirebug.com/wiki/index.php/Chromebug
There is actually a dedicated version of Firebug for that called Chromebug (Named after the chrome of Firefox, not Google's chrome)