I read the documentation about Firefox's page inspector. I didn't find any shortcut for inspecting an element directly without clicking the button 'choose element with mouse'. The documentation for opening the inspector itself even looks to be wrong.
You open it with cmd + option + i on OSX rather than cmd + option + c as described in the documentation.
Using Firefox v24
It seems that Ctrl+Shift+C always open the inspector in "choose element with mouse" mode. [Linux, FF 26.0. Also works in Chrome.]
It's not exactly the same flow as context menu -> inspect element but I find it more useful. The hover tooltip sometimes gives me all the info I need. And it's more reliable — just opening the context menu generates a mouse event while Ctrl+Shift+C doesn't. E.g. with CodeMirror which plays games with invisible elements, using context menu usually lands me in the hidden textarea or fake cursor, while "choose with mouse" mode reliably gives me the styled editor content I wanted to inspect.
Windows: Ctrl+Shift+C.
Mac: Cmd+Option+C.
Ctr + Shift + C and function F12 button is default inspect element button for every browser.
So if firebug isn't installed in your firefox then F12 button is the shortest shortcut for your goal.
I'm not sure about the way you do it in Mac OS, but on windows, if you select the element by pressing tab until you reach it, if you press the context menu key and then Q, you open the inspector on that specific element, like it happens when you right click on it.
I believe the context menu key is not a mac thing, but it seems that there are people that worked around to do it. See this question: How do I open the context menu from a Mac keyboard?.
On Mac (I'm using Yosemite though), it's Command ⌘ + Option + c.
On Linux (Ubuntu 18.04) and Firefox (version 72.0.2) it's CTRL + SHIFT + i , or hotkey F12.
Related
According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/
Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.
Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.
I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.
A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.
Is there a keyboard-shortcut to click the resume button in the canvas on Xcode Previews, instead of clicking it every time?
⌘ command + option + P is what you're looking for.
Quick Answer
Editor -> Previews -> Refresh
Refresh canvas shortcut
⌥ option + ⌘ command + P
Open canvas shortcut
⌥ option + ⌘ command + ↩ return
💡 Automated way to refresh the preview
Note that there is an option called Automatically Refresh Canvas that is enabled by default and helps you to not refreshing it manually again and again.
🎁 How to find ANY macOS apps shortcuts
In almost all macOS apps, you can use help menu to find the submenu item you want (some kind of preview in this case). And it will show you the exact location of the submenu alongside the associated shortcut:
I have searched for preview for this case :)
In Xcode 10, where is the Object Library which shows view and controller objects, code snippets and media that used to appear towards the lower right corner in Xcode 9 and older?
Xcode 9:
Xcode 10:
Shortcuts:
Shift + Command + L: Show Library.
Shift + Command + M: Show Media Library.
Xcode 10 has added a toolbar button to access the Object Library.
From a thread on Apple Developer Forum:
Library content has moved from the bottom of the Inspector area to an overlay window, which can be moved and resized like Spotlight search. It dismisses once items are dragged, but holding the Option key before dragging will keep the library open for an additional drag.
The library can be opened via a new toolbar button, the View > Libraries menu, or the ⇧⌘L keyboard shortcut. Content dynamically matches the active editor, so the same UI provides access to code snippets, Interface Builder, SpriteKit, or SceneKit items. The media library is available via a long press on the toolbar button, the View > Libraries menu, or the ⇧⌘M keyboard shortcut. (37318979, 39885726)
What the existing answers (so far) neglect to mention is that if you hold Option as you summon the Library window — i.e., press Shift + Option + Command + L, or hold Option while clicking the Library button in the toolbar — the window stays open, permanently, until you explicitly close it with its Close button.
It is not incorporated (docked) into the current project window, but it can be used in any project. The point is that it becomes almost a normal window (to be precise, it becomes a normal floating window).
XCode 11 - Object library location
Click on the plus icon on the top right corner of Xcode topbar.
The library can be opened via a new toolbar button, the View → Libraries menu, or the Shift + Command + L keyboard shortcut.The media library is available via a long press on the toolbar button, the View → Libraries menu, or the Shift + Command + M keyboard shortcut.
Library content has moved from the bottom of the Inspector area to an overlay window, which can be moved and resized like Spotlight search. It dismisses once items are dragged, but holding the Option key before dragging will keep the library open for an additional drag.
In Xcode 11 use Shift + Command + L to show the Object Library.
Xcode 12 users can find the same option as the Xcode 11 as written above.
Shift Command L to bring up the Objects/Image/Color and other context-sensitive libraries.
There is also the + sign at the top right of the window titled Library when you mouseover.
This drove me crazy trying to follow a tutorial that was likely written for Xcode 10. Thanks for the rest of those that answered!
I am using Android Studio 1.0.2 on mac.
When fn+F1 pop the documentation, how can I use hotkey to hide it?
(Press F1 again doesn't hide it)
At the top right of the image, I wonder what is the key after Shift?
Use Shift+Esc to close the area.
Just found out Shift + Click on the title bar can hide the tab.
So I guess the icon might not be a key, it means click.
I want to debug a info box that shows when I mouse over a google map marker. But google map disables right click anywhere on the map canvas, so I can't inspect the element for debugging / viewing purposes.
I tried to search for the element by the href content in the elements tab, but it didn't show up on search.
Is there a way to inspect element despite the lack of right click?
Sure, you can open the devtools with Ctrl+Shift+I, and then click the inspect element button (square with the arrow)
On Mac OS you have to press:
CMD+ALT+I
Use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the DevTools in Inspect Element mode, or toggle Inspect Element mode if the DevTools are already open.
So use the short cut keys , Press ctrl + shift + I and then Click on Magnifying Option on Left side and Then Hover the mouse cursor and you will be navigate to proper way
CTRL+SHIFT+I brings up the developers tools.
Press F12 to Inspect Element and Ctrl+U to View Page Source
ALTERNATE WAY:
Click Developer Tools to inspect element. You may also use keyboard shortcuts, such as CtrlL+Shift+I, F12 (or Fn+F12), etc.
On Mac OS press: CMD+OPTION+J for console