News

Inspect HTML on webpages in Safari

View website information using Safari’s secret developer tools

Main

The biggest benefits of using Safari might be its integration with OS X and the speed of the websites when you’re browsing. But it has many more tricks up its sleeve than you might realise. With a few clicks you can add the Develop option to the menu bar, and with it, access many extra functions to the app.

Anyone can enable the options, and once they’re active you can view website information, or trick websites into thinking that your browser is running on an iPad or iPhone. You can even choose to disable things on a specific site such as images or JavaScript, or view any errors that have occurred on the page. It’s a really handy option to enable, and one that is well worth adding to your toolkit.

Step 1

1 Preferences

To enable the option within Safari, first open up the Settings menu by choosing Safari>Preferences in the menu bar, then select the Advanced tab in the new window.

Step 2

2 Switch it on

At the bottom of the Advanced tab is the option titled ‘Show Develop menu in the menu bar’. Check this box and the new option should appear at the top of the screen instantly.

Step 3

3 Open elsewhere

The first option in the menu gives you the ability to instantly open the page you’re viewing with another of the browsers that you have installed on your Mac with just a click.

Step 4

4 Web Inspector

Choose Show Web Inspector and a new menu will appear at the bottom of your screen. You can click Inspect then choose a specific element of the website to inspect.

Step 5

5 View Source and more

If you want to view the source code of the website you’re on, click the View Source option. The menu at the bottom will show the source code of the website you’re viewing.

Step 6

6 Start developing

If you want to start developing web extensions, you can choose the Show Extension Builder option. Just click the ‘+’ icon and start creating a new extension within Safari.

Step 7

7 Timeline recording

You can also activate the Timeline Recording option here, which will start recording network requests, layout and rendering, and JavaScript. You can click the same option to stop recording.

Step 8

8 Cache options

Sometimes, you can solve problems that you’re having with Safari by clearing the caches of data that the app has saved – and in the Develop menu you can do so with a click.

Step 9

9 Disable options

The Develop menu gives you the tools to disable specific options on a page, including images, styles and JavaScript – simply click the option you want in the menu to remove it.

×