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.)
Related
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.
The utilities tab in Xcode isn't showing up, it's just not appearing. When I stopped working on it a few hours ago, everything was fine. As I'm opening it now, the tab (the one on the extreme right) isn't on the screen. How do I get it back?
There is Hide or Show Utilities option box is there on the right side First of the XCode.If you click that it shows you and again if you click that it hides the utilities.Also see the below screenshots
When I click the Hide Or Show Utilities box,It opens
Now Again When I click that It hides the Utilities
Click on top right corner to show or hide utility, It looks like below image
Click right most button!
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! :-)
It's currently docked to the bottom of the browser.
I know it can be split into a separate window, but I wanted it docked to the side of the browser instead.
Click on the gear in the lower right of the inspector. Check the Dock to right option. You may have to update to the beta/dev channel for the option to be available.
Update: The option is now in the lower left of the inspectors toolbar.
Just wanted to tell that for Google Chrome 24 the dock to right have been moved to the bottom left. You have to hold down the icon.
Take a look at this chrome issue: http://code.google.com/p/chromium/issues/detail?id=154199
At the top right of the inspector, click the button with the three dots:
A subwindow will appear. There are three buttons beside the text "Dock side"; click on the third:
That's all.
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: