Use the Develop menu and Web Inspector to monitor webpage activity and examine the elements of a webpage.
Show the Develop menu in the menu bar. Choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”
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
.