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

ahad1020

代码出错了。我们都遇到过这种情况，对吧？大概是这样的：

您在浏览器中打开目标网页或电子邮件，却发现页面显示不正常。可能是图片对齐错误，也可能是文本大小或颜色错误。于是，您返回 Oracle Eloqua（或您选择的构建平台）或编辑器，仔细检查代码，尝试找出问题所在，进行修改，祈祷代码能够正常工作，然后重新加载页面。糟糕！页面仍然显示不正常。听起来很熟悉？要是能实时预览修改内容，并知道 具体要修改哪一行就好了。啊，真的有！现在就来认识一下基于浏览器的开发者工具吧。

开发者工具是浏览器内置的 Web 创作和调试工具，可让您深入了解代码。Chrome、Firefox、Safari 和 IE 各有特色，美国电话号码库 但功能基本相同。在本演示中，我将使用 Chrome 的 DevTools，但您也可以探索其他版本的 DevTools。

在今天的演示中，我们将分析一个崩溃的落地页，并探索如何使用 DevTools 调试代码并修复问题。附注：您也可以使用 DevTools 调试电子邮件，但请务必使用Litmus等测试软件进行测试，以确保其已针对您常用的电子邮件客户端进行了优化。在深入探讨之前，我们先来熟悉一下界面。

要启动 DevTools，请转到 Chrome，然后点击“查看”—>“开发者”—>“开发者工具”。或者，Command + Option + i (Mac) 或 Control + Alt + i (PC) 也可以。

DevTools-Open

一旦启动，您应该会看到类似这样的内容：

DevTools-底部

有两种视图可供选择：屏幕底部或屏幕侧面。您可以点击右上角的菜单并选择您的偏好来自定义视图。

DevTools-ViewPreferences

接下来，我想提醒大家注意一下不同的菜单选项卡。默认情况下，DevTools 会从“元素”选项卡启动，该选项卡可以查看页面上的所有 HTML 以及与这些元素对应的 CSS 规则。