如何在 Chrome 开发工具监视面板中查看或滚动长表达式？

Question

正如您在下面的屏幕截图中看到的，我不得不尝试从一个很长的变量名中辨别值。但出于某种原因，您无法水平滚动 Chrome 的 (v81) 监视面板来查看截断值的其余部分。如果不尽可能地拉伸 window 真的没有办法看到这个值吗？

Answer 1

这是一个恼人的错误，导致监视面板在很多情况下无法使用。

此选项卡中此 devtools 会话期间的临时解决方法是通过 运行在 devtools-on-devtools 中添加以下代码来修补 devtools 本身.

1. 切换到Sources面板
2. 展开Watch并确保至少存在一个表达式
3. 打开devtools-on-devtools和运行下面的代码
4. 关闭 devtools-on-devtools

(() => {
  try {
    UI.panels.sources
      ._watchSidebarPane[UI.View.widgetSymbol || UI.View._widgetSymbol]
      ._watchExpressions[0]._element.getRootNode()
      .appendChild(document.createElement('style')).textContent = `
        .watch-expression-title {
          display: flex;
        }
        .name {
          max-width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        `;
  } catch (e) {
    console.warn('Add an expression and expand the Watch list.');
  }
})();

---

为方便起见，您可以将代码保存在 snippets 和 运行 中，稍后再从那里或通过在命令选项板中键入代码片段名称 (Ctrl-P 或 Cmd-P 热键).

如何打开 devtools-on-devtools：

1. 先打开 devtools 并在菜单中将其 Dock side 切换为分离（浮动）window

2. 在现在分离的 devtools 中按 CtrlShifti 或者⌘⌥i 在 MacOS 上，
   这将在新的 window

中打开 devtools-on-devtools