Before you start using Web Inspector, familiarize yourself with its organization and interface. Show Enabling Web InspectorTo start using Web Inspector, you must first enable the Develop menu. To do so, enable the “Show Develop menu in menu bar” setting found in Safari’s preferences under the Advanced pane, as shown in Figure 1-1. Figure 1-1 The Advanced pane of Safari’s preferencesYou can then access Web Inspector through the Develop menu that appears in the menubar, or by pressing Command-Option-I. You can also add the Web Inspector toolbar item to Safari’s toolbar by selecting View > Customize Toolbar. Figure 1-2 The Web Inspector toolbar itemWebKit-based AppsTo enable the developer tools in a WebKit-based application other than Safari, enter the following into the Terminal: defaults write com.bundle.identifier WebKitDeveloperExtras -bool true Replace Safari on iOSYou can use Web Inspector to debug web content on your device directly from your desktop. To enable Web Inspector on iOS
After Web Inspector is enabled, connect your device to your desktop machine with a USB cable. The name of your device appears in the Develop menu of Safari. Alternately, you can use iOS Simulator to take advantage of Web Inspector’s debugging capabilities, which comes free with Xcode from the Mac App Store. Use the same instructions,To enable Web Inspector on iOS, from within the iOS Simulator’s Settings app. If you have a development provisioning profile installed on your device, you can even inspect the web content of any Navigating Web InspectorThe toolbar icons listed in Table 1-1 are in order as they appear in Web Inspector, from left to right. Positioning Web InspectorThere are three positions that Web Inspector can take: docked to the bottom of the window, docked to the right of the window, or in its own window. When inspecting web content on OS X, Web Inspector is docked to the bottom of the window by default. You can detach Web Inspector into its own window by pressing the detach button ( ). This mode is especially advantageous when working on a computer with multiple displays.When in its own window, Web Inspector presents another button allowing you to dock Web Inspector to the right of the window. This is particularly useful for inspecting narrow web content on wide monitors. Press the Dock to Right button ( ) to dock Web Inspector to the right side of the window.Hold down the Option key to switch docking types. Changing Toolbar AppearanceYou can change the look and feel of the toolbar to better suit your liking. Depending on the size of your screen, you might want to adjust your toolbar to take up less space. Right-clicking anywhere on the toolbar invokes a contextual menu which allows you to change the layout and size of the toolbar icons. Possible toolbar appearances are shown in Table 1-2. By default, toolbar icons are presented with icons and text positioned vertically. Table 1-2 Toolbar variants
You also have the option to make the icons smaller by selecting Small Icons from the contextual menu. Reading the Activity ViewerThe activity viewer is like a heads-up display for the loaded page. It shows an at-a-glance summary of key information about the current page, as shown in Figure 1-3. Each label in the activity viewer is a button that, when clicked, takes you to an area of Web Inspector. Figure 1-3 The activity viewerTable 1-3 Buttons in the activity viewer
What is Web Inspector feature on iPhone?Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a web page, making development more efficient across Apple platforms.
Where is Web Inspector in Safari?Method #1 – Inspecting Elements on Mac-Safari. The primary step is to enable the Developer menu. To do so, open the Safari browser, click on Safari -> Preferences.. Click on Advanced. Check the Show Develop menu in menu bar checkbox. ... . The Inspect Element feature is now enabled.. |