如何在Chrome Dev Tools监视面板中查看或滚动长表达式？

Question

您可以在下面的屏幕截图中看到，我被迫尝试从一个很长的变量名中识别出该值。但是由于某些原因，您无法水平滚动Chrome的（v81）“监视”面板以查看其余的截断值。如果不尽可能不拉开窗口，真的没有办法看到此值吗？

Answer 1

这是一个令人讨厌的错误，它使监视面板在很多情况下都无法使用。

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

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

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

---

[为方便起见，您可以将代码保存在snippets中，以后再运行它，或者在命令面板中键入代码段名称（Ctrl-P或Cmd-P热键）。

如何打开devtools-on-devtools：

1. 首先打开devtools并将其在菜单中的Dock side切换到一个分离的（浮动的）窗口

在现在分离的devtools中，在MacOS上按Ctrl

Shift i或⌘ ⌥ i，这将在新窗口中打开devtools-on-devtools