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.
Related
I use google chrome and I used to have a console at the bottom of the page where I could edit the CSS of the loaded page. Now that has disappeared and instead I have to the right another panel, now I want to old one back where I could make liv changes to the CSS. How can I solve this problem?
With the keyboard:
Esc to close the drawer (the sub-menu with this console view.)
Ctrlshiftd to toggle the dock (main menu) between side and bottom display (Meta keys vary on OsX)
Or enlarge the docker window by pulling left until you can see these in the top right:
(the left icon is the drawer you want to hide, the right icon is the dock you want moved, the middle is the settings which includes the keyboard shortcut info.)
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.
I recently noticed a very weird problem with VoiceOver's web navigation on tabs and tab panels. In particular, if the wrapper wrapping the tabs and tab panels has attribute aria-label set, then VoiceOver navigation cannot navigate to tab panel when switching tabs.
The problem may be hard to describe by words, thus I created this fiddle to demonstrate. Notice that the outside wrapper div has aria-label="Wrapper". Below are the steps to recreate the problem:
Run the jsFiddle to get the result area loaded.
Navigate to one of the tab buttons either by using mouse or keyboard navigation.
Activate VoiceOver.
Use VO + Right Arrow to try to navigate to tab panel content, this should work.
Use VO + Left Arrow to navigate back to the second tab, press VO + Space to activate the tab.
Now using VO + Right Arrow try to navigate to the new tab panel. This will fail.
After the above steps, switching between tabs doesn not fix the problem, you cannot navigate to the panel whatsoever. But if you remove the aria-label="Wrapper" from the wrapper div, everything works again.
Does anyone familiar with VoiceOver and WAI-ARIA know where the problem might be?
If the two tabs contain just the strings "Tab panel 1" and "tab panel 2", then the issue appears to be fixed. Tested with OS X 10.11.1.
Yes, I know that the question is pretty old, but I'm adding my answer for future reference, just in case! :-)
I want to give demo to some person of my web application so i want to capture screen without Address bar so that they will not know the domain, can you please tell me how to hide address bar or can i hide domain . I have latest chrome and Mozilla
Cheers
I'm using a self-written stylesheet to achieve that purpose for Firefox.
It hides the complete top-bar and appears when hovering over the top window-border, or focusing the address-bar with the key-combination Ctrl+L.
It's not perfect (e.g. there can be a flickering effect when focusing the address-bar, or after clicking the hamburger-symbol to open the menu, you need to use the Arrow-Down-key for selecting a menu-item) but works for me:
https://github.com/ida/skriptz/blob/dde60dadcca5bb45ce6ca14bb74373637f31a309/setup/browser/ff/userChrome.css
F11 really maximise the window. But if you move your mouse (or presss any key), the navigation bar reappears, thus revealing the URL again !
For hiding URL
Firefox: View -> Toolbars -> Untick "Navigation bar" Toolbar
Just for the record and for defending my necromancer badge:
For Firefox: The addon "Hide Navigation Bar" worked till version 52 came out. I don't know of any other method of hiding it.
To hide the Tabbar, the addon "Hide Tabbar" should still work. I guess it will continue to work until November 2017, when WebExtensions will be the big deal and probably break a lot of old addons like e.g. TabGroups. Just read the first few comments on the tab-groups addon page, to learn that not everyone is pleased with WebExtensions, and this to learn that probably some legacy-addons are already defunct.
I'm no addon-developer, and don't know if the situation really is that dramatic, but I'll sure miss tab-groups.
For Chrome: User Force has given the ultimate hint here, for hiding everything except the content-area. I'll use it to watch amazon prime video.
In firefox right click on toolbar and uncheck navigation bar, or go to view - > toolbars and uncheck navigation bar. In chrome full screen mode is solution (F11)
F11 hides the address bar in Firefox eventually. Using it a second time will make the bar reappear.
If you only want to hide the address bar, uncheck the menu item at View > Toolbars > Navigation Toolbar.
The tools are opened on the bottom of the chrome window per default. This is a rather bad choice for a wide screen display since there is plenty of empty space to the right but not much vertical space to spare. Unfortunately, I have found no way to reposition the tools. I would like to have them on the side, similar to firebug.
The only option similar to what I want is to detach the dev tools and place chrome and the tools window side-by-side. This is not very convenient for quickly alt-tabbing from the IDE to the browser and back though, so an "integrated" solution would be nice.
Chrome 46 or newer
Click the vertical ellipsis button ( ⋮ ) then choose the desired docking option.
Chrome 45 or older
Long-hold the dock icon in the top right. It pops up an option to change the docking
To change the split between the HTML and CSS panels, go in DevTools to Settings (F1) > General > Appearance > Panel Layout.
Place your pointer on the dock button and long click it (some seconds) or right & left mouse click depending on the browser version.
Keyboard shortcut to toggle the docking position (side/bottom)
CTRL+SHIFT+D
And there are many shortcuts you can see them by going to
Settings » Shortcuts, as displayed here:
Alternatively, use CTRL + ? to go to the settings, from there one can reach the "Shortcuts" sub-item on the left or use the Official reference.
Looks like this is on the bottom left now as an icon with overlapping windows and the "Undock into separate window." tooltip.
After I have placed my dock to the right (see older answers), I still found the panels split vertically.
To split the panels horizontally - and even got more from your screen width - go to Settings (bottom right corner), and remove the check on 'Split panels vertically when docked to right'.
Now, you have all panels from left to right :p
As of october 2014, Version 39.0.2171.27 beta (64-bit)
I needed to go in the Chrome Web Developper pan into "Settings" and uncheck Split panels vertically when docked to right
If you use Windows, there some shortcuts, while devtools are opened:
Pressing Ctrl+Shift+D will dock all devtools to left, right, bottom in turn.
Press Ctrl+Shift+F if your JS console disappeared, and you want it docked back to bottom within dev tools.
The Version 56.0.2924.87 which I am in now, Undocks the DevTools automatically if you are NOT in a desktop. Otherwise Open a NEW new Chrome tab and Inspect to Dock the DevTools back into the window.
In addition, if you want to see Sources and Console on one window, go to:
"Customize and control DevTools -> "Show console drawer"
You can also see it here at the right corner: