Using Web Inspector with Responsive Design Mode in Safari v12

Hi all,


Hopefully I'm not the only one experiencing this.


I use both the Web Inspector and Responsive Design Mode tools in Safari a lot. However, since Safari v12 came about I can no longer use these tools at the same time, as the top menu bar in Web Inspector is no longer visible and it also results in broken page rendering.


Here are some observations:


  • This only seems to be a problem when the tools are operating side-by-side to each other. When stacked, the Web Inspector toolbar displays correctly. However of course the Responsive Design Mode preview is very small, so not convenient to work with.
  • If I begin by opening Web Inspector and then open Responsive Design Mode, WI is automatically closed/disabled. I need to start it again. This doesn't fix the problem, but it's just an anomaly I noticed.
  • Often, enabling both tools will result in the Safari app resizing up, to extend beyond the limits of the screen - this even happens when in full screen mode, meaning I have to exit full screen, resize the app, then go back into full screen.
  • This wasn't a problem until the update to v12.
  • I can use WI without enabling RDM, but of course this doesn't allow me to work on responsive layouts effectively.
  • I can use RDM without WI, but I need them both to be able to do my job.
  • Operating on macOS High Sierra v10.13.6 with Safari v12
  • Images attached for more detail.


User uploaded file

In this image you can see that the WI toolbar cannot be seen or accessed. Also, Safari has been resized to extend beyond the limits of the screen.


User uploaded file

In this image you can see that the WI toolbar is visible, however this only works in stacked mode. When enabling RDM after WI has been enabled, WI is still disabled automatically.


User uploaded file

Web Inspector works fine when not being used in conjunction with RDM. These tools will often be used hand-in-hand by a lot of people, and so not being able to use them both is a real issue.


User uploaded file

RDM works fine without WI being open.


I hope that somebody has some insight on this. I'm splitting my workload between Chrome and Safari right now, which is disrupting my workflow quite a bit.


Thanks all.


Alex

null-OTHER, macOS High Sierra (10.13.6), Safari v12.0

Posted on Oct 1, 2018 2:45 AM

Reply

Similar questions

3 replies

Oct 9, 2018 2:36 AM in response to LVlad

Of course - undocking. If I set up a new desktop and use it just for Safari (but not in full screen mode) then I can at least have them side by side. It's not ideal, and a bit of unnecessary fiddling is needed but at least it means they can both be used at once for now.


I've noticed that even undocked, opening RDM after opening and undocking Web Inspector still closes web inspector, and it needs to be opened again.


Thanks LVlad for the new information. Still no clue on when this might actually be noticed and addressed properly by the Safari team.

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.

Using Web Inspector with Responsive Design Mode in Safari v12

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