How to inspect on MacBook?

Inspect elements help developers and testers to debug UI flaws or make modifications in HTML or CSS files. You can quickly implement this feature on MacBook for Chrome and Firefox browsers. However, when inspecting elements on a MacBook using Safari, you need to enable it in the Safari browser.

To inspect an element on a Mac or MacBook, right-click the desired section of a webpage and select 'Inspect' or 'Inspect Element'. Another shortcut is using the key combination Command+Option+I. This action accesses the browser's built-in developer tools, revealing the page's code and style details. Following are the methods to inspect elements on MacBook.

• Steps to Inspect Element on Mac Safari
• Steps to Inspect Elements on Mac Firefox
• Step to Inspect Element on Mac Chrome
• Inspecting elements using LambdaTest platform

Following are the steps to inspect an element on MacBook.

• Launch Safari.
• Access Preferences. Go to Safari - Preferences.

• Go to Preferences - Advanced. Check "Show Develop menu in menu bar" to enable the Develop menu.

• Open your desired website.
• Right-click and select "Inspect Element" from the menu.

• Open Firefox and navigate to the web page you want to inspect.
• Right-click anywhere on the page and select "Inspect Element" or use the shortcut Option+Command+C.

• The Inspector tool will appear on your browser window, displaying HTML and CSS code for the selected element.
• Use the search function or arrow keys to navigate through the code.
• Double-click on an element to edit its code. Right-click an element to choose "Edit as HTML" or "Edit as CSS" to add code.

• To close the Inspector, click the X button in the top-right corner or use Option+Command+C again.

• Open Google Chrome and navigate to the desired website.
• Right-click anywhere on the page and select "Inspect" or use the shortcut Option+Command+I.

• A window will appear on the right side of your browser, displaying HTML and CSS code for the selected element.
• Utilize the search bar or arrow keys to navigate through the code.
• Double-click on a section of the code to edit it in DevTools. Add new HTML or CSS by right-clicking an element and choosing "Edit as HTML" or "Edit as CSS" from the menu.

• When you're finished inspecting and editing the elements, close the DevTools window by clicking the X in the top right corner or use Option+Command+I again.

With LambdaTest’s cloud testing platform, you can inspect web elements across different real MacBook operating systems and browsers running on the cloud.

Below are the steps to inspect elements on MacBook using LambdaTest platform.

• Sign up for free and login to your LambdaTest account.
• Go to Real Time Testing > Browser Testing.

• Provide the website URL, pick the browser, browser VERSION, OS, and RESOLUTION. Press START.

• A cloud-based virtual machine will fire up. Once the VM is operable, right-click from your mouse or trackpad and select Inspect Element

This way, you can inspect elements on MacBook across different real MacBook OS and browsers.