Occasionally, you’ll find that you can’t inspect a web page, and the Inspect selection is grayed out if you try to right-click on it. How to Use Inspect Element When It’s Blocked Keep in mind, though, that these directions only work for Safari running a Mac, not Safari on Windows. Selecting the web page also opens a Web Inspector window for the same page on your Mac screen. Click on it to see the connected iPhone and the web page active on the device. Now, tap the toggle switch to turn on Web Inspector.Īlso, make sure that the Develop menu is enabled on your Mac by following the steps in the section above.Īfter enabling both iOS mobile devices and Macs, you’ll see the Develop menu in the top bar on your Mac.Scroll to the bottom and tap on the Advanced Menu.But before you look at an element, you need to enable Web Inspector for your iOS device: You can also use the quick keys command: CMD + Option + I (inspect).ĭo you want to use the Inspect Elements feature to see how a mobile version of a web page appears on an iPhone? You can do this and more with just a few simple steps. If you don’t enable Inspect Element first, you won’t see the option when you open a website.Īfter you complete this step, simply right-click on any open web page and select Inspect. Going through these steps enables the Inspect Element feature on your browser. Check the box that says Show Develop menu in menu bar.Click on the Advanced gear icon located at the top of the screen.Click on Safari in the header tab and select Preferences from the drop-down menu. But it’s just as simple with these steps: Opening Inspect Elements on Safari is slightly different than on Chrome and Firefox. If you’re using a Mac, your browser of choice is probably Safari. Also, right-clicking on the web page and selecting Inspect works too. You can also use the F12 function key to access Inspect Element faster. Tap on the three vertical dots on the corner of the browser window.Open the website you’d like to inspect.Using Inspect Element (OS Specific)Īlthough a lot of the steps involved might have been covered by just showing you how to use Inspect Element in the browser, we’ll show you how on most OS anyway. You can drag the panel to resize it when you see the arrow cursor. For example, if you choose to dock the panel to the right side of the browser window, try hovering on the left border. Hovering the cursor next to the edge of the Developer Tools panel frame and dragging will narrow or widen the workspace. Select a dock side (left, bottom, or right) or undock to a separate window.Click on the three horizontal dots in the upper corner of the Developer Tools panel.Follow these simple steps to reposition the Developer Tools panel: The panel will open at the bottom of your screen as a default, but you can always change how it appears. This is the tool you need to Inspect Element. These are the Developer Tools and include the Elements tab. If you did this correctly, a new pane opens up at the bottom of your browser.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |