This is the Firefox error page when you're offline. If you look at the red marked area, you see the svg background and some scripts are loaded from chrome://browser/content/.... What does chrome do there?
Firefox uses the chrome:// protocol to access Mozilla's chrome system - user interface elements and other resources (chrome is not referring to Google Chrome here).
From developer.mozilla.org:
What is chrome
Chrome is the set of user interface elements of the application window that are outside the window's content area. Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.
Using a Chrome URL we can access those elements with a browser.
For example, we can access the library menu with:
chrome://browser/content/places/places.xul
and the extensions menu with:
chrome://mozapps/content/extensions/extensions.xul
(URLs taken from http://kb.mozillazine.org/Chrome_URLs)
So, it seems that the chrome://browser/content/.. links are fetching Firefox resources needed to display the error page.
Related
I have a html file along with CSS which gets properly loaded in Standalone FireFox browser and also in Web Preview control(Chromium ) for Chrome. Same script does not show up rightly in on GeckoWebBrowser. CSS is not taking effect.
Buttons which are to be stacked vertically are all displayed horizontally aligned.
Currently Ia m using Chromium for Chrome and GeckoFX for Firefox.
Please suggest any other latest web browser control which can be used for Firefox.
Please suggest what could be wrong.
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.
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)
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.
Is there anything for IE that would allow me to edit attributes of DOM elements live, like Firebug does for Firefox? So far, I have only found DOM inspectors - Developer Toolbar, DebugBar, Firebug Lite. None of them allow editing the elements, only looking up/highlighting them :(
What about
IE WebDeveloper
IE WebDeveloper is an add-on for
Microsoft Internet Explorer. The rich
web debugging toolset allows you to
inspect and edit the live HTML DOM and
current cascaded styles, evaluate
expressions and display error
messages, log messages, explore source
code of webpage and monitor DHTML
Event and HTTP Traffic.
IE DOM Inspector
IE DOM Inspector is a plug-in for
Microsoft Internet Explorer that
allows you to inspect and edit the
live HTML DOM of any web document.
I use IE developper toolbar for IE