Firebug for Firefox had Breakpoints on DOM (HTML) Mutation Events. Firebug was merged into Firefox developer console. I don't find the feature in the Firefox developer console, can someone help me with that?
Found this:
"You set a DOM Mutation Breakpoint in the Page Inspector. Navigate to the DOM node in which you are interested and use the context menu to set the breakpoint."
"
Attribute Modification
Execution pauses when any of the elements' attributes are modified.
"
from
https://developer.mozilla.org/en-US/docs/Tools/Debugger/Break_on_DOM_mutation
Related
Firefox 31 broke my Googlebar Lite extension, and I'm trying to debug why. My problem is that mouse clicks no longer register for search suggestions that appear in the auto-complete popup menu (which comes as a part of the Firefox autocomplete textbox control). I'd like to inspect these chrome elements with DOM Inspector, but the popup closes (destroying the anonymous children) before I'm able to inspect them.
How can I inspect a popup element (in this case it's a panel) without it disappearing? Is there a way I can force that kind of element to stay open so I can examine its children?
Inspecting the autocomplete DOM would require hacking deeply into the autocomplete code to avoid making it destroy items before inspecting.
While possible, I'd first look if the autocomplete code changed, so I tried:
Finding the result interface on MXR: http://mxr.mozilla.org/mozilla-central/source/toolkit/components/autocomplete/nsIAutoCompleteResult.idl
Checking the log: http://hg.mozilla.org/mozilla-central/filelog/de8c0f0e74a2/toolkit/components/autocomplete/nsIAutoCompleteResult.idl
Checking out the newest changeset(s) and bug(s).
And indeed, Bug 754265 amended the interface.
So I implemented the interface change, implementing the new API method, and after that the broken stuff works again:
getFinalCompleteValueAt: function(index) {
return this._results[index];
},
I made a pull-request for you.
Also try installing addon "Element Inspector" it allows you Shift + Right Click anything and it pops it up in "DOM Inspector"
https://addons.mozilla.org/en-US/firefox/addon/element-inspector/
I know Chrome's inspector has a selector to choose which frame to use with the console. Firebug has a similar command, cd(window.frames[number]). Is there anything similar in Firefox Devtools? I suppose frame.window.eval could work, but only if it isn't cross-domain.
I was also wondering if there is a highlighter to inspect results of Web-console commands, for example document.getElementsByClassName(...). but you can at least change style of an element programmatically to 'see' it.
DOMNode objects do highlight in the page on hover in the web console and what is called the "variables view". The "variables view" is used in the web console too when you click on an object to see its properties (it's the sidebar that appears), and is also used in the debugger when paused at a breakpoint (right sidebar that contains the various scopes variables).
So, anytime a DOMNode appears in there, if you hover over it, it will be highlighted in the page.
When it comes to iframes, the webconsole does support the cd() command, see working with iframes.
We are also actively working on a bug that will add a drop-down to the toolbox whenever there are frames/iframes in the current page and allow you to easily switch from one to the other.
You can click to inspect a node in the console and debugger starting in Firefox 29, currently on the Aurora channel.
Can someone tell me where can I find the ids of browser elements in Firefox?
I want to put a menupopup in the web developer section in Firefox and I need an id to put into the insertafter attribute.
You can see all the IDs in the source code of browser.xul as well as its include files like browser-sets.inc. Alternatively, you can inspect the browser window at runtime using the DOM Inspector extension.
The web developer menupopup can be found in:
http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser-appmenu.inc#144
<menupopup id="appmenu_webDeveloper_popup">
<menuitem id="appmenu_devToolbox">
...
Alternatively, If you have DOM Inspector, open it and go to menu:
File->Inspect Chrome Document->chrome://browser/content/browser.xul
(browser.xul should usually be the first item (1) with the same title as the browser's taskbar or current tab).
Then search for ID=appmenu_webDeveloper_popup. Many of the other menus can be found at ID=mainPopupSet.
Also, this scratchpad snippet lists the IDs of child elements contained in the web developer menupopup (set scratchpad environment to browser, execute as display to output the result ):
var webdev=document.getElementById("appmenu_webDeveloper_popup");
var idList=Array.prototype.slice.call(webdev.children).map(function(node){
return node.id;
}).filter(function(id)id);
idList.join("\n");
I am trying to use Webdriver to test a location aware website and would like to programatically (using WebDriver API call) click on the "Share Location" button that pops up when I click on a link to the location aware part of the web application.
It is a browser prompt and does not seem to be a DOM element or javascript popup element.
In case anyone is interested in knowing...
I don't believe you can use the webdriver to click that button since it's not in the DOM (ie. not part of the web document) as suggested by other answers. However, you can create firefox profiles to manipulate geolocations or change the "Share Location" setting to "Allow" in Firefox.
See the following link for more info:
http://selenium.polteq.com/nl/change-geolocation-in-firefox-with-selenium-webdriver/
You should start Firefox manually once - and select the profile you use for Selenium.
Type about:permissions in the address line; find the name of your host - and select share location : "allow".
That's all. Now your Selenium test cases will not see that dreaded browser dialog which is not in the DOM.
You can try locating by xpath //input[#value="Share Location"] is it is an <input type=button>, or probably you can try //button[contains(., "Share Location")] if it is a <button> element
I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.