Elmデバッガのサイドバーが小さすぎます。どのようにそれを拡張するには？

Question

私は長いメッセージを持っており、最後の部分を除いて同じです。あなたが下で見ることができるように - 私は違いを伝えることはできません： - 彼らは実際に異なっています。

私はクロームでデバッガを開きましたし、私はこれを見た：

をしかし、あなたが期待するかもしれないので、これはページのリロードでは動作しません。それは30chに戻ります。

質問：このスタイルは保持されます

？だから私は常に70 chでこのデバッガのサイドバーを持っているそれらを変更することによって。 これを行うには良い方法がありますか？

ノード：70 chで固定するのではなく、サイズを変更できるようにすればさらに良いでしょう。しかしこれは今のところ十分です。

Answer 1

あなたは一人ではありません.Githubはissueです。

Answer 2

@Simon Hが指摘しているように、これはまだ修正されていません。クラスを検索するには

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

に

移動します - しかし、それまでは、あなたがこれを行うことができますサイズ変更可能なdebugger-sidebarを持っています

これはelm-liveでの保存時にも機能します。しかし、何らかの理由でelm-stuffフォルダを削除した場合、elm-stuffは即座にビルドされるため、通常に戻ります。 私は役立ちます:) @rtfeldmanプルリクエストhere

希望からこれを撮影した

EDIT：

は最近、いくつかの改善がありました（モデルはアップデート中に開いたままになります。..素晴らしいです！ ！：D）、物が動いた。あなたがこれをしたい場合：

私のgifレコーダーは600pxしかありません - 穴のものは記録できません。見つけて、内側と開くDebug.elm

ステップ2. がstyles機能を見つけ、そして -

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

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

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

ステップ1. GO TO：スタイルを変更するには

ステップ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-dev-serverはメモリ内の変更されていないelm-stuffフォルダの形で動作しているため、webpackの再構築を再起動してください。