如何使用“检查元素”拍摄完美的屏幕截图

我与一个惊人的产品团队合作。他们是建造伙伴- 免费电子邮件工具 -以光速。所以你可以想象他们几乎没有时间让他们为优质产品截图漏出。

幸运的是，Thariq.和大师，团队中的两个世界级工程师，教我一个黑客攻击完美的产品截图。在这样做之后，他们开玩笑，我已经成为一个工程师的路径中途 - 而在阅读这篇文章之后，你也可以！

什么是检查元素？

当您在浏览器上右键单击时，您肯定在选项菜单中意外点击“检查元素”。出现的无限代码是营销人员的纯金矿。

Inspect Element是一个浏览器工具，可以让你查看和编辑网页内容的HTML和CSS。但是，您所做的任何编辑都只会出现在您的个人屏幕上，直到您退出为止。也就是说，你不会对一个网站做任何永久性的改变，你只是能够暂时调整它。以下是一些用例:

• 你是前端开发人员。您想更改产品的设计，但不想与实际的实际代码一起担心打破它。您可以使用Inspect Element播放，直到您找到一个解决方案，您可以实现为真实产品。
• 您是用户体验专家。你想要在你的登陆页面上测试不同的产品信息。使用Inspect Element，您可以改变各种登录页面的外观，并在用户测试中显示这些外观，以查看客户的反应。
• 你是营销人员。你想要对你的产品进行有效的截屏，但要确保你的截屏准确地强调了潜在客户将如何使用它。

最后一个是我们将在逐步的教程中审查的内容。

如何使用检查元素拍摄截图

第1步：你想要什么屏幕截图？

作为Sidekick的生长营销人员，我发现自己不断地拍摄了我们产品的截图。由于产品的核心是电子邮件打开并单击通知，因此我必须小心更改可以从电子邮件交换中删除个人信息的主题行复制，联系人姓名和其他字段。

我将使用的示例是编辑我的sidekick流。

但这也适用于其他市场需求。假设你正在写一篇博客文章，想要展示一个新Facebook布局在你的个人资料上看起来如何的例子。你可以使用Inspect Element来改变你在Facebook上的名字，并截屏，这样你就不会泄露你的个人信息。

第2步：突出显示您要编辑的区域。

突出显示您要更改，右键单击的副本，然后从选项中选择“检查元素”。通过悬停在您想要更改的页面的实际组件上，您可以确保检查元素打开您要调整的准确代码的准确点。您现在会看到一系列