开发者工具摘要,2016 年 9 月 - 2016 年及以后的开发者工具

2016 年 Google I/O 大会圆满结束。开发者工具在 I/O 大会上有着举足轻重的地位,包括 Paul Bakaus、Paul Irish 和 Seth Thompson 的演讲,概述了开发者工具的未来。请观看下面的视频,或继续阅读,详细了解开发者工具在 2016 年及以后的发展方向。

编写

开发者工具旨在简化 Web 开发生命周期的每个阶段。您可能知道开发者工具可以帮助您调试网站或分析网站,但您可能不知道如何使用它来帮助您编写网站。“创作”是指创建网站的行为。在可预见的未来,我们的目标之一就是让您更轻松地跨多种设备迭代、实验和模拟您的网站。

设备模式

开发者工具团队继续对 Device Mode 体验进行迭代,并在 Chrome 49 中完成了首次重大升级。如需简要了解更新,请查看 3 月份发布的博文(面向移动优先世界的新设备模式)。首要目标是,提供流畅的工作流,让您可以在所有外形规格的设备上查看和模拟您的网站。

下面简要总结了自我们早在 3 月份发布该文章以来,已在 Canary 中推出的一些 Device Mode 更新。

将网页作为特定设备查看时,您可以在网页周围展示相应的设备硬件,获得更加沉浸其中的体验。

目前显示的是设备边框

借助设备屏幕方向菜单,您可以在不同的系统界面元素(例如导航栏和键盘)处于活动状态时查看页面。

显示系统界面元素

桌面版故事也得到了改进。借助 Device Mode 的缩放功能,您可以模拟比实际操作屏幕更大的桌面设备屏幕,例如 4K(3840px x 2160px)屏幕。

当前显示的是 4K 屏幕

您可以直接在 Device Mode 界面中限制网络流量,而无需切换到“Network”面板。

网络节流

来源差异

当您对网站的样式进行迭代更改时,很容易无法跟踪所做更改。为了解决此问题,开发者工具将使用来源面板的行号边线上的可视化提示来帮助您跟踪更改。删除的行用红线突出显示,修改过的行用紫色突出显示,新修改的线用绿色突出显示。

“Sources”面板中的“Source diff”(来源差异)

您还可以在新的“快速源代码”抽屉式导航栏标签页中跟踪更改:

快速源代码抽屉式导航栏标签页

利用“快速来源”标签页,您可以在处理 CSS 规则的同时,专注于 HTML 或 JavaScript 源代码。此外,当您点击“样式”窗格中的 CSS 属性时,“快速来源”标签页会自动跳转到并突出显示来源中的定义。

在 Chrome Canary 版中启用来源差异实验即可立即试用。

Live Sass 编辑

下面简要介绍了即将对 Sass 编辑工作流程所做的一些重大改进。这些功能还处于早期实验阶段。当这些功能可供你试用时,我们会在后面的帖子中跟进。

基本上,开发者工具将支持您按照自己一直预期的那样查看和修改 Sass 变量。点击一个从 Sass 变量编译的值,新的“快速来源”标签页会跳转到该变量的定义。

查看 Sass 变量定义

修改从 Sass 变量编译的值时,您所做的修改会更新 Sass 变量,而不仅仅是您选择的单个属性。

渐进式 Web 应用

查看 2016 年 Google I/O 大会上的 Web 和 Chrome 演讲,您会发现网页开发领域正逐渐出现一个巨大的主题:渐进式 Web 应用

随着渐进式 Web 应用模型的不断涌现,开发者工具正在快速迭代,为开发者提供创建出色的渐进式 Web 应用所需的工具。我们认识到,构建和调试这些现代应用常常有独特的要求,因此开发者工具专门用于进行渐进式 Web 应用开发。打开 Chrome Canary,您会看到“资源”面板已替换为“应用”面板。之前“资源”面板中的所有功能仍然存在。其中只有几个专为渐进式 Web 应用开发而设计的新窗格:

“Manifest”窗格可以直观地展示应用清单文件。在这里,您可以手动触发“添加到主屏幕”工作流。

“Manifest”窗格

通过 Service Workers 窗格可以检查为当前页面注册的 Service Worker 并与之交互。

“Service Worker”窗格

而借助“清除存储空间”窗格,您可以擦除各种数据,确保网页没有任何干扰。

清空存储空间窗格

JavaScript

跨越前端和后端之间的边界是全栈 Web 开发的一个难点。如果您发现自己的后端在调试 Web 应用时返回 500 状态代码,则表示您实际上已达到开发者工具有用性极限,需要更改上下文并启动后端开发环境来调试问题。

然而,对于使用 Node.js 编写的后端,前端和后端之间的边界开始模糊不清。由于 Node.js 在 V8 JavaScript 引擎(Google Chrome 也采用该引擎)上运行,我们希望能够从开发者工具中调试 Node.js。多亏了 V8、开发者工具和适用于 Node.js 的 Google Cloud Platform 团队,您现在可以使用开发者工具强大的调试功能来内省 Node.js 应用。其功能已经达到 Node.js 每夜构建版本,尽管开发者工具集成仍在进行完善,未纳入主要版本。有一天,通过开发者工具调试 Node.js 应用就像在任何 Chrome 窗口中传递 node --inspect app.js 和通过开发者工具建立连接一样简单。

尽管 Node Inspector 等现有工具提供基于 GUI 的调试体验,但新的 Node.js 开发者工具集成仍会与开发者工具的最新调试功能(例如异步堆栈调试、黑箱和 ES6 支持)保持同步。