Recently I had to do some debugging of placeholder styles for a project I was working on.

If you do any kind of front end development work you’ll know that normally in a situation like this you’ll just use the inspect option in your browser’s developer tools to look at the styles being applied to the element in question.

However, it may not be obvious how to inspect placeholder styles, but there are ways to inspect placeholders like any of the other element.

Google Chrome (Mac, version 64)

1. Open the developer tools section
2. Go to Settings via the ‘three vertical dots’ icon (on the right side of the developer tools area)
3. Under Elements, check Show user agent shadow DOM
4. Now refresh the page and if you open up the relevant input field you’ll see that you can view the placeholder text by expanding the relevant input field

Firefox (Mac, version 59)

1. Open the developer tools and inspect the element you want to check the placeholder for.
2. At the top of the Rules tab you’ll see a Pseudo-elements section.
3. Expand this and you can explore pseudo-elements including ::moz-placeholder

Safari (Mac, version 11)

I’m not aware of any way to inspect placeholder elements in Safari at this time (let me know if you know though).