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
Related
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.
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've been trying to figure out how BrowserStack has added Firebug Lite as an extension to IE 7/8 but cannot seem to find anything that does this. See the image below and note how Firebug icon appears as button in the toolbar.
Can anyone tell me how to do this? I know how to add it to my Favorites, but I want the icon to appear in the toolbar along with the other buttons (by going to Tools -> Customize Toolbar)
It's a Browser Helper Object. The development steps are to add the icon, bind the click event to the browser, and inject the script content.
References
Mozilla ActiveX Control
Chrome Frame ActiveX Control
Browsium Catalyst FAQ
Measure Page Load Time BHO
Button Demo BHO
Building Browser Helper Objects with Visual Studio 2005
Customizing Internet Explorer with User Stylesheets
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)
This is probably one of those questions with an obvious answer, but when I customize a form in CRM it appears in a pop-up without toolbars.
How can I enable the IE toolbar so that it will enable me to easily determine the html elements I need to manipulate in the Javascript?
I'm using IE7 by the way.
Cheers,
Peter.
Hit F11, copy the full url, open new IE window (with toolbars and such) paste url.
Also, make sure that under Settings->Administration->System Settings->Customization "Open Microsoft Dynamics CRM in Application Mode" is unchecked.
Application Mode will always try to hide toolbars and menus.