Web Inspector is packed with features designed to make inspection, debugging and delivery of your web content a breeze. Get an overview of the latest features including major layouts, tabs, buttons, and other capabilities that make Web Inspector a powerful web development tool.
This is a five-minute walkthrough of all the features in Safari's browser development tool, Web Inspector. Let's get started. To see Web Inspector, first you will need to enable the Develop menu. To enable the Develop menu, click Preferences in the Safari menu. Go to the Advanced section, and check the check box at the bottom of the section to enable Develop options. After enabling these options, press "Command + Option + I" to open Web Inspector, or choose the Show Web Inspector option from the Develop menu. Web Inspector's tools are split into tabs. You can dismiss tabs and add them back with the plus tab. Across the bottom of every tab is a console bar. Click Escape to expand this bar into a mini console window. On the sides are two sidebars for Navigation and Details. The Navigation bar has its own filter at the bottom of the window. Choosing something in the Navigation sidebar changes the content of the main content area and the Details sidebar. Each sidebar can be shown or hidden. Then there's the main content area. This area saves your navigation history so you can move back and forward. There's also a selection path bar, which shows the entire path of the current resource.
The Debugger includes many of the same tools in the Resource tab. It also has a Breakpoints sections in the left sidebar and a Scope Chain in the right sidebar. The Debugger controls to disable breakpoints and pause, continue, and step through your code, are in the top left corner of the tab. The Storage tab shows a persistent state that is available to web content being inspected, which can be refreshed. By default, it shows Cookies, Local Storage, and Session Storage. But as available, this tab also shows additional storage APIs, like WebSQL, IndexedDB, and Application Cache. Last is the Console. Besides showing messages logged by web content, this tab has buttons. To filter the console log, clear the console log and trigger garbage collection. For additional options, like log persistence, go to the Settings tab at the end of the tabs row. In summary, you can access Web Inspector by enabling the Develop Menu in Safari. Use Web Inspector to examine your webpages in Safari. To try the latest version of Web Inspector, download the Safari Technology Preview from the Apple Developer site. If you find bugs, report them at bugreport.apple.com. For more information and additional resources about Web Inspector, use the links in the resources section associated with this video. And that's your quick walkthrough of Web Inspector. Thanks for watching.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.