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

问题描述

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

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

但是，这在页面重新加载上无法正常工作。它恢复为30 ch。

问题：

此样式在哪里保持？因此，通过修改它们，我始终在70 ch处具有此调试器侧栏。
还是有更好的方法呢？

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

解决方案

正如@Simon H指出的那样，此问题尚未解决。但是直到那时-要具有可调整大小的 debugger-sidebar ，您可以执行以下操作：

进入：

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

搜索以下类： .debugger-sidebar
，然后添加：

  .debugger-sidebar {
 display：block; 
浮动：左； 
宽度：30ch； 
身高：100％； 
颜色：白色； 
 background-color：rgb（61，61，61）; 
 
 / *添加这2行* / 
overflow-x：自动; 
调整大小：水平； 
} 
  

它也可以与elm-live一起保存。但是，如果出于某种原因删除了elm-stuff文件夹，它将恢复正常-因为elm-stuff是动态生成的。
我已从@rtfeldman pull-request中获取了此信息

我的gif记录器只能记录600px-无法记录孔洞的东西。要更改样式，请执行以下操作：

步骤1。转到：

elm-stuff /包/ elm-lang / virtual-dom /<您的版本号ex 2.0.4> /src/VirtualDom/Debug.elm -并打开 Debug.elm

步骤2。
查找样式函数，然后在内部找到：

  #debugger {
宽度：100％
高度：100％; 
 font-family：等宽字体； 
 
显示：flex; -在此处添加display flex。 
} 
  

第3步。找到：

  .debugger-sidebar {
 display：block; 
浮动：左； 
宽度：30ch； 
身高：100％； 
颜色：白色； 
 background-color：rgb（61，61，61）; 
 
宽度：30％； -添加这3行-也许您想要的宽度大于30％。 
overflow-x：自动; 
调整大小：水平； 
} 
  

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

对于webpack用户。
还要确保在完成操作后重新启动webpack构建这是因为webpack-dev-server正在从内存中未更改的elm-stuff文件夹工作，并且在没有重新启动的情况下不会接受此更改。

I have long Msg and they are the same except the last part. As you can see below - i can't tell the difference: - they are actually different.

I've open up the debugger with chrome and i saw this:

But this doesn't work on page reload as you might expect. It reverts back to 30 ch.

Question:

Where are this styles kept? So that by modifying them i always have this debugger-sidebar at 70 ch.Or is there a better way to do this?

Node: It would be even better if i can make it resizable instead of fixed at 70 ch. But this is enough for now.

解决方案

As @Simon H pointed out this is not fixed yet . But until then - to have a resizable debugger-sidebar you can do this:

Go into:

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

Do a search for the class: .debugger-sidebarand then add:

.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;
}

It works on save with elm-live also. But if you delete the elm-stuff folder for some reason it will get back to normal - because elm-stuff is build on the fly.I've taken this from @rtfeldman pull-request here

Hope that helps:)

EDIT:

There has been some improvements recently (model stays open during updates.. awesome !!:D ) and stuff was moved around. If you want this:

My gif recorder only does 600px - can't record the hole thing. To change the styles:

step 1. go to:

elm-stuff/packages/elm-lang/virtual-dom/ < your version number ex 2.0.4 > /src/VirtualDom/Debug.elm - and open up Debug.elm

step 2.Find styles function, and inside, locate:

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

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

step 3. find:

.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;
}

Don't delete elm-stuff folder - if you do all this steps need to be done again.

For webpack users.And also make sure you restart webpack build after doing this - because webpack-dev-server is working form the unchanged elm-stuff folder in memory - and will not pick up this change without a restart.

这篇关于Elm调试器侧栏太小。如何扩展呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！