2016 年 Google I/O 大会已圆满落幕。开发者工具在 I/O 大会上占据了重要位置，其中 Paul Bakaus、Paul Irish 和 Seth Thompson 的演讲概述了开发者工具的未来。请观看下面的视频或继续阅读，详细了解 2016 年及之后的 Web 开发者工具的发展方向。
编写
开发者工具旨在简化 Web 开发生命周期的每个阶段。您可能知道开发者工具可以帮助您调试或分析网站，但可能不知道如何使用它来帮助您构建网站。“创作”是指创建网站的行为。我们在未来可预见的时间内的一个目标是，让您能够更轻松地在多种设备上迭代、实验和模拟网站。
设备模式
开发者工具团队一直在不断改进设备模式体验，该模式在 Chrome 49 中进行了首次重大升级。请参阅 3 月份的帖子（面向移动优先时代的新设备模式），大致了解这些更新。我们的首要目标是提供顺畅的工作流，让您能够在各种设备规格上查看和模拟网站。
自我们在 3 月发布这篇文章以来，Canary 中就推出了一些设备模式更新，下面简要介绍了这些更新。
以特定设备查看网页时，您可以显示网页周围的设备硬件，从而更身临其境地体验。
借助设备屏幕方向菜单，您可以在不同的系统界面元素（例如导航栏和键盘）处于活动状态时查看页面。
桌面版的体验也得到了改进。借助设备模式的缩放功能，您可以模拟比实际工作屏幕更大的桌面屏幕，例如 4K（3840 像素 x 2160 像素）屏幕。
您可以直接从设备模式界面节流网络，而无需切换到“网络”面板。
源代码差异
在迭代网站的样式时，很容易丢失对所做更改的跟踪。为解决此问题，DevTools 将在“Sources”面板的行号边线上使用视觉提示，帮助您跟踪更改。已删除的行用红线表示，已修改的行用紫色突出显示，新行用绿色突出显示。
您还可以在新的“快捷来源”抽屉式标签页中跟踪所做更改：
首次使用“快捷来源”标签页时，您可以同时关注 HTML 或 JavaScript 源代码和 CSS 规则。此外，当您在“Styles”窗格中点击某个 CSS 属性时，“Quick Source”标签页会自动跳转到该属性在源代码中的定义并将其突出显示。
立即在 Chrome Canary 中启用源代码差异实验，试用该功能。
实时编辑 Sass
下面简要介绍了即将对 Sass 编辑工作流做出的一些重大改进。这些功能目前处于实验阶段的早期阶段。当这些功能可供您试用时，我们会在后续的文章中进行跟进。
从本质上讲，DevTools 将让您能够查看和修改 Sass 变量，就像您一直希望的那样。点击从 Sass 变量编译的值，新的“快捷来源”标签页会跳转到该变量的定义。
修改从 Sass 变量编译的值时，所做的修改会更新 Sass 变量，而不仅仅是您所选的各个属性。
渐进式 Web 应用
查看 2016 年 Google I/O 大会上有关 Web 和 Chrome 的演讲列表，您会发现 Web 开发领域出现了一个重要主题：渐进式 Web 应用。
随着渐进式 Web 应用模型的出现，DevTools 正在快速迭代，以提供开发者创建出色的渐进式 Web 应用所需的工具。我们意识到，构建和调试这些新型应用通常需要满足一些独特的要求，因此 DevTools 专门为渐进式 Web 应用开发创建了一个面板。打开 Chrome Canary，您会发现“资源”面板已替换为“应用”面板。“资源”面板中的所有旧版功能都仍然保留。只有几个新窗格专门用于渐进式 Web 应用开发：
通过“清单”窗格，您可以直观地查看应用清单文件。在这里，您可以手动触发“添加到主屏幕”工作流。
借助“Service Workers”窗格，您可以检查并与为当前网页注册的 Service Worker 进行交互。
借助“清除存储空间”窗格，您可以清除所有类型的数据，以便查看一张干净的页面。
JavaScript
跨越前端和后端之间的边界是全栈 Web 开发的难点。如果您在调试 Web 应用时发现后端返回 500 状态代码，则意味着开发者工具已无法再发挥作用，您需要更改上下文并启动后端开发环境来调试问题。
不过，随着后端采用 Node.js 编写，前端和后端之间的界限开始变得模糊。由于 Node.js 在 V8 JavaScript 引擎（与为 Google Chrome 提供支持的引擎相同）上运行，因此我们希望能够通过 DevTools 调试 Node.js。得益于 V8、DevTools 和 Google Cloud Platform for Node.js 团队，您现在可以使用 DevTools 的所有强大调试功能来检查 Node.js 应用。该功能已在 Node.js 每夜 build 中推出，但在纳入主要版本之前，DevTools 集成仍在不断完善中。将来，通过开发者工具调试 Node.js 应用将会非常简单，只需传递 node --inspect app.js 并在任何 Chrome 窗口中通过开发者工具进行连接即可。
虽然 Node Inspector 等现有工具提供基于 GUI 的调试体验，但新的 Node.js 与开发者工具集成将始终采用开发者工具的最新调试功能，例如异步堆栈调试、黑盒化和 ES6 支持。