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.
Related
Is there a way to keep Firebug on a single page, so that when I switch pages it remains on the page I want it set to?
For example, I'm working on a project and I get an error that I want to search for on Stack Overflow, but when I navigate here, the console changes to reflect this site. I'd like to stop that from happening.
There is no option to "pin" a page's data in Firebug (as of version 2.x). As far as I know this also doesn't work in any of the browser built-in dev tools.
Though the simple solution for your problem is to open the other page in a separate tab or window. Doing so keeps all the data of the page saved when you switch back to the tab containing your project's page.
Note that Firebug's activation model is based on URLs following the same origin policy. I.e. if you open it for your project's page, it will always get opened for your projects page, even on other tabs, but not for any other site.
I've found it useful to split the tab of interest off into a new window and to activate Firebug on that window. That way I can continue using my original tab collection/window without it changing as I link-hop.
I am using Selenium IDE to test some behavior in my FireFox SDK Add-On. For example, I load a page and determine that the content script is executing at intended. In my plugin, I use simple-prefs to set some user defined preferences.
For example, I would like to load a page and then ensure that if a preference is changed, that the content script received the update and made the necessary changes to the page based on the new setting.
when I try to navigate with Selenium-IDE to the plugin configuration page chrome://mozapps/content/extensions/extensions.xul?type=extensions / about:addons. I am able to use Selenium to select an entry (<richlistitem />), but I cannot click any of the buttons within the entry because they are not part of the XUL dom. I have tried using Selenium to send enter, tab, clicks, double clicks to the appropriate <richlistitem /> but there is no way of interacting with the "inner part" of the item.
I have also tried going down the path of using selenium to modify entries via about:config, however, the area with all of the entires is just an XUL <treechildren /> and you have no way of targeting individual entries.
Is there a convenient way to change addon setting as part of an automated workflow with selenium-ide?
It seems you should use Selenium Web driver , by driver you can set preference
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 have a very simple firefox addon that essentially just displays the total number of open tabs.
So far it works beautifully, however after right clicking on the toolbar and selecting Customize… it only shows the default text until a tab is opened or closed.
i presume that i need to add an event listener for this event and call updateWidget(), however i can't find it in the API doc. So does anyone know how to do it?
Verified as bug, see : bugzilla.mozilla.org/show_bug.cgi?id=773297
I am learning chrome extension by example. Here is the example I currently learning: http://www.chrome-extensions.net/extensions/mappy/
There are three JavaScript files in this sample project: background.js mappy_content_script.js popup.js.
"mappy_content_script.js" is shown in the Combo box of Scripts tab of Developer Tools.
"popup.js" can be found if I right click the extension icon and choose "Inspect popup".
The problem is I can't debug "background.js" or find it in the Developer Tools. I tried insert "debugger;" in this JavaScript file. I also tried use profiling tool to record the script execution. However, when I click the link of "background.js", a blank page shows up.
Is this a bug of chrome or did I miss something? Thanks
background.js is loaded in the background. To inspect it visit chrome://extensions, find the loaded extension, and "inspect active views" for the background script.
Edit
Below is a screenshot of the chrome extensions page. A click on the link background page opens the background page for this extension.
Additional information
EDIT 2020
Here is how you can see the content scripts and debug,
Nowadays you have to install a Chrome extension to allow you to inspect the view of a page, specifically the Develop and Debug Chrome Apps & Extensions
There is an easy way to access your extension code in DevTool and debug it.
Open the DevTool (e.g. F12) , click on "Sources" tab
then look for "Content Scripts" menu next to Page , Filesystem, Overrides etc.
and click on it .
you should see all active extensions listed there and you can easily add break point to each js code and reload the page to debug through