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)
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 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
I have just installed Glimpse, and in Google Chrome I am missing a lot of the UI icons (eg, the '+' signs to expand the blocks of details).
Any known fixes? I use Chrome for development as I find it runs faster than FireFox and IE, so it is a bore to guess where the icons are.
Also, no close button for the debugger, and the eye doesn't show when 'minimized'.
#awrigley What version of chrome are you using (currently we have been testing against Chrome 11, Firefox 4 and IE9)?
Also can you navigate to www.yoursite.com/Glimpse/glimpseSprite.png? If you can get to that endpoint can you "Inspect Element" on where you expect the buttons to be and check what chrome thinks the image URL(...) in the style is set to.
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.