Good fnew feature. I assume that is in the latest Safari on the latest macOS?
DevTools is Chrome, isnât it? But hopefully others will follow.
Yes you are correct. Looks like you need to:
Select the Experiments tab, enable the Enable CSS Authoring hints for inactive rules, deprecated properties, etc. checkbox, close the Settings, and reload DevTools when prompted.
Interesting that Firefox also has a similar feature -
Yes, I saw that. I only use Firefox for its ability to show grids, although the Mozilla notes are some of the best resources on the web. My prejudice against Firefox is probably because, in the past, it has always been the browser that didnât like things. Well, now that honour goes to Safari 16 (while, ironically, older versions of Safari, and Safari Technology Preview, are much more reliable). So maybe Iâll start using Firefox more now.
Firefox also has an excellent full page screenshot facillity within the Inspector (DevTools). The CSS Grid tools are also the best around.
Additionally. Firefox also has an Accessibility function within the Inspector where you can examine individual objects such as buttons to check the details.
I wished I had known about that full-page screenshot feature â the number of times Iâve pieced long pages together in PhotoShop!
Where exactly can I find this? Never really used Firefox and am a bit lost therefore⌠;-)
In Firefox, right click and select Inspect. Then look for camera icon on top right of the Inspect window as per below:
I have the latest Firefox version v106.0.3 .
I donât recall setting an option to enable the Screenshot function, and I also canât find one in the settings.
All I can suggest is Googling âFirefox Screenshotâ for help.
You shouldnt even need the Inspector. Just right click, âtake screenshotâ and then it 'll ask for an area or the whole page
That must be a fairly recent addition.
Good find. Thanks
Iâd missed the info button! That should be very useful. It is hell trying to work out why the fonts for Top Bar arenât appearing.