Right click on the part of the web page for which you want to see the source code, then click 'Inspect'.Īlternatively, to open the inspector without going to a particular part, press Ctrl + Shift + I. Cmd + Shift + C to open the Developer Tools in Inspect Element mode, or toggle Inspect Element mode if the Developer Tools are already open. Cmd + Opt + J to open the Developer Tools and bring focus to the Console. You right click and choose the one that starts with 'Inspect'. Shortcuts for Mac: Cmd + Opt + I to open the Developer Tools. To open the keymap settings, choose File > Settings (on Mac, Android Studio. Use the keyboard shortcut Ctrl+Shift+I or select Inspect Element from the menu by right-clicking any element of the page. Also, you can use your keyboard shortcut's - Ctrl+Shift+Q or Ctrl+Shift+C.

How to open Inspect Element in Windows Browsers (Chrome, Firefox, IE): The process for all the browsers is the same in Windows. Default keyboard shortcuts for Windows/Linux and Mac operating systems. Again, right-click a blank area on the page or choose an element, and choose Inspect Element. If you're only looking at the backend, or in the style.css file, you might miss an important piece of code that completely changes how the user will see that part of the page. The best part is it allows you to see what's going on in the final render of the web page. It's something I use probably more than any other tool. Step 2: Select the 'Console' tab in that window. By default, the Developer Tools open in a pane at the very bottom of your browser and will show the Elements tabthat's the famed Inspect Element tool we've been looking for. As an alternative, you can right-click on the webpage and click 'Inspect Element' to show the developer window. Prefer keyboard shortcuts Press CMD+Option+I on a Mac, or F12 on a PC to open Inspect Elements without clicking anything. It allows you to quickly jump to the important part of the code to see what's going on there. Step 1: To open the console in Firefox, use this keyboard shortcut: Cmd + Option +K (on a Mac) or Ctrl +Shift +J (on Windows).

One of the most useful tools for a web developer is the Inspect Element tool.

Open inspect element mac keyboard