切换到 Chrom(ium)

作者:Reuven Lerner

对于一个从事、撰写和教授尖端技术的人来说,我在采用新技术方面往往有点落后。我非常保守地升级我的笔记本电脑和服务器。我今年早些时候才买了我的第一部智能手机。我仍然使用 Apache HTTP 服务器,即使我知道 nginx 速度更快一些。直到最近,Mozilla 的 Firefox 还是我的默认浏览器。

Firefox 是一款非凡的软件,从任何角度来看,它都取得了巨大的成功。它在 Netscape 首次公开募股之前和期间就存在了,这标志着 IPO 狂热的互联网时代的开始。然后,我眼睁睁地看着它作为一家公司衰落,将其旗舰产品(Firefox)变成一个开源项目,然后消失。

我从 Firefox 的第一个预发布版本就开始使用它,并且一直是忠实的用户。这不仅是因为 Firefox 通常坚持并推广标准,还因为它可以使用的各种插件和扩展。作为一名 Web 开发人员,我发现插件的组合——从 Firebug 到恰如其分的 Web 开发人员再到 Tamper Data——在开发、调试和处理 Web 应用程序时,给了我巨大的力量和灵活性。

在过去一年中,我发现大量非技术人员已经切换了浏览器。但是,他们并没有切换到 Firefox。相反,他们一直在切换到 Chrome,这是一款相对较新的浏览器,其开发由 Google 赞助。这些年来我当然使用过 Chrome,并且它出色的功能给我留下了深刻的印象。但是长期以来,某种怀旧情绪和对 Firefox 工具的舒适感让我一直没有切换。

好吧,不再是了。最近,Google Chrome 已成为我的首选浏览器。在本文中,我将介绍一些关于 Chrome 的信息,以及我为什么切换到 Chrome,无论是个人使用和浏览,还是在我的 Web 开发工作中。在未来的一篇文章中,我将解释如何为 Chrome 编写扩展程序。Chrome 的优点之一是编写扩展程序非常容易,并且完全使用 Web 技术(例如 HTML、CSS 和 JavaScript)。

在继续之前,我应该明确指出,Chrome 不是开源产品。它是免费的,但它不是在开源许可证下发布的。也就是说,开源倡导者应该关注 Chrome 有几个原因。首先,它正在迅速普及,许多开发人员和用户都在采用它。正如我的客户期望我会针对 IE 测试 Web 应用程序一样,他们现在期望我会针对 Chrome 测试应用程序。如果您没有在测试中包含 Chrome,您可能会错过网站设计或功能中的一些问题。

关注 Chrome 的第二个原因是,尽管您可能更喜欢开源解决方案,但(如您所知)Linux 有许多商业解决方案,其中一些甚至质量很高。忽略这些产品并不会让它们消失,甚至可能对那些更关心拥有“开箱即用”的计算机而不是完全开源的计算机的人造成损害。

关注 Chrome 的第三个原因是它为我们带来了高水平的复杂开发工具。Web 开发人员长期以来一直缺乏严肃的工具。幸运的是,Firebug 的出现将我们带到了一个新的水平。Chrome 同样提高了 Web 开发工具的标准,使测试和试验 HTML、JavaScript 和 CSS 变得更加容易和快捷。谷歌作为一家公司有其缺点,但就通用开发工具(尤其是 Web 开发工具)而言,您可以确信谷歌正在“吃自己的狗粮”,正如俗话所说。

最后一个原因是 Chrome 可以被认为是主要开源产品。我知道这听起来可能类似于说一个女人只是部分怀孕,但请听我说完。从一开始,谷歌就赞助了一个名为 Chromium 的开源浏览器,它使用相同的 JavaScript 和渲染引擎。Chrome 的大部分或全部功能也都在 Chromium 中。据我所知,您在 Chromium 中没有获得的主要功能是自动更新和访问 Chrome 网上应用店以获取扩展程序。

考虑到我对谷歌收集个人数据量的日益增长的不安,我当然可以理解为什么有人会更喜欢 Chromium 而不是 Chrome,或者更喜欢使用由非营利组织而不是商业公司赞助的浏览器(例如 Firefox)。尽管如此,谷歌还是利用 Chrome(以及其他东西)来推广现代 Web 标准,这对所有开发人员都有好处,无论他们使用什么浏览器。

安装和使用 Chrome

即使我最近才开始全面使用 Google Chrome,但它并不是一款新浏览器。它于 2008 年首次发布,从那时起,它通常同时在 Windows、Macintosh 和 Linux 系统上可用。Firefox 用户最近惊讶地发现他们的版本号大幅跃升,并且新版本正在快速发布。这在很大程度上要归功于 Chrome,它由 Google 定期自动更新。这些定期更新带有新的版本号,这意味着尽管 Chrome 问世仅几年,但版本号已经达到 20 多岁,并且大约每六周就会推出新版本。

实际上有三个不同的 Chrome 版本:标准生产版本是普通公众使用的版本,专为非开发人员设计。“dev”版本适用于开发人员,它具有更多的功能和特性,但代价是稳定性稍差。

另一个 Chrome 版本,即 Chrome Canary,包含大量新功能,但根本无法保证其稳定性。也就是说,在使用我的 Mac 时,我发现 Chrome Canary 绝对足够稳定,可以满足日常使用。遗憾的是,Chrome Canary 尚未在 Linux 上推出。考虑到大量 Web 开发人员使用 Linux,我本以为 Google 会提供这样的版本,并希望它在不久的将来这样做。

基本功能

在基本层面上,Chrome 提供了您对任何 Web 浏览器都期望的功能。它允许您输入 URL、使用您喜欢的搜索引擎在 Web 上搜索、与表单交互、观看视频、执行用 JavaScript 编写的程序、处理 CSS 标记以及识别使用 SSL 加密的页面。但如果它没有做到这些事情,以及现在每个人都与 Web 浏览器相关的许多其他基本功能,Chrome 甚至都不会成为竞争者。

在用户界面方面,Chrome 确实比 Firefox 更简洁一些,窗口似乎只包含选项卡,并且选项卡可以在窗口之间移动。同样,这现在是 Web 浏览器中的常态,没有人会使用任何不同的浏览器。

那么,像我这样的人为什么要切换到 Chrome 呢?首先,我发现它比 Firefox 运行得更快。这种差异不再像以前那样明显,当时谷歌凭借其 V8 JavaScript 执行环境设定了标准。Firefox 已经赶上了 Chrome 的执行速度,我说这话不是作为一个运行基准测试的人,而是一个非常频繁地与 Web 浏览器交互并且对 Web 应用程序的执行速度很敏感的人。

切换的第二个原因是,可悲的是,站点兼容性。在以色列,由于一些让我抓狂的原因,仍然有一些网站——包括政府和银行网站——优先考虑 IE,并且拒绝与 Firefox 合作。当我拨打他们的支持热线并寻求 Firefox 方面的帮助时,我被告知该网站永远不会与它一起工作。但是 Chrome 足够流行,他们(通常)愿意考虑使其更好地工作或遵守标准。

最后,正如我上面提到的,Chrome 中的开发人员工具已经非常出色,并且随着每个版本的发布,它们都在变得更好。Firebug 仍然是一个很棒的工具,但我越来越发现 Chrome 可以完成 Firebug 所做的一切,而且通常更好、更直观。

如果您只想安装开源版本的 Chrome Chromium,您可以使用 Debian/Ubuntu 上的 apt-get 或基于 RPM 的机器上的 yum 来安装它。您也可以从 http://chromium.org 下载源代码并编译它(尽管我没有这样做过)。如果您对专有版本的 Chrome 感到满意,您可以访问 http://google.com/chrome,并下载相应的 .deb 或 .rpm 文件,这将允许您在计算机上安装 Chrome。对于 Chrome 本身,您可以从稳定分支或开发分支中进行选择,但您需要自己手动安装更新。相比之下,由于 Chromium 是一个开源项目,因此它可以包含在标准 Linux 发行渠道中,并且每次执行 apt-get upgrade 时都会更新。

Chrome(与 Chromium 相对)努力让您使用您的 Google 帐户登录——您将用于 Gmail、Google 日历和所有其他 Google 服务的帐户。使用 Google 登录的好处是 Chrome 会在您运行的每个 Chrome 副本中同步您的书签和其他设置。坏消息是,当然,并非每个人都希望 Google 访问此类信息。

开发者工具

在处理 Web 应用程序时,我需要开发人员工具的最常见任务可能是更改 HTML 和 CSS 的能力。也就是说,我看到一个页面,我想知道如果我修改标签、添加新标签甚至通过 CSS 向标签添加新样式会发生什么。例如,如果我正在处理Linux Journal主页,我可能会转到“热门主题”标题,并想看看我可以通过多种方式更改它。使用 Chrome,我不需要安装插件;我总是可以右键单击以获取某些文本上的菜单。其中一个选项是“检查元素”。这会将我的浏览器窗口分成两半,让我可以在底部看到 HTML 源代码,在顶部看到原始站点。

如果我想更改文本,我可以双击较低(检查)窗口中的文本并键入我想要的内容。显然,我所做的更改不会保存回服务器,但这通常不是我想要的。在浏览器中更改内容为我提供了一个实验室,我可以在其中进行实验,而无需更改或修改我的服务器程序。

当然,这还不是全部。我还可以更改标签或任何标签的属性。因此,当“热门主题”的类为“title”时,我能够将其更改为“awesome”,当然,这会立即将样式恢复为页面默认值,因为之前不存在这样的类。我可以在检查窗口的右侧立即看到这一点,它为我提供了已应用于相关标签的 CSS 样式的实时视图(“匹配的 CSS 规则”)。如果我将类改回“title”,则匹配项也会相应更改。

现在,“匹配的 CSS 规则”向我显示了已应用于特定元素的所有规则,这非常有用——尤其因为此列表向我显示了已应用的每个规则以及定义该规则的文件。但是由于 CSS 的级联性质,多个规则可以应用于一个元素,有时很难跟踪哪个规则在何处定义。因此,Chrome 在屏幕的同一区域提供了一个“计算样式”部分,允许您查看应用于标签和文本的最终样式列表。您甚至可以要求查看所有继承的样式,有时可以提供额外的见解。

屏幕的底部不仅仅是一个标签和样式检查屏幕,而是“Chrome 开发者工具”的初始选项卡。这些工具不断开发中,仅仅了解每个版本中更新和改进的内容就有点挑战。(尽管公平地说,Google 的员工确实为他们发布的每个版本都提供了更改日志。)

在初始“元素”选项卡之后的第二个选项卡标记为“资源”,它指的是您可以想象的一切。通过左侧框架中的列表,您可以访问页面上的每个 HTML 元素,包括图像、电影和样式表。但是,如果您一直在关注 HTML5 标准的开发和发布,您就会知道对于许多功能(包括客户端存储),已经提出了多个提议的标准。好吧,“资源”选项卡允许您在“Web SQL”和“本地存储”列表下访问其中一些。

其他选项卡也非常有用:“网络”允许您查看 Ajax 调用,“源代码”显示浏览器已加载哪些文件。

最后的选项卡是 Chrome 真正开始展示其功能的地方。“时间线”功能默认情况下未启用,而是需要您按下圆形“记录”按钮,以便 Chrome 可以跟踪浏览器不同部分的使用时间以及它们所花费的时间。我经常在其他浏览器上使用这种功能来跟踪页面下载所需的时间,但是获得浏览器在页面渲染期间每个点的内存消耗图非常有用。如果您保持时间线记录处于开启状态,然后使用大量 JavaScript 的浏览器密集型应用程序,它会变得更加有用,因为它可以在内存消耗上升时向您显示。

“配置文件”选项卡执行两项操作。它检查 CSS 选择器的效率和速度,并且还检查内存使用情况。当您有极其复杂的样式表集时,第一个可能非常有用,这可能需要很长时间才能呈现。您可以优化样式选择器,还可以专注于仅为页面上实际需要它们和出现的元素创建样式。

“审核”选项卡类似于著名的 Firefox YSlow 工具,因为它检查了许多可能导致加载和交付速度缓慢的常见问题。您的页面将根据许多不同的标准进行排名,获得分数、详细结果和方便的红-黄-绿指示器,显示您在每个标准上的表现如何。如果您不确定您的网站是否速度缓慢,或者您可以做些什么来加快速度,此工具可以提供一些快速修复,或者至少告诉您需要将精力集中在哪里。

最后,Chrome 提供了一个 JavaScript 控制台,很像我在 Firebug 中已经熟悉和喜欢的控制台。这已成为我 JavaScript 工作的基本工具,让我可以查询和修改页面,以及检查我的工作并在提交代码片段之前对其进行测试。

现在,这些都不是 Chrome 独有的。通过正确的插件组合,我可以在 Firefox 中获得所有这些以及更多功能。但是,功能的完善程度、这些功能扩展的速度以及它们默认包含在浏览器的每个副本中的事实,已被证明在我的日常工作中非常有用。

但是,这还不是全部。Chrome 为开发人员提供了以多种方式扩展浏览器的机会,包括添加新的开发人员工具和功能。例如,我一直在使用“Ghostery”扩展程序来向我显示在加载页面时包含哪些外部服务(从广告到审计)。这在别人的页面上比在我自己的页面上更有用,但实际上我以这种方式了解了几个有趣的第三方扩展程序。Google Chrome 商店为 Chrome 用户提供(对于 Chromium 用户来说不太容易)大量的扩展程序——有些针对开发人员,有些则更针对最终用户。

事实上,Chrome 的真正力量在于其扩展程序的开放性,这些扩展程序非常容易编写,并且为 Web 开发人员提供了强大的功能——无论是添加新的开发人员功能,还是为客户和用户添加专门的功能。在我的下一篇文章中,我将展示如何创建此类扩展程序以及您可能希望使用它们的方式。

结论

在过去一年中,我发现自己越来越被 Google Chrome 吸引。我终于冒险尝试了一下,将其设置为我的默认浏览器,并且我没有失望——无论是作为开发人员还是用户。有些东西我确实想念,例如 Firefox 在我的 Android 手机和笔记本电脑之间同步选项卡的能力,但我可以克服这一点。在大多数情况下,我发现过渡到 Chrome 是平稳而轻松的,而且非常值得。

资源

有关 Google Chrome 的信息,请访问 http://google.com/chrome。Chromium 开源项目位于 http://chromium.org

有关开发人员工具的一些基本信息,请访问 https://developers.google.com/chrome-developer-tools

Reuven M. Lerner 是一位资深的 Web 开发人员,提供 Python、Git、PostgreSQL 和数据科学方面的培训和咨询服务。他撰写了两本编程电子书(Practice Makes Python 和 Practice Makes Regexp),并为程序员发布免费的每周新闻通讯,网址为 http://lerner.co.il/newsletter。Reuven 在 Twitter 上的账号是 @reuvenmlerner,与妻子和三个孩子住在以色列的莫迪因。

加载 Disqus 评论