Develop Reference

Detecting UI Elements of Browser Extension using JavaScript

In the Google Chrome browser, I have installed the 'Roboform' extension. This extension creates some UI elements as shown in the below screenshot. See the popup (Localhost) near login username input.
Question: Is there a way to detect 'Roboform' created UI elements with JavaScript?
What I have tried
I tried to use dev tools to inspect the popup element. But I could not see/inspect.
I also tried to detect the extension using other methods. But could not get it to work.

Steps
Ctrl+Shift+I Or RightClick->Inspect to open dev tools
Ctrl+Shift+C Or Click on the Selection Tool
Select the UI component you want with the selection tool.
You can see it is under a closed #shadow-root 'div.overlay-content-mini'
If you want to know more about Shadow DOM, read the following article.
What the Heck is Shadow DOM?
Note: Closed shadow roots are not very useful. Some developers will see closed mode as an artificial security feature. Read more here.

HTML element DIV disappears in Chrome launched by Selenium

I have SPA (single page application) written using Backbone + jQuery and some automation tests (Selenium) and when some of the tests are running they start failing because of a DIV element disappears itself. It disappears just after the last AJAX call is finished.
I cannot find the reasons of disappearing. Does probably someone know what could it be?
The issue is only under Chrome launched by Selenium.
I tried to refresh the page in Selenium Chrome - The issue is still here.
I tried to disable all installed plugins (including Selenium plugin) in Selenium Chrome. - The issue is still here.
I tried to update Chrome. - The issue is still here.
I tried to update Selenium. - The issue is still here.
A few interesting moments:
When I mouse over the place where DIV should be - it SHOWS!
When I try to check the height of the DIV with $('.container').height() - it SHOWS!
I tried to use Chrome launched by myself under Incognito mode. - No issue.
It looks like Chrome forgets to re-render the DOM or that element.

Inspect element without right clicking in Chrome

When I inspect html/css on a website, I usually open the chrome developers panel ctrl+shift+I → right click context menu "inspect" so I can highlight that class
however, sometimes I'm trying to inspect an element that is sensitive to "right clicks" events , e.g. if I right click an item on the website functionality changes
Example:
so I can't inspect an element
Normally I inspect elements like this (e.g. stackoverflow)
How do you inspect an element without using the right click button?
Normally I would have to just dig through the chrome developer's panel elements and just go one by one to find said element, which takes a really long time
I must be missing something important here about chrome's inspect element tools.
Could someone enlighten me here a better workflow / maybe chrome extension tools?

Try pressing ctrl+shift+c. This will open the dev tools in element selection mode, allowing you to left-click on elements to jump straight to them in the elements view.

You can press Ctrl+Shift+C to enter a mode where you can mouse over elements and it will inspect it. With your mouse over the element you want to inspect, just press Ctrl+Shift+C again and your element will be selected in the developer panel.

You can open the dev tools on a different windows and refresh your page or use firebug.
or use Firefox

Chrome dev-tools crashes when debugging iframe contentWindow

I'm trying to debug an iframe's contentWindow, but every time i try to view the contentWindow object on chrome 59 dev-tools the page crashes.
It happens when hovering the contentWindow property on breakpoint or when clicking on the console logged object.
I'm using ReactJS so i created a react fiddle although i don't think that's relevant.
Fiddle to reproduce:
Open the dev-tools
Click "Try-it"
Click the console.logged object.
Is there a way to avoid the crash?

This seems to be fixed on chrome 60 thanks to the new context selection. feature

See what methods/events being called in JS

Got this page which has some javascript on it (very heavy) and I am trying to see what happens when I click a certain element. However looking at the code there is no onclick function - the javascript is several JS files so take far to long to browse.
Is there a way with Firefox (firebug), Chrome or even IE to view whats / log what is happening when I click on an element in the browser?

In firefox (and this is also available in chrome and IE in another form) install addon firebug (if not installed). Go to Tools->Birebug->Open Firebug. Click on Left Icon and ask for tracing.
You can then trace your program.
Another way is to cause a breakpoint when you start, and you manually follow the execution of the script.

Chrome Developer Tools shows all attached event handlers for an element. See the section on Event Listeners towards the end.

#wizzard, try this: firebug - profiling button
ff only, but there is a lite version for chrome for example