Elm 调试器侧边栏太小。如何扩展它？

Question

我有很长的消息，除了最后一部分外，它们是相同的。正如您在下面看到的 - 我无法区分： - 它们实际上是不同的。

我用 chrome 打开了调试器，我看到了这个：

但正如您所料，这在页面重新加载时不起作用。它恢复到 30 ch。

问题：

这些样式保存在哪里？因此，通过修改它们，我总是在 70 ch 处拥有这个调试器侧边栏。 或者有更好的方法吗？

节点：如果我可以调整大小而不是固定在 70 ch，那就更好了。但这已经足够了。

Answer 1

你并不孤单，这里有一个 Github issue。

Answer 2

正如@Simon H 指出的那样，这还没有解决。但在那之前 - 要拥有可调整大小的 debugger-sidebar，您可以这样做：

进入：

elm-stuff/packages/elm-lang/VirtualDom/Debug.elm

搜索课程：.debugger-sidebar 然后添加：

.debugger-sidebar {
  display: block;
  float: left;
  width: 30ch;
  height: 100%;
  color: white;
  background-color: rgb(61, 61, 61);

  /* add this 2 lines */
  overflow-x: auto;
  resize: horizontal;
}

它也适用于 elm-live 保存。但是，如果您出于某种原因删除了 elm-stuff 文件夹，它将恢复正常 - 因为 elm-stuff 是动态构建的。 我从@rtfeldman pull-request here

希望对您有所帮助:)

编辑：

最近有一些改进（模型在更新期间保持打开状态.. 太棒了 !!:D ）并且东西被转移了。如果你想要这个：

我的 gif 记录器只记录 600 像素 - 无法记录洞的东西。要更改样式：

第 1 步。转到：

elm-stuff/packages/elm-lang/virtual-dom/ < your version number ex 2.0.4 > /src/VirtualDom/Debug.elm - 打开Debug.elm

第 2 步。 找到styles函数，并在里面定位：

#debugger {
  width: 100%
  height: 100%;
  font-family: monospace;

  display: flex; -- add display flex here.
}

第 3 步。查找：

.debugger-sidebar {
  display: block;
  float: left;
  width: 30ch;
  height: 100%;
  color: white;
  background-color: rgb(61, 61, 61);

  width: 30%;  -- add this 3 lines - maybe you want more width then 30%.
  overflow-x: auto;
  resize: horizontal;
}

不要删除 elm-stuff 文件夹 - 如果您执行了所有这些步骤，则需要再次执行。

适用于 webpack 用户。 并确保在执行此操作后重新启动 webpack 构建 - 因为 webpack-dev-server 正在内存中未更改的 elm-stuff 文件夹中工作 - 并且不会在不重新启动的情况下获取此更改。