Elm Debugger Sidebar ist zu klein. Wie erweitert man es?

Question

Ich habe lange Msg und sie sind die gleichen außer dem letzten Teil. Wie Sie unten sehen können - ich kann den Unterschied nicht unterscheiden: - Sie sind tatsächlich unterschiedlich.

Ich habe öffnen Sie den Debugger mit Chrom und ich sah diese:

Aber das funktioniert nicht auf Seite neu laden wie Sie vielleicht erwarten. Es wird wieder auf 30 ch zurückgesetzt.

Frage:

Wo sind diese Arten gehalten? So dass ich diese Debugger-Sidebar immer bei 70 ch habe, indem ich sie ändere. Oder gibt es einen besseren Weg, dies zu tun?

Knoten: Es wäre noch besser, wenn ich es in der Größe veränderbar machen kann, anstatt bei 70 ch zu fixieren. Aber das ist genug für jetzt.

Answer 1

Sie sind nicht allein, es gibt eine Github issue dafür.

Answer 2

Wie @Simon H darauf hingewiesen, ist dies noch nicht behoben. Aber bis dahin - haben eine veränderbare debugger-sidebar Sie können dies tun:

Go in:

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

Führen Sie eine Suche für die Klasse: .debugger-sidebar und fügen Sie dann:

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

Es funktioniert auf speichern mit Ulme-leben auch. Aber wenn du den elm-stuff-Ordner aus irgendeinem Grund löschst, wird er wieder normal - weil Ulmen-Zeug im Handumdrehen erstellt wird. Ich habe genommen dies aus @rtfeldman Pull-Anfrage here

Hoffnung, das hilft :)

EDIT:

Es hat vor kurzem einige Verbesserungen (Modell bleibt geöffnet während Updates .. awesome! !: D) und Zeug wurde herumbewegt. Wenn Sie das wollen:

Mein GIF-Recorder macht nur 600px - kann das Loch Ding nicht aufzeichnen. Um die Stile zu ändern:

Schritt 1. Gehen Sie zu:

elm-stuff/packages/elm-lang/virtual-dom/ < your version number ex 2.0.4 > /src/VirtualDom/Debug.elm - und eröffnen Debug.elm

Schritt 2. Finden styles Funktion und innen, suchen:

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

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

Schritt 3.finden:

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

Sie elm-stuff Ordner nicht löschen - wenn Sie alles tun, diese Schritte wieder getan werden müssen.

Für Webpack-Benutzer. Und stellen Sie sicher, dass Sie Webpack Build danach neu starten - weil Webpack-dev-Server aus dem unveränderten Ulm-Stuff-Ordner im Arbeitsspeicher arbeitet - und diese Änderung nicht ohne einen Neustart übernehmen.