Safari for Mac: Examine webpage elements and activity using Safari

Examine webpage elements and activity using Safari

Use the Develop menu and Web Inspector to monitor webpage activity and examine the elements of a webpage.

  1. Show the Develop menu in the menu bar. Choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”

  2. Go to the webpage, choose an option from the Develop menu, or choose Develop > Show Web Inspector, then use any of the Web Inspector features:

    Elements: Provides easy access to navigate and inspect the DOM of the webpage.

    To examine a specific webpage element, you can also Control-click it, then choose Inspect Element from the shortcut menu.

    Network: See details for webpage resource requests and API requests that include documents, scripts, images, and XHRs.

    Resources: View detailed data about webpage resource, including documents, scripts, and images.

    Timelines: See activity on an open webpage, such as network requests, CSS rendering, and JavaScript events.

    Debugger: Find JavaScript errors on your webpage.

    Storage: Inspect any persistent data stored by the page, including cookies, DOM Storage, Web SQL databases, IndexedDB, and Application Cache resources.

    Console: Inspect and debug your webpages.

If you don’t see one of the tabs, click the New Tab button , then click the feature you want. At any time, you can close a tab by placing the pointer over the tab in the tab bar, then clicking the Close icon .

Published Date: Mar 27, 2017