How do I control the panes in Safari Web Developer?

I Am trying to convert from Chrome to Safari. I do a lot of web work, and use Chrome's Web Developer tool a lot.


Safari has one, but it has a third column that I don't need - it shows Font etc, but that's all in the CSS.


How do I control what panes are on show?

Please see attached.

Mac mini (2023 with M2)

Posted on Mar 1, 2023 3:35 AM

Reply
Question marked as Top-ranking reply

Posted on Mar 1, 2023 11:59 PM

Click in the Web Inspector on the top-right Settings icon (cog) or ⌘, keyboard shortcut and in the Elements tab uncheck Details sidebar: Show independent Styles sidebar.

8 replies

Apr 7, 2023 4:07 AM in response to simon_a6

To control the panes in Safari Web Developer, you can follow these steps:

  1. Open Safari and navigate to the webpage you want to inspect.
  2. Click on Safari in the menu bar and select Preferences.
  3. Click on the Advanced tab.
  4. Check the box next to "Show Develop menu in menu bar".
  5. Close the Preferences window.
  6. Click on Develop in the menu bar and select Show Web Inspector.
  7. The Web Inspector window will open. You should see a split pane view with the HTML and CSS code on the left and the page preview on the right.
  8. To resize the panes, hover your mouse over the vertical divider line between the two panes. When the cursor changes to a double-headed arrow, click and drag to adjust the size of the panes.
  9. To switch between the HTML and CSS code view and the page preview, click on the tabs at the top of the right pane.

You can also use the keyboard shortcut Option + Command + I to open the Web Inspector.

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

How do I control the panes in Safari Web Developer?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.