Where are the Safari Web Developer Tools and how to show and dock them in a browser window

The Safari Developer Tools for the macOS browser can be enabled and displayed in Safari > Preferences > Advanced > “ Show Develop menu in menu bar ” for Safari version 14 and earlier.

Show Developer Tools

 

Then from the Safari “ Develop ” menu select “ Show Web Inspector ” or use the keyboard shortcut Option+Command+i

When opened the Safari developer tools pops open in a new window, to get it docked to the bottom of the current Safari window click on the middle icon to snap in at the base of the current open Safari window.

Dock Safari Tools

 

And voila! Snapped in, just like it ought to be. To pop it open in another window instead click the overlapping icons in the same position.

Dev Tools Docked Safari

To permanently dock the developer tools go into Safari View Menu > Customise Toolbar … and drag the Web Inspector icon to your toolbar – now each time you click it it will dock the dev tools in the lower half of the window or in a separate window as your preferences are saved..

Safari Web Inspector