在Cloudflare，我们一直在寻找改善员工开发体验的方法，并使之成为编写无服务器的最方便的平台代码。As你们中的一些人可能已经从我们的公开发行说明中注意到cloudflareworkers.com或者在Cloudflare Workers仪表板中，最近在检查员。但是在我们开始弄清楚它是什么之前，让我们先看看cloudflareworkers.com：在打印对控制台。一般，调试工作线程时，从客户端devtools可以看到的只是浏览器和Cloudflare Worker运行时之间的交互。然而，与大多数其他服务器端运行时一样，您的代码和实际源代码之间的交互隐藏。这个在哪里控制台.log进来。虽然不是最方便的，打印随机的东西出来是一个相当流行的调试技术。不幸的是，它的默认输出对调试网络交互没有多大帮助。如果您试图扩展请求或响应对象，您所能看到的只是一堆懒惰的对象访问者：你可以一个接一个地展开它们，得到一些属性，但是，当涉及到像头这样的重要部分时，这没有多大帮助要么：所以，自从工人们成立以来，相反，我们建议使用某些JS技巧将头转换为更具可读性格式：这行稍微好一点，但不能很好地伸缩，尤其是当您试图调试页面上的各种请求和来自工作线程的子请求之间的复杂交互时。所以我们想：我们怎样才能做得更好？如果您熟悉Chrome开发工具，您可能已经注意到，我们已经在UI中提供了它的精简版本，带有基本控制台和源代码面板。显而易见的解决方案是：除了这些，为什么不公开现有的网络面板？我们就这么做了。不幸的是，说起来容易做起来难。如果您已经熟悉了Network选项卡，并且对技术实现细节感兴趣，可以跳过下一步部分。什么你能用一下新面板吗？您应该能够使用常规Chrome DevTools网络面板中提供的大多数功能，但是不要检查浏览器和Cloudflare之间的交互（这是browser DevTools能够提供给您的最大限度的功能），现在，您可以通过好吧。这个意味着您可以查看请求和响应头，包括工作线程内部的头和C提供的头loudflare:检查验证modi内容的原始响应证书：也一样对于生的回答：你可以还要检查一下时间吗让工人从你的网站：不过，请注意，调试服务的计时将与不同位置的生产中的计时不同，因此，只将这些请求与同一页面上的其他请求进行比较，或者在您不断迭代代码时与同一请求进行比较是有意义的工人。你可以查看每个请求的发起者-如果您的工作线程包含由不同路径处理的复杂路由，这可能会很有用，或者，如果您想简单地检查页面上的哪些请求被截获并在全部：基本功能就像按内容类型过滤一样工作：和，最后，您可以将子请求复制甚至导出为HAR，以便进一步i检查：怎么了我们这么做？到目前为止，我们一直在使用内置的检查器模式，它是专门为JavaScript目标而设计的。这使得它可以避免加载大多数需要真正浏览器（基于Chromium）后端的组件，而只留下可以在任何嵌入程序中直接与V8集成的核心，无论它是节点.js或者，在我们的例子中，是Cloudflare工人们。幸运的是, DevTools协议本身有很好的文档记录-chromedevtools.github.io/devtools-协议/——方便第三方实现者。而这通常在客户端使用（用于编辑器集成），也有一些服务器端的第三方实现器，即使是对于非JavaScript目标，比如Lua、Go，在桌面和移动设备上进行ClojureScript甚至系统范围的网络调试：github.com/ChromeDevTools/awesome-铬-开发工具。所以没有什么可以阻止我们提供我们自己的networkdomain实现来提供本机DevTools经验。开工人后端，我们已经负责网络堆栈，这意味着我们可以访问所有需要报告的信息，并且可以将所有请求/响应处理程序封装到自己的钩子中，以将其发送回检查员。沟通在检查器和调试器后端之间通过WebSockets发生。到目前为止，我们只是接收消息并将它们直接传递给V8。但是，如果我们想自己处理网络消息，那就行不通了，我们需要实际解析消息。收件人以一种标准的方式来实现这一点，V8提供了一些构建脚本来为任何给定的域列表生成协议处理程序。虽然Chromium使用这些方法，但它们需要相当多的配置和定制胶水，用于不同级别的消息序列化、反序列化和错误处理。开另一方面，用于通信的协议本质上只是JSON-RPC，而我们已经在幕后使用的capnproto提供了JSON（de）序列化支持，因此重用它比为V8构建单独的粘合层更容易运行时.callFrame我们只需要定义一个capnp结构this:struct CallFrame{#运行时错误和断言的堆栈项。functionName@0:Text；#JavaScript函数名。scriptId@1:scriptId；#JavaScript脚本id。url@2:Text；#JavaScript脚本名称或url。lineNumber@3:Int32；#JavaScript脚本行号（从0开始）。columnNumber@4:Int32；#JavaScript脚本列号（从0开始）。}好的，通过将这两个结合起来，我们现在可以自己解析和处理受支持的networkinspector消息，并将其他消息传递给V8平常。现在，我们需要对前端进行一些更改。等等，你可能会问，这些改变的目的不是要和前端说同样的协议吗？是的，但是还有其他的挑战。第一最重要的是，因为Network tab是为在浏览器中使用而设计的，它依赖于各种实际上与我们无关的组件，如果按原样拉进去，不仅会使前端代码更大，而且还需要额外的后端支持。其中一些用于跨选项卡集成（例如，使用探查器），但有些是网络选项卡本身的一部分-例如，在调试服务器端代码时使用请求阻止或移动限制没有多大意义。所以我们需要手动解开绳子给，再来一杯有趣的挑战是如何处理响应机构。通常，当您在浏览器的"网络"选项卡中单击一个请求，然后请求查看其响应正文时，devtools前端会发送一个Network.getResponseBody消息发送到浏览器后端，然后浏览器将其发送回来。什么这意味着，只要"网络"选项卡处于活动状态，浏览器必须将来自页面的所有请求的所有响应存储在内存中，而不知道将来到底会不会请求这些响应。这种延迟处理对于本地甚至远程Chrome调试非常有意义，在这里您通常完全负责这两者不管怎么样，对于我们来说，将所有用户的所有这些响应存储在调试后端的内存中并不理想。在对不同的解决方案进行了反复的讨论之后，我们决定偏离协议，而是将原始响应体发送给检查器前端，让前端存储它们。由于在调试会话期间通过网络发送不必要的数据，这看起来并不理想，但是这些折衷对于共享调试来说更有意义后端。那里是否要进行各种较小的挑战和错误修复并向上游转移，但让它们留在场景。是吗这个功能对你有用吗？还有哪些特性可以帮助您更有效地调试和开发worker？或者你想自己做工人和工具？让我们知道！P、 S：如果你想在假期里找一个有趣的个人项目，这可能是你试用工人的机会，并试用我们的新工具。