Elm debugger sidebar is too small. How to extend it?

问题

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.

回答1:

You are not alone, there is a Github issue for this.

回答2:

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-sidebar and 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.

来源：https://stackoverflow.com/questions/41555736/elm-debugger-sidebar-is-too-small-how-to-extend-it

标签

elm