Today I noticed a small menu in the bottom left of Chrome Inspector. Upon clicking the dots, this menu appears. When you select an option, a tab is open in the bottom of inspector, but nothing changes on the page or in inspector.
Does anyone know what this menu is used for?
You've just discovered like 8 new worlds of DevTools features, my friend.
That whole section is called the Drawer. It's collapsed in your screenshot, which is why it seems like nothing is happening. Press Escape to expand it. You should be able to drag the bar to the right of the Search tab to adjust the Drawer's height.
Each of those menu items represents a different tab in the Drawer.
P.S. the Drawer collapses automatically when you're on the Console panel, if you also have the Console Drawer tab open. Otherwise DevTools would have to make sure that the two UIs stay in sync.
P.P.S. the Drawer should probably auto-expand when you click on a menu item, since you obviously want to use that tab. I think that's fixed in later versions of Chrome but I'll file a bug report if not.
I'm on Chrome Version 41.0.2272.101 m (newest), and this update is messed up. They put it, when you have inspector open, that any DOM change will flash with purple on the changed element (like in Firefox), but now I cannot inspect any hovered object (also like in FF, which is why I don't like to use it when doing front end developing).
I'm talking about js triggered events, like superfish for instance. Before, I could hover the menu, and cover the menu with the inspector, and the menu would stay opened, and I could go in the inspector see what pseudoelements are created, change the paddings and such directly, and see the change. Now, when I hover the menu, and right click to inspect it, the menu closes, and I cannot inspect it!
I tried dragging the inspector over, but nothing helped. This new 'feature' is annoying as hell. Is there a way to inspect js triggered events, without putting break points on elements (which works, but is kinda pain in the ass)?
Hover over the element with your mouse and press F8 (this will only work in Chrome) to pause the script execution. The hover state will remain in visible to you. If you're on a Mac, you may have to open system preferences and check off "Use all F1,F2,etc" check box (Or simply use fn + F8).
Sometimes it only works if you are in the Sources tab of the inspector.
*Yes, you should be in the source tab and MOST IMPORTANT is you should close all the opened tabs in the Sources tab before you press F8(win) or Fn+F8(mac). *
Depending on the menu element type, I ran into this issue with drop-down input menus. The reason it's disappearing when I inspect it, is because a blur or focusout event is always triggered on the element when I click anywhere outside the element.
One way I was able to inspect the element is to prevent these events from being triggered is by removing their event listeners:
Inspect the input element on Chrome
Go to the Event Listeners tab and remove the blur or focusout event
Once the event listeners are removed, you can open the menu and inspect it without disappearing
In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:
then find & check the "Emulate a focused page" option.
Update: as noted in comments, this option is now in another place. See this answer.
On Mac, you can press cmd+\ to pause the script after having opened the dropdown. You can then use shift+cmd+c to inspect elements.
Adding to "In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:" above;
In Chrome 86 and above you can find "Emulate a focused page" option here:
DevTools >> Elements >> "Kebab" menu (3 vertical dots by the settings cog) >> More tools >> Rendering.
Alternately: With Devtools open: Hit CTRL/CMD+SHIFT+P to open the command menu HUD, enter "emulate a fo" to narrow the search results and enter (or click) to toggle the setting.
Now, when I hover the menu, and right click to inspect it, the menu
closes, and I cannot inspect it!
I faced the same issue and what I used was Expand recursively option on chrome dev tools:
The steps are:
Inspect the dropdown field
Find the dynamic DOM (the purple highlight)
Right-mouse click on that dynamic DOM
Choose Expand recursively:
We can see all elements are there
Here is a demo:
In Firefox
In Inspector, right click on a node that contains the dropdown, select:
Break on... > Subtree modification
This will pause execution the moment dropdown is... well... dropped down.
Only way that would work for me was doing setTimeout(() => { debugger }, 3000) in the console and opening the dropdown while timeout was running.
Pressing pause button in dev tools UI or F8 key to pause script execution would both close the menu.
I just used emulate a focused page and it worked like a charm
go to settings
go to more tools
find Rendering
find "emulate a focused page" and click the radio button
voala now you can inspect your select element
You can set an interval that writes out the content of a given element in the JS console every second. Drop this in the console and open the dropdown.
setInterval(() =>
console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)
None of the above referred remedies worked for me.
As our drop down (React based) will close on any single click (right or left)
So we found out the below workaround:
In Chrome Open developer tools
first click on the drop-down in collapsed state & let it expand with options
then under the element section, right-click on the div node (make sure not to left click before right clicking), which contains details of the drop-down items
Then select option 'Expand Recursively'
Then required details were shown
I think you can use the CSS Editor in Chrome to apply a state, for instance, the state of 'hover'.
In the Developer Tools, you select an element. On the right hand you have a square with an arrow over it. Click that and you can choose a state. For instance, pick hovered and you'll see both your window and your CSS update as if the element is being hovered right now.
On Windows, press F12 first, at the page with the menu, then point your mouse to the element menu (the menu will drop down), then press CTRL + Shift + C. Now you can inspect all the elements.
in my case i do following steps
Open developer tool or inspect page
click three dot button at top right
click on More tools -> Rendering
then check on Emulate a focused page option.
Google created new project based on javascripts. http://hyperlapse.tllabs.io/
Engine creating timelapse video but not generating it as visible video file.
How to get it? Only save from screen by desktop video grabbers?
Ok, I found a way, but its complex.
fist things first though, it wasn't actually made by Google, but by T+L labs using the Google Maps API and JavaScript.
Now, to the interesting part:
You're right when you say that there is no pre-made way to save the output video, so you have to mess around with the source code (to remove the overlays) before using screen capture.
What you will need:
Google Chrome
Screen capture software
Windows Live movie maker
Steps:
First, create your hyper lapse like you normally would.
Once you are ready to export, open 'inspect element' (in most browsers the default key is 'F12')
A window with lots of text should pop up. drag the edge out to enlarge the window.
Move your mouse down over the coloured text. As you do this, different parts of the page should highlight themselves in blue one at a time.
What you are seeing is an automatic system; when you hover your mouse over the code for an object on the site, the browser highlights it for you!
Move the mouse around until you find the section that highlights the scroll-bar at the bottom of the page.
Click once to select it, then press delete. The scroll-bar should vanish.
Repeat steps 6-7 for all the other things on top of the hyper lapse itself.
You should now have a clear space to record!
Finally, before you record, press 'F11' to maximise the window, removing the navigation bar at the top.
Activate your screen capture and record the hyper lapse through (Note: make sure the mouse cursor is off-screen whilst you capture)
Press 'F11' again to regain the navigation bar, and then 'F5' to refresh the page and get the removed objects back.
Use Windows Live movie maker to edit the capture down to the correct section, then export as a high quality film.
You're done!
I have a very simple Chrome extension which produces a bubble pop-out in the top-right of the screen. In the bubble I present the mobile version of our site.
Currently when the extension icon is clicked the bubble pops out and the mobile homepage loads. The user can click around within the bubble and use the mobile site as they wish.
However, once the user clicks outside the bubble is closes. Clicking again repeats the above process.
I wondered if there was a way to make the bubble pop-up/out persistent? So, instead of it disappearing when the user clicks elsewhere it stays loaded until the user clicks the extension icon again. This way the button acts as an on/off switch rather than a single event trigger.
Is this possible, and would someone mind directing me to the code which would help me do this?
As stated in the FAQs, this is not possible. However, chrome.windows.create may meet your needs.
My apps pops up a dialog. Users usually want to switch back and forth between this dialog and the application window for a period of time. I want this dialog to stay on top, so that it doesn't get hidden behind the main application window. But at the same time I want the dialog to have a minimize button so that it can get out of the way if it's not needed for a while.
Here is what I've tried:
use a modeless JDialog - the dialog stays in front nicely, but it doesn't not have a minimize button, and it doesn't have its own taskbar button either
use a JFrame - the dialog now has a minimize button and its own taskbar button, but when the main window gets focus the dialog is hidden behind it.
use a JFrame and add WindowListener.windowDeactivated() { this.toFront() } on the dialog. The problem with this is that toFront() also sets the focus, so that you get a weird focus flickering effect.
use a JFrame with setAlwaysOnTop - this is the neaerest solution, but now the window will stay on top of all other applications, not just my application.
It would be easy if toFront just brought the JFrame to the front without changing the focus, but unfortunately that is not the case. Is there another way to change JFrame Z-order?
edit: It just occurred to me that if there were an easy way to "roll-up" a JDialog, i.e. minimize it but not to the taskbar, that would solve my problem too.
Why not listen for the focusGained event in the frame and then use setZOrder/toFront on the dialog at that point? (Not sure this will work but worth a shot).