Elm調試器邊欄太小。如何擴展它？

我有很長的消息，他們是一樣的，除了最後一部分。正如你可以在下面看到的 - 我無法區分它們： - 它們實際上是不同的。Elm調試器邊欄太小。如何擴展它？

我已經打開了鍍鉻的調試器，我看到這一點：

但這並不在頁面重載的工作正如您所料。它恢復到30 ch。

問：

在哪裏這個風格保持？所以通過修改它們，我總是在70 ch上有這個調試器邊欄。還是有更好的方法來做到這一點？

節點：如果我可以調整大小而不是固定在70 ch，那會更好。但現在這足夠了。

來源

2017-01-09 AIon

你並不孤單，這裏有一個Github issue。

來源

2017-01-10 06:34:32

正如@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拉請求here

希望幫助:)

編輯：

已經有一些改進，最近（模型保持更新期間開放..真棒！！：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文件夾 - 並且不會在沒有重新啓動的情況下接收此更改。

來源

2017-01-10 15:21:35 AIon

哇，我現在可以調整它。謝謝 – rofrol

試過這個，但調整大小最終將模型信息推到邊欄下方。 – Bezewy

@Bezewy是真的，還有另一個需要改變的屬性 - '正確容器的寬度' - 被設置爲'100％ - 30ch'，30ch是'debugger-sidebar'的大小 - 所以只需改變該屬性是「100％ - 50ch」或什麼的。我不記得我頭頂的名字是什麼，但是你可以直接在'.debugger-sidebar'上找到它，據我所知。 – AIon

Elm調試器邊欄太小。如何擴展它？

回答

相關問題