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
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.
I am using Firefox Developer Edition and when I had the Inspector open, which is accessed by right-clicking an item and selecting Inspect Element, I then right clicked something in the Inspector and selected Show DOM Properties, which you can see in the screenshot below:
However I cannot figure out for the life of me how to close the DOM Properties window.
How can one do this?
The feature you're referring to is called the "split console." You have it toggled on currently. It will show when a tab other than the console is selected. You can click in the split console, or command+alt+k on OSX, and hit escape to close it, or click on the console tab, or click the button in the top right of the dev tools to toggle it back off. I find it most usefull with the debugger tab. When the debugger is paused, you can access variables within the scope of the breakpoint.
Pressing escape with the DOM properties panel focused should get rid of it.
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 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.
On the above shown asking popup window on Mac, how can I select another button (left button) by using keyboard.
Without clicking mouse button, I want to make left button highlighten.
Is there any shortcuts?
Go to Preferences -> Keyboard. At the bottom, turn on "All controls" under "Full Keyboard Access".
The alternate option will be highlighted with a blue ring. Hitting space will activate this. If there are multiple options, hitting tab will alternate between them.
For English/Mac OSX 10.10:
Go to Keyboard in System Preferences, and then select 'All controls'. Space will select the alternate option if two options. If more than two options then tab will alternate between them.
PS: I would much rather the option of using arrow keys and enter. Interested to know if anyone knows how to hack this?
After reading Tricon's answer, I got the way!!!
Just see the following shortcuts.
Preferences -> Keyboard -> Keyboard & keyboard input (I don't know the correct English menu, I'm using Korean "탭이 초점을 이동하는 방식 변경 (^F7) )
Once you do ^F7 (In case of mac book, Control + fn + F7) on a popup window, you can travel over buttons on any popup windw!!!
Thank you Tricon for giving me clue :)
In Catalina in Keyboard -> Shortcuts press Use keyboard navigation to mve focus between controls. Then you can use Tab to highlight another button and use Space to actually press it.