MacOS – Problem using F12 to get specific info on the screen

keyboardmacbook promacossafari

I hope I will be able to properly give my question as I am not a native English speaker and I might be running into difficulty. But I am posting an image to make my problem straight forward.

I’m new to Mac. Had my Mac Book Pro for roughly 1 month. I ran into a specific problem that I just could not solve.

I’ll start out with how I solved the problem in Windows. And my question is how I should have done it in OSX Mavericks.

I had specific instructions from someone to visit a website and prepare a print screen.
So I went up on the website with Safari and wanted to start print screening as per my instructions. In order to make my print screen more legitimate – according to my instructions – I had to press F12 and on the lower part of the monitor I should have gotten a window where I could choose from different options. I had specific instructions what to look for in the window that popped up with the F12 key.

I looked through many websites but couldn’t find a solution to my problem as my F12 key didn’t function as it should have in Mac. I tried altering the function keys in the keyboard settings but that didn’t work either. So in the end I took out my old Windows laptop and solved the problem with that. Mind you the correct window that I needed for my specific purpose did not pop up in Firefox or Internet Explorer. I needed to download Google Chrome. (The window that popped up in Firefox and Explorer with the use of F12 did not give me the options I needed).

I hope someone has the patience to read through the above. Also please take a look at the attachment I provide. I would need to reach the same result on my Mac Book Pro as I did in Windows. I do not know what the pop up window is called. But I’m sure someone who is more computer literate than I am will definitely know.

In the attachment provided I am looking to get the window which is on the lower one third of the picture that has “Elements, Network, Sources, Timeline, Profiles” etc.

Thank you for your help.
Gabi
for stack exchange

Best Answer

In Chrome, right-click anywhere on the page and select Inspect element. This will bring up that window on both Mac or Windows.

Alternatively,

For Windows:
Click on the menu (the little button on the top-right, with 3 orange horizontal lines in your screenshot). Click on Tools > Developer tools.
or
Click Ctrl+Shift+I

For Mac:
Click on View > Developer > Developer tools
or
Click command+option/alt+I


If you want the F keys to work more like Windows, follow these steps:

NOTE: After following these steps, I was still unable to bring up the Developer Tools using F12 on my Macbook.

  1. Go to System Preferences. Click Keyboard. On the Keyboard tab, check Use all F1, F2, etc. keys as standard function keys. You will now have to press the fn key to make the F keys do what they show in their pictures. For example, you will have to press fn+F11 and fn+F12 to turn up and down your speaker volume (or at least thats where the volume controls are on my Macbook).

Step 1

  1. In the same window, click on the Shortcuts tab. Uncheck any shortcuts that use F keys.

Step 2

Your function keys should now behave more like Windows function keys, though not always exactly the same.

Related Question