营销人员 DevTools 指南：第 2 部分

ahad1020

欢迎回来，营销人员和代码达人！今天，我将分享 Chrome DevTools 的更多功能，这些功能将使你的代码调试更快、更轻松。如果你需要了解开发者工具，或者只是想温习一下，请查看“开发者工具入门”系列的第一部分，帮助你入门。

在第一部分中，我们学习了如何启动 Chrome 开发者工具，美国电话号码库 选择一个元素并调整该元素的 CSS 来修复落地页的布局问题。这些操作本身就非常实用，但这里还有一些在解决落地页或电子邮件问题时非常有用的技巧。为了保持一致性，我将使用同一个落地页作为示例。

技巧 #1：移动 HTML 元素

假设您想查看着陆页的某个部分在页面上其他位置的显示效果。DevTools 允许您拖动 HTML 元素，以便预览它们的放置位置如何影响布局。

要查看实际效果，请启动 DevTools（Option + Command + i）并选择要移动的元素。如果您不确定如何操作，请参阅第一部分以获取详细说明。在本例中，我将选择左上角的 Relationship One Cares 徽标。在“元素”选项卡中，您应该会看到代码中突出显示的 html 元素。

准备好迎接有趣的部分了吗？

点击高亮的代码部分，然后上下拖动即可在 HTML 中重新定位它。在本例中，我将把图片移出其容器，直到它成为 body 标签内的第一个元素，如下所示：

在本例中，调整图片位置会导致它一直向左移动，这不是我们想要的。这不是重点。重点是，如果你需要尝试修改 HTML 结构，DevTools 允许你即时操作，以便立即看到结果。使用 DevTools 的好处在于你实际上并没有修改代码。所以，如果出现问题，只需刷新页面重新开始即可。

技巧 #2：试听文本

如果您想试听页面上的文案更改怎么办？没错，DevTools 可以做到。在 DevTools 中，使用选择器工具选择一个包含文本的元素。在本例中，我将选择标题“The Season of Giving”。