Chris Cooper
GitHubLinkedIn

Dev Tools Emulation

  • css
  • accessibility

Emulation settings enable the developer to test how the website behaves across various user preferences or for users with varying levels of movement, sight or cognitive ability.

Some of the most useful ones:

  • prefers-color-scheme
  • prefers-reduced-motion
  • blurred vision
  • reduced contrast
  • no green/red/blue

To enable:

  • Cmd+Option+I - open dev Tools
  • Cmd+Option+P - open command palette
  • Start typing emulate... to see various options and hit Enter to toggle on/off