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

Question

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

我用chrome打开调试器,我看到了这个:

但是这并不像您期望的那样在页面重新加载时起作用.它恢复到30 ch.

题:

这种风格保存在哪里？因此,通过修改它们,我总是将此调试器侧边栏设置为70 ch.或者有更好的方法吗？

节点:如果我可以调整大小而不是固定在70 ch,那就更好了.但现在这已足够了.

Answer 1

你并不孤单,有一个Github 问题.

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 这里获取

希望对您有所帮助：）

编辑：

最近有了一些改进（模型在更新过程中保持打开状态。.太棒了！：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用户。 并且还要确保执行此操作后重新启动webpack构建-因为webpack-dev-server正在内存中未更改的elm-stuff文件夹中工作-且不重新启动就不会获取此更改。