I'm having a hard time debugging my Firefox extension (popup). Whenever I click on the debug pane, the popup closes and all the information in the debug pane is gone. This happens when trying to inspect the network requests, copy something from the console, or look at the element styles in the inspector.
I'm sure other Firefox extension devs have encountered this problem. How did you solve it?
You can disable popups closing when something outside of it is focused from the add-on debugger toolbox: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging#Debugging_popups
Related
I want to inspect an element in a website, but when I perform a right click the menu opens up. I dont see an option to Inspect. How can I inspect an element here.
Thank you for the help.
One solution would be to disable Javascript using one of many available plugins.
Another is to simply open developer tools and navigate to that element. There are few ways to do it:
press F12 (Works for Windows, Mac, Linux)
Menu → Tools → Developer tools
press Ctrl+Shift+I (works same way F12)
If on MacOS, press ⌥⌘I
I used this answer for reference, but improved.
Open Chrome DevTools
Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS).
Open the Command Menu
Press Control+Shift+P or Command+Shift+P (Mac).
Start typing javascript, select Disable JavaScript. JavaScript is now disabled.
Now when I right click on the element, I no longer see the Menu option. I can now inspect the element.
To re-enable JavaScript:
Open the Command Menu again and run the Enable JavaScript command.
Close DevTools.
Referenced link
Chrome debugger paused Photo
Hi need help I encounter this problem that when i edit some code in scss the source keeps opening and it state that debugger is paused. I need to click it before it apply the code
If you scroll down the right panel, you should see a Breakpoints section. Uncheck all of the entries below this section and you should be fine.
See: https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
I'm trying to get a Google Chrome Extension to run as a Firefox Webextension. My original Problem is that the popup has no height. Besides that I could not for the life of me figure out how to inspect the DOM of the popup.
Btw the popup is just an HTML file and it is defined in browser_action.default_popup.
The bugs referenced in #minj's comment above are resolved in recent versions of Firefox. You can debug popups now. MDN explains it well; in brief...
enter about:debugging in the URL bar.
In the left-hand menu, click This Firefox (or This Nightly).
click Inspect next to your extension to open the "Extension Toolbox".
Check the option to "Disable Popup Auto-Hide" in the Extension Toolbox
then you select which HTML document you mean to debug (in this case it would be your popup HTML code) using the context switcher ("select an iframe as the currently targeted document")
After doing this, the popup stays on the screen and the inspector contains its HTML. I'm doing it now for the first time (in Firefox 49) and it's working well.
It's not currently possible since the popup closes automatically and there is no DOM view available. See bug 1236944 and bug 950936.
Popup sizing does not seem to work correctly in Firefox. There are a bunch of bugs related to it.
I am trying to access web elements in a child window in IE8 browser.
I am not able to access any of the element in that child window, I tried Developer tools (F12) in browser, macros to get X path, page source to get ID/name for the elements but nothing is working there. Could some one help me please
What do you mean by :-
nothing is working there?
Be specific.
You can open the website in Firefox or some other advanced web-browser to get the element's selectors and later run the automated scripts using IE 8 driver.
Check the code in the answer provided for a similar question -
Java: focus is not on pop-window during window handling
EDIT: Other approaches--
Try the following steps (Manually):
Open main page, hit F12 to open developer toolbar.
Perform action that opens the popup.
Focus on popup and hit F12. You should see a developer toolbar.
Check this screenshot - http://snag.gy/pPXLX.jpg
As an alternative you may also try getting the URL of the popup and open in a new tab in the main browser window and then do F12 to inspect any elements.
I have set up the following in my angular app
I have an image with the following ng-mouseover and ng-mouseleave events tied to the image tag
<img ng-mouseover="infoIconStyle={'height':'50px','padding':'10px'}" ng-mouseleave="infoIconStyle={'height':'0','padding':'0'}" src="images/info-icon.svg" />
These mouse over events are then sent to the following div
<div class="dataBoxInfoContent" ng-style="infoIconStyle">{{description}}</div>
Therefore when ng-mouseover is triggered the dataBoxInfoContent div opens due to the height going from 0 to 50px and when ng-mouseleave is triggered the div closes again.
However for some reason ng-mouseleave is not trigged when the mouse leaves the image and this is only in Google Chrome. All works fine in internet explorer and mozilla firefox.
Anyone know why this is the case?
I had a similar problem with Chrome and eventually tracked the issue down to a specific Chrome Extension (for me, it was the AngularJS Batarang extension).
If you have any javascript-profiling extensions, the slowness that those add to your page can sometimes cause unusual behavior in events (in particular, the mouse-movement events).
In the "Profiles" tab of the Chrome debugger, use the "Collect JavaScript CPU Profile" to find out which scripts, if any, are hogs, and then if you hover over the script on the right, it will tell you which chrome extension the hog is a part of.