search

elmish / debugger

Time-traveling debugger and import export for Elmish apps
https://elmish.github.io/debugger
Other
41 stars 10 forks source link

How do you use the Elmish Debugger? #59

Closed mrakgr closed 1 year ago

mrakgr commented 1 year ago

I've installed the SAFE template, updated it, and managed to get all the package errors out of the way. 

#if DEBUG
|> Program.withDebugger
#endif

The debugger is set on as expected. But when I run the program using dotnet run, and enter the http://localhost:8080/ page in the browser, I do not see anything related to debugging on the page itself. The only related to it are the WebSocket connection to 'ws://localhost:8000/socketcluster/' failed: in the Chrome console. What should I do about that?

They go away if I comment out the code fragment I posted, but I'd like to learn how to use the debugger.

mrakgr commented 1 year ago

More than just wanting to know this for myself, I intend to do a Youtube series covering the SAFE Stack, but not knowing how to deal with the websocket errors and use the debugger is blocking me from starting.

MangelMaxime commented 1 year ago

Hello @mrakgr,

you need to install the browser extension called Redux dev tool.

You can find the instructions and links on the documentation.

https://elmish.github.io/debugger/

OnurGumus commented 1 year ago

@mrakgr it is also discussed briefly in this video https://youtu.be/tKIQfeOXynI?t=881

mrakgr commented 1 year ago

you need to install the browser extension called Redux dev tool.

I did, but I am new to web dev so I do not know what to do with those, sorry. I'll check out the video. I actually watched it briefly a week ago, but the partial frames put me off, so I mentally discounted it. I'll watch it all the way through this time.

OnurGumus commented 1 year ago

@mrakgr I added video at correct timeline

mrakgr commented 1 year ago

Ah, I see where I went wrong. I installed React dev tools instead of the Redux dev tools. The former just gave me Components and the Profiler tabs which do nothing, but the later allows me to do the time travel debugging.

Thank you both.

mrakgr commented 1 year ago

@OnurGumus I have a request, or a video idea, if you'd like. I asked how to debug Fable and SAFE applications on the F# sub, but I haven't gotten instruction that are clear. I'd need to fiddle around to figure this out and I am not sure whether I could manage it. A short video tutorial walking me through this would be great.

OnurGumus commented 1 year ago

@mrakgr in the last video I have also shown the debugging is just there from the browser. As for the SAFE stack, I am not fan of it. I'd like to build my applications manually.

In the future I will show how to debug Fable from VSCode but it's not that advantageous compared to the browser debugging

mrakgr commented 1 year ago

@OnurGumus

I'd like to build my applications manually.

I can understand this. Starting from the low level, and building things up is the best way to cultivate expertise. It is tough to start at a high level (like I am doing) because you cannot take responsibility for all the aspects of the system. This is an issue with the SAFE stack (and high level frameworks in general), though I am not sure if this is the particular issue you have with it.

In the future I will show how to debug Fable from VSCode but it's not that advantageous compared to the browser debugging

I'll be looking forward to it, I just hope the video quality will be better. I saw that you had Camtasia 2022 amongst your shortcuts. I did a few videos myself and it took me 5h of editing for 10m of video, so I understand how time consuming it is to to edit. I am probably going to do much less of it in the future for my own videos, but partial frames like in your latest video are too much as they make it a lot harder to follow what is going on..

mrakgr commented 1 year ago

As said, I started a video series on web dev in Fable. Here is a video on how to use the debugger.