榆树调试器侧边栏太小了。如何延长？

Question

我有很长的Msg，除了最后一部分他们是一样的。正如你在下面看到的那样 - 我无法区分： - 它们实际上是不同的。

我用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录音机只有600px - 无法记录这个洞。要更改样式：

步骤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 build - 因为webpack-dev-server正在从内存中未更改的elm-stuff文件夹工作 - 并且不会在没有重新启动的情况下接收此更改。