Search code examples
javascriptcsssafarideveloper-toolssafari-web-inspector

How to show both the Console and the Elements tab in Safari's Dev Tools?


In Chrome you can drag the Console down to the bottom window and have the Elements above, or vise-versa, so you can quickly look at the console while you also see the style. This helps a lot when you are using a Javascript boolean variable to apply styles only when true to certain elements. So basically, is there any way to get the Safari Dev Tools (Left in picture) to look like the Chrome Dev Tools (Right in picture)?

enter image description here

I've spent about 45 minutes on Google and I can only seem to find how to make put the Console on a different screen than the Elements tabs for Chrome. Which is the exact opposite as I'm trying to do in Safari.


Solution

  • Write some JS in the input on the Elements page. It should bring up the full Console above the input.

    Loading Console on Elements tab in Safari