How to inspect webkit input placeholder with developer tools

当我们需要检查 webkit-input-placeholder的样式时，可以通过浏览器内置的开发者工具进行操作。以下是具体的步骤：

1. 首先，使用浏览器打开包含有占位符文本（placeholder）的输入框（通常是 <input>或 <textarea>标签）的网页。
2. 接着，右键点击需要检查的输入框，并选择“检查”（Inspect）或者使用快捷键（如在Chrome中通常是 Ctrl+Shift+I或 Cmd+Opt+I）打开开发者工具。
3. 在开发者工具的元素（Elements）面板中，定位到相对应的输入框的HTML代码，确保它已经被选中。
4. 在样式（Styles）侧边栏，你通常可以看到元素的CSS样式。但是由于 ::placeholder是一个伪元素，它的样式可能不会直接展现出来。
5. 要检查 webkit-input-placeholder的样式，我们需要在样式侧边栏中手动添加一个新的伪元素选择器。比如，如果你的输入框有一个类名为 .my-input，那么你可以添加如下样式规则来检查：

css
.my-input::-webkit-input-placeholder {
    /* CSS 规则 */
}

1. 添加后，如果输入框有相应的 placeholder样式，它们将会出现在样式侧边栏中，你就可以检查和修改这些样式。例如，你可以更改文字的颜色、字体大小、字体样式等。
2. 如果你需要看到实时的变化，可以在开发者工具中直接编辑这些样式规则，并观察输入框中的占位符文本样式如何变化。

举例来说，如果我想要检查一个类名为 .example-input的输入框的占位符样式，并且想将其颜色改为灰色，我可以这样操作：

1. 右键点击对应的输入框，选择“检查”打开开发者工具。
2. 在Elements面板中找到 <input class="example-input" placeholder="Enter text...">这一行。
3. 在Styles侧边栏中，点击"+ New Style Rule"按钮。
4. 在新的样式规则中输入 .example-input::-webkit-input-placeholder。
5. 接着添加 color: grey;这一CSS属性。
6. 随即可以看到输入框中占位符的文字颜色变为了灰色。

通过这种方式，开发人员可以很方便地调试和定制占位符的样式，以满足设计的需求。这对于保证网页在不同浏览器中的一致性和提升用户体验来说非常重要。

我想到了。

诀窍是在 Chrome 开发者工具的“设置”面板中启用“显示用户代理影子 DOM”：

要进行设置，请单击开发工具面板右上角的齿轮图标，然后确保选择左侧的“首选项”选项卡，找到“元素”标题，然后选中下面的“显示用户代理影子 DOM”复选框标题。

这样，您现在可以看到它：

1. 对于 Google Chrome 版本 69：
2. 打开检查元素：在 Mac 上 ⌘ + Shift + C，在 Windows / Linux 上 Ctrl + Shift + C 或 F12。
3. 点击右上角的“⋮”按钮，然后进入设置
4. 在设置中单击首选项 > 单击显示用户代理 Shadow DOM

下图显示了该过程：

转到设置 > 首选项：

单击显示用户代理 Shadow DOM：

查看placeholder的CSS：