How to inspect dialog created by right-click action in Chrome Dev Tools? - google-chrome-devtools

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

Related

Pause Electron with a hotkey or similar

In our Electron app I'd like to use the dev tools to inspect an element that only exists if a parent element experiences a mouseover action.
Whenever I go to interact with the dev tools my mouse has to move and the element disappears.
I know that the Chrome dev tools usually pause script execution with f8. This does not seem to work in Electron. I have also tried forcing the parent elements into :hover and :focus in the dev tools, but this does nothing.
Any ideas please on how to pause execution or force a parent into :hover?
After some more fooling around I found that if I inspect a parent element, right click on that element in the dev tools, and then click on Break on..., and click on subtree modification. I can then get the debugger going without having to insert any debugger; statements into the code.

Not able to inspect/debug Autocomplete option elements

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"

How to programmatically (or via eclipse plugin.xml) enable context menu which is disabled by eclipse IDE?

In CDT, How can I programmatically (or via eclipse plugin.xml) enable the context menu of a project "Build Project" when It is right clicked. So that I can make the Build Action enabled in order to solve this problem.
Please Check this forum link for more information:
https://www.eclipse.org/forums/index.php/m/1709440/#msg_1709440
I have tried MenuManager but it returns the top menu? I want to access the pop-up menu when it is right clicked on a project.
What I experienced so far is I can programatically get the flow of program when I right-click a project via CommonActionProvider by defining a class at org.eclipse.ui.navigator.navigatorContent at plugin.xml under which I have a defined actionProvider. Now at this ActionProvider I can halt at debug when I right click the project first at setContext method via ActionContext parameter. And this is the point where I want to get access to the right-click menu of selection.
I can acess the selection I get it from context at this point and because I right-clicked at it the context menu will hapen but how I get the access to this right click menu programatically ? When I right click the project after selecting it via control button I get now the access to method fillContextMenu with parameter IMenuManager menu but the bug is not at this part so I dont need to do anything at this method. I need the access to right click menu when I right click an unselected project (via holding control button). Any idea?
I solved the bug via an actionProvider (enablement for a instanceof IProject.) Here in the class that I extended from CommonActionProvider at the method setContext I got the command via commandService and getCommand method. Then calling buildCommand.isEnabled(); solved the bug.

Write JavaScript in Chrome developer tools

In Firebug, I can type my own JavaScript in the console tab and execute it. Is there a way to type JavaScript in Chrome Developer Tools and execute it?
Go to chrome://flags/, enable the "Enable Developer Tools experiments" flag and restart Chrome (or start it with the --enable-devtools-experiments command-line flag.)
Open DevTools, go to the Settings dialog, switch to the Experiments tab.
Enable the "Snippets support" experiment, close and reopen DevTools.
Go to the Sources panel. In the left-hand navigator sidebar, switch to the Snippets tab .
Right-click in the [empty] tree in this tab, select the New context menu item.
Give the new snippet any name you like and type the snippet body.
Once done, click the Run (>) button in the status bar to execute the snippet body. You can set breakpoints in snippets and debug them as ordinary scripts.
Step 1: Open Google chrome Dev tool [ Press f12 ]
Step 2: Click on Sources tab
Step 3: On left side panel, Click on Snippets tab (may be hidden, if so click >> and it will appear)
Step 4: To create new snippet click + New snippet or right-click within the Navigator, and then select New
Step 5: Develop your code into middle pane and save it.
Step 6: To run Snippet, there are three ways
A: Ctrl + Enter
B: Click on Run button [ Into Right-side panel, Top-Left button ]
C: Right-click on the snippet filename (in the pane on the left that lists
all your snippets) and select Run.
Recent Chrome
Using Chrome 50, juste open the "Console" tab and start typing and executing your code at the bottom of the console.
Arrow up, recalls the code, ctrl-enter gives you a new line:
You can't debug Javascript, but you can execute it (including jquery) in a REPL in the chrome inspector.
Open the inspector
Click the button at the bottom left with 3 lines - its tooltip is "show console"
Type your javascript and press enter
Note you usually have to go to the Sources tab and click the "pause script execution" button for your javascript to get evaluated.

Adding menu listener for Paste option in SWT Browser

I have a org.eclipse.swt.browser.Browser instance created in a composite. I would like to know when some content is pasted in the browser using the (platform specific) right click context menu and selecting the paste option.
In the menuDetected() of MenuDetectListener, I get a notification when the context menu is detected in the browser.
How can I know if the Paste option is selected from the context menu?
Regards,
Noopur
No you can't access the selected context menu item. There is no direct provision for that. At least not in eclipse 3.7. Although, you could try different combinations of events for determining the menu item. For example, in windows the internet explorer populates the status bar with 'inserts the clipboard...' when your mouse pointer hovers over the Paste menu item, you can capture this using StatusTextListener event.
Note: The hack is not an elegant solution, even if you get it working, there is still some possibility that it may break with new or older releases of SWT or in fact its behavior may vary with operating systems !!