如何查看Odoo的WebSocket请求？或修改JS代码不使用Service Workers

Odoo使用Service Workers处理套接字，由于Service Workers是后台工作线程，其网络活动不会显示在页面的网络标签页中。我希望查看WebSocket中发送和接收的消息，但一直无法在Chrome DevTools中查看。请问如何在任意浏览器开发者工具中显示Odoo的WebSocket请求？或者如何修改JavaScript代码，使请求无需使用Service Workers即可正常发送？

一、在浏览器开发者工具中查看WebSocket消息 #

Chrome DevTools操作步骤 #

• 打开Chrome DevTools，切换到Application标签页
• 在左侧导航栏找到Service Workers，选中当前页面对应的Service Worker
• 点击Service Worker条目右侧的Inspect，打开专门的DevTools窗口查看该Service Worker的活动
• 在新窗口的Network标签页，就能看到Service Worker发起的WebSocket连接及收发的消息
• 也可以在原DevTools的Console标签页，通过代码监听Service Worker的消息：

navigator.serviceWorker.controller.addEventListener('message', (event) => {
  console.log('Service Worker收到的消息:', event.data);
});

Firefox开发者工具操作步骤 #

• 打开Firefox开发者工具，切换到Application标签页（旧版本直接找Service Workers标签）
• 找到对应Service Worker，点击调试按钮打开独立调试窗口
• 在调试窗口的网络标签页，即可查看WebSocket的连接和消息内容

二、修改代码绕过Service Worker直接发送请求 #

要让Odoo不通过Service Worker处理WebSocket，需要调整前端代码的两处逻辑：

1. 禁用Service Worker注册：找到Odoo前端入口文件（通常在web.assets_common相关资源中），注释掉Service Worker的注册代码，示例如下：

// 注释掉原Service Worker注册逻辑
// if ('serviceWorker' in navigator) {
//   navigator.serviceWorker.register('/service-worker.js')
//     .then(registration => {
//       console.log('Service Worker registered:', registration);
//     });
// }

2. 修改WebSocket连接逻辑：找到Odoo中初始化WebSocket的代码（比如web_socket.js），替换掉通过Service Worker转发的逻辑，直接由主线程创建WebSocket实例：

// 直接创建WebSocket连接，替代原Service Worker转发逻辑
const socket = new WebSocket('wss://你的Odoo域名/web_socket');
socket.onmessage = (event) => {
  console.log('收到WebSocket消息:', event.data);
};
socket.onopen = () => {
  console.log('WebSocket连接已建立');
};

3. 清除已注册的Service Worker：在浏览器开发者工具的Application > Service Workers中，点击Unregister按钮清除已注册的实例，避免缓存干扰。

内容的提问来源于stack exchange，提问作者Obay Abd-Algader