Hi) I'm developing addon for firefox with kango framework. Can you advise some efficient ways how to inspect DOM in firefox addon popup?
Install this addon - DOM Inspector - https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/
Then install this addon - Element Inspector - https://addons.mozilla.org/en-US/firefox/addon/element-inspector/
"Element Inspector" extends DOM Insepctor addon. Now hold "Shift" key on keyboard, then "right click" and it will open it up in the DOM Inspector tool.
You can also use "Browser Toolbox" - https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
But it doesn't have the very useful "Shift + right click" feature. It has some other goodies, I use all three tools togather.
To inspect DOM in firefox addon press Ctrl+Shift+J.
Click here for more details.
Right click -> Inspect Element
...(1) -> Settings (2) -> checkbox DOM (3)
Related
I want to use Chrome to inspect HTML and view the HTML/CSS affecting an element on the page.
This video shows that in Dev Tools Mode you can click the Elements tab and click the Inspect icon (magnifying glass). But that menu is not there.
I'm using chrome: Version 60.0.3112.113 (Official Build) (64-bit)
The icon is now different and can be invoked via Ctrl-Shift-C or in the toolbar, which is on the top of devtools Elements panel.
(answer provided by commentor above)
Would there be menu icon (or any other shortcut) available for Chrome that allows you to inspect the page HTML and CSS? Firebug provides this inspector element icon in Firefox' main toolbar and I'm using it quite a lot.
Currently the only way to toggle the element inspector glass is by toggling the whole development toolset, and then clicking the inspector, or by right-mouse clicking an element in the page, which is to my opinion far from accurate.
An menu icon (or shortcut - I'm on Mac) that shortcuts the inspector glass would save me a lot of time. Any ideas?
Cmd + Shift + C lets you use the element inspector directly, and opens DevTools if it's not open already.
The edit was rejected for some reason. Cmd + Alt + C seems to do the job for me. Thanks for pushing me in the right direction, Matt.
I have an autocomplete dropdown box for city names as,
When i try to inspect one of the option elements using right click and Inspect Element, the dropdown menu disappears and inspect element takes me to the original page's dom.
How can one inspect dropdown menus using firebug inspect element?
With the suggestions dropdown visible and DevTools opened, press F8 and switch to the DevTools. You will immediately break at the JS blur handler for the field, so the dropdown will not be removed, thus you'll be able to inspect its DOM.
Edit HTML right click menu Chrome Dev Tool
In Chrome Dev Tool you can Right Click on the input where you type the adress, Scroll down to "Break On..." and select subtree modifications.
Go back to your input and start typing. It should Pause the app leaving you with the open suggestions dropdown.
Can't speak for Firefox, but in Chrome developer tools you can trigger a state on an element manually by right-clicking on the element in the developer window, and choosing the appropriate item (i.e. ':hover').
Inspect the dropdown/input element and remove the "Blur" event from the "Event Listeners"
In CKEditor, we have some plugins where we can right-click an element and a dialog is offered up. I need to inspect that menu. I know that Chrome Dev Tools allows you to force the element state with :hover, :active, :focus, :visited but as far as I can tell you cannot force a right click element state.
Is there any way to force the element state to be right clicked?
Set a debug breakpoint during code that is executed while the menu is open. I believe that the command from the menu is executed before the menu is closed.
Otherwise, you can set a breakpoint for 'on dom manipulation'. See: https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-mutation-events
I found a custom theme for my chrome web inspector but I need to make some small changes. Where do you find the selectors for the elements in the web inspector?
In the picture below I am trying to make the expand arrow white so you can see it against the background:
DevTools front end is an HTML page, so you can inspect its elements/layout via another instance of devtools. To do so, undock devtools, focus on its window and hit Ctrl-Shift-I (or Cmd-Opt-I on mac).