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.
Related
How to clear selectin on the timeline?
If I do double click then selection will be expanded to the end of the timeline, but new request still will be filtered out. So only close and reopen dev tools window works for me.
Chrome 89.0.4389.72
Double Click the marker OR Mouse Wheel Scroll Down
Summary
Toggle "Stop Network recording" off and on again to reset the timeline selector. Note: This clears previous network requests, which is similar to #Raf's suggestion to close and re-open dev tools. Toggling "Stop Network recording" is slightly better than closing and re-opening dev tools because it doesn't clear/reset other dev tools context (like Recordings on the Recording tab).
Detail
"Double-clicking" doesn't work
The first animation below shows how "double click the marker or mouse-wheel scroll down" (from the other answer), doesn't work (as #Raf --the OP-- says). It seems to work (double-clicking expands the timeline selection), but any subsequent requests appear outside the timeline selection.
"Toggle Stop/Start Network recording" works, but clears past requests
The second animation below shows how toggling "Stop/Start Network recording" will reset the selector; subsequent requests are all inside the timeline selection.
This clears any previous requests (like closing-and-reopening dev tools will do) but this approach is slightly better -- because any active "Recordings" on "Recorder" tab continue to record.
Sorry if this is not the right place to ask. I looked around and stackoverflow made the most sense to me. Plus it is a question that can be answered.
The specific task that I want to accomplish is I am working on an app in nw.js (it's like electron). To reload the app I right click on the page and the usual context menu comes up (the one with "inspect") and there is an option to reload the page.
When the debugger is stopped on a breakpoint that context menu doesn't show up. So in order to reload the app I have to move the mouse somewhere on the screen to close dev tools and then mouse back to the window to reload it. It makes working so much more tedious and while it only takes a moment it feels like an eternity.
Are there any flags in chrome or plugins or nw.js settings that will save me from doing this 763,000 times a day?
I have the developer tools floated to be a separate window.
It nows takes the entire screen.
I did lots of research to see how to close it, but found nothing related.
Most of the posts are about how to open it.
(I tried CMD + option + i / F12, neither one works).
Also, I wonder how to dock it back into the page. I do not see such
an option under the "..." on top right corner.
Command+Shift+D (Mac) or Control+Shift+D (Windows, Linux) restores the DevTools window back to whatever position you had it in before you undocked it.
You can also change the docking position by opening the Command Menu, typing Dock, and selecting the option you want.
You can also access these options from DevTools's Main Menu. Note: It sounds like you were looking for the options in Chrome's main menu. You won't find any DevTools options there, other than the option to open DevTools.
Anyone know of a way to open Chrome Dev tools to a new window upon open?
I know that I can click F12 and then click the 'customize' button and change orientation or pop out the dev tools window. But that's an extra step, and often a window resize is necessary, and when you do it 50 times a day, it gets to be tedious.
Also, sometimes, on pages I'm testing, pressing F12 will change the layout of the elements on the page and even popping out the dev tools leaves the page layout different than before I opened dev tools. This can make it hard to tell if an element is visible or not, which makes troubleshooting Webdriver more difficult.
Ideally, CTRL+F12 or something to open dev tools as a separate window would be super handy. (to any Chromium devs that might be listening ;) But if anyone has another solution, I'd love to hear it.
If you have your DevTools un-docked, the dock mode, size and position of your DevTools window will remain the same as you previously set it. For example, I just set mine to be maximised on my other monitor. Every time I open up DevTools, it's an un-docked, maximised window, and there's no change to the layout of the inspected window other than the fact it's no longer in focus.
You could alternatively launch Chrome using the --auto-open-devtools-for-tabs flag, which will automatically open DevTools in the dock mode, size and position you had it previously. You can use:
Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
Windows: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
In WebDriver, you can set flags for how Chrome opens. However, after looking into this further, it turns out Chrome currently do not support multiple clients connected to the protocol simultaneously.
As for speeding things up, you can switch between dock positions with Cmd+Shift+D (Mac) or Ctrl+Shift+D (Windows). This toggles between the last two modes you have used, so say you have it docked at the bottom, you then pop it out, using the shortcut now will toggle between the two.
Here's how you do it. On opening the developer tools, with the developer tools window in focus, press F1. This will open a settings page. Check the "Auto-open DevTools for popups".
Originally documented here -- https://newbedev.com/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened.
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