嘿，当然可以实现！这里分两种场景来给你说明，分别对应模拟DevTools里的Offline节流状态和直接触发页面的online/offline事件：

1. 模拟DevTools的Offline节流（真实改变网络状态） #

如果你想完全复刻点击「Network面板 → 节流下拉菜单 → Offline」的操作，也就是让浏览器真的进入离线模式，可以用Chrome DevTools提供的调试协议API。在DevTools的Console面板中直接执行以下代码即可：

// 切换到离线状态
await chrome.devtools.network.setNetworkConditions({
  offline: true,
  latency: 0,
  downloadThroughput: 0,
  uploadThroughput: 0
});

// 恢复在线状态（回到正常网络）
await chrome.devtools.network.setNetworkConditions({
  offline: false,
  latency: 0,
  downloadThroughput: -1, // -1表示恢复默认无限制
  uploadThroughput: -1
});

注意：这段代码需要在DevTools的控制台上下文执行（不是页面的上下文），现在主流Chrome版本都支持这个API。执行后你会看到Network面板的节流状态自动切换到Offline，和手动点击的效果完全一致。

2. 仅触发页面的online/offline事件（不改变真实网络） #

如果你只是想让页面中监听online或offline事件的代码触发，不需要真的断网，那直接在控制台里派发对应的事件就行：

// 触发离线事件，页面的offline监听器会响应
window.dispatchEvent(new Event('offline'));

// 触发在线事件，页面的online监听器会响应
window.dispatchEvent(new Event('online'));

这种方法更轻量，适合测试页面的离线逻辑，但不会影响浏览器的真实网络连接状态。

补充说明 #

• navigator.onLine是只读属性，你没办法直接修改它的值，但上面第一种方法切换网络状态后，navigator.onLine会自动更新为对应的false（离线）或true（在线）；第二种方法派发事件不会改变navigator.onLine的值。
• 如果你用自动化测试工具（比如Puppeteer），也可以通过对应的API控制网络状态，原理和上面的DevTools协议是一致的。

内容的提问来源于stack exchange，提问作者onepar