How Debug Placeholder Pseudo Element in Firefox

Inspect webkit-input-placeholder with developer tools

I figured it out.

The trick is to enable 'Show user agent shadow DOM' in the Settings panel of Chrome Developer Tools:

To get to settings, click the Gear icon at the top right of your Dev Tools panel, then make sure Preferences tab on the left-hand side is selected, find the Elements heading, and check "Show user agent shadow DOM" checkbox below that heading.

With that, you can now see it:

Why firefox is cutting off the placeholder text

Try

input {
    line-height: 1.5em;
}

From the pic it looks like it needs more room for your text.

Styling input placeholder CSS within dev tools

It is possible in Chrome, Edge, Opera and Firefox.

In Chrome, go to the Dev Tools Settings (the gear icon in the top right) and under General|Elements turn on "Show user agent shadow DOM". In Edge and Opera it's under Settings > Preferences > Elements > Show user agent shadow DOM.

Now go inspect your text box. There should now be an arrow next to the input element.

Expand that and select <div psuedo="-webkit-input-placeholder" id="placeholder" style="visibility: visible; text-overflow: clip;">.

Your classes that you are using to modify the placeholder should show up in the style pane.

Here is what it should look like:

In Firefox, the style is shown by default in the Inspector tab, under "Pseudo-elements" (::placeholder).

How can I inspect and tweak :before and :after pseudo-elements in-browser?

In Chrome's Dev tools, the styles of a pseudo-element are visible in the panel:

Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclaration object:

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

Is there any way to inspect ::first-line and ::first-letter pseudo-elements in developer tools?

1. Firefox (64 and Nightly) I was able to easily see both ::first-line and ::first-letter pseudo-elements in the Firefox inspector:

.

You can see those styles in your inspector by expanding the 'pseudo-elements' tab:

2. Chrome (72) I have no trouble seeing it in the Chrome inspector either (applies to both ::first-line and ::first-letter):

Was not able to find the pseudo-element in Safari.

---

Related Topics