Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to debug #47

Open
ltfschoen opened this issue Mar 31, 2023 · 9 comments
Open

Unable to debug #47

ltfschoen opened this issue Mar 31, 2023 · 9 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@ltfschoen
Copy link
Contributor

ltfschoen commented Mar 31, 2023 •
edited

I'm been trying to figure out how to setup debugging for introspection using breakpoints. I'm using VSCode.
I pushed my attempts so far in this commit d6b170d.
I want to debug struct Table.
If I run the code with RUST_LOG=debug (i.e. RUST_LOG=debug trunk serve --address=127.0.0.1) then it outputs more debugging logs in the terminal, but not the ones that i introduce in the code using gloo_console::debug or log::debug.
I'm aware that i can use the following to use console.log in the browser https://rustwasm.github.io/wasm-bindgen/examples/console-log.html, but i want to debug the non-private parts of kobold.

I managed to get it to log to console in the browser by following this https://blog.urth.org/2022/02/14/frontend-rust-without-node/#just-use-trunkhttpstrunkrsdev where they suggested using wasm-logger, so it worked in this commit dfc527f, but it only output main() and Editor(), but not the move and ## table logs

I found the info about how to try and debug from these sources.
@maciejhirsz
Copy link
Owner

So the problem is your logger drops at the end of main(). Ideally kobold::start should halt further execution and prevent drops, but I have yet to find a clean way to do it without just throwing an exception in JS.

If you don't care about clean console and want to use the log crate you can add a call to throw_str after kobold::start to prevent drops. You could also wrap the logger in ManuallyDrop to prevent it from being dropped.

Alternatively don't use a logger and use gloo_console or any other wasm binding that calls into any of the console methods.

@ltfschoen
Copy link
Contributor Author

ltfschoen commented Apr 1, 2023 •
edited

I found links that showed how to step-through wasm-bindgen Rust code in Chrome Canary or Chrome Dev and it seems to work. I just can't seem to step into where i want it to. For example I can get it to step through inside view functions like
fn Head, fn Cell, fn EntryInput, fn QRExample but haven't figured out why it doesn't step through fn Editor().
e.g.
Screen Shot 2023-04-02 at 8 00 17 am

Screen Shot 2023-04-02 at 8 04 55 am

It also steps through kobold files so you can get some information about the state variables

This is how I did it (note that most of what i've written is a mixed summary
of what other people wrote about the current status, i've just organised it):

Screen Shot 2023-04-02 at 7 38 01 am

Screen Shot 2023-04-02 at 7 36 20 am

Screen Shot 2023-04-02 at 7 45 47 am

  • Note: If I updated Google Chrome Canary, then I also had to update the extension that I had installed and restart the browser.

@ltfschoen
Copy link
Contributor Author

ltfschoen commented Apr 1, 2023 •
edited

Note: I was getting the following error in the browser caught (in promise) TypeError: Illegal invocation

Screen Shot 2023-04-02 at 9 40 50 am

To fix that I had to remove the data-reference-types in index.html file. i couldn't get it to work with data-reference-types={true} or data-reference-types={false}

That's probably what @71 meant here rustwasm/walrus#231 (comment) when they said 4. If I use --reference-types with wasm-bindgen, llvm-dwarfdump fails with "error: web.wasm: invalid function export", so I cannot use --reference-types. --weak-refs work fine, though.

So now the index.html has the following and it works:

    <link
      data-trunk rel="rust"
      data-keep-debug={true}
      data-type="main"
      data-typescript={false}
      data-wasm-opt="0"
      data-no-demangle={false}
      data-weak-refs={true}
    />

Also note: If you get errors in the browser like caught (in promise) LinkError: WebAssembly.instantiate(): Import #0 module="wbg" function="__wbg_e0366eabf37a397670_7f4bc47df50cbc28" error: function import requires a callable a even if you refresh the page, then use Google Chrome Canary in "Incognito mode", and make sure you right-click the "refresh" icon and click "Empty cache and hard reload"

@ltfschoen
Copy link
Contributor Author

ltfschoen commented Apr 2, 2023 •
edited

So the problem is your logger drops at the end of main(). Ideally kobold::start should halt further execution and prevent drops, but I have yet to find a clean way to do it without just throwing an exception in JS.

If you don't care about clean console and want to use the log crate you can add a call to throw_str after kobold::start to prevent drops. You could also wrap the logger in ManuallyDrop to prevent it from being dropped.

Alternatively don't use a logger and use gloo_console or any other wasm binding that calls into any of the console methods.

So the reason why i was only able to debug in main() and in fn Editor() -> impl View { stateful(State::mock, |state| {, but not in the block inside fn Editor() called move |e: Event<InputElement>| { and not in the block inside fn Editor() called spawn_local(async move {, was because i didn't observe that move |e: Event<InputElement>| { obviously only gets called when the UI has loaded and you click the "Choose file" button and upload a .csv file, since it only gets run when that event happens

Screen Shot 2023-04-02 at 10 02 47 am

So I debugging worked when i did stuff like

#[component]
fn Editor() -> impl View {
    stateful(State::mock, |state| {
        let onload = {
            log::debug!("Editor()");
            let my_struct1 = MyStruct {
                a: "abc".to_owned(),
                b: false,
            };
            let serialized = serde_json::to_string(&my_struct1).unwrap();
            let value = JsValue::from_serde(&serialized).unwrap();
            log::debug!("Editor() {:#?}", value);

            // debug option 1
            assert_eq!(&*serialized, "{\"a\":\"abc\",\"b\":false}");

            // debug option 2
            throw_str(&serialized);

            // debug option 3
            use std::mem::ManuallyDrop;
            let test = ManuallyDrop::new(throw_str(&serialized));

...

...
                spawn_local(async move {
                    log::debug!("spawn_local1");
                    if let Ok(table) = csv::read_file(file).await {
                        let serialized = serde_json::to_string(&table).unwrap();
                        let value = JsValue::from_serde(&serialized).unwrap();
                        console_dbg!("## table0 {:#?}", value);
                        info!("## table1 {:#?}", value);
                        log::debug!("## table2 {:#?}", value);
                        use std::mem::ManuallyDrop;
                        let test = ManuallyDrop::new(throw_str(&serialized));
                        // throw_str("testing1");
                        throw_str(&serialized);
...

I pushed the changes i made to get it to work here https://github.com/ltfschoen/kobold in branch 'luke/invoice-debug'

@ltfschoen
Copy link
Contributor Author

ltfschoen commented Apr 2, 2023 •
edited

But I still don't know how to:

  1. Get breakpoints to trigger if i put them inside these specific blocks move |e: Event<InputElement>| { or spawn_local(async move {. For example if i add breakpoints in those blocks, and reload the page with breakpoints disabled and then activate breakpoints, and then in the UI click "Choose file" button and upload a .csv file, it outputs in the console all the log::debug! from in those blocks, but it doesn't trigger any of the breakpoints in those blocks. The breakpoints work outside of those blocks though.

  2. On macOS, when i'm stepping-through the code debugging, sometimes it displays an error like one of the following, but it still seems to work:


Could not load content for file:///rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/core/src/iter/adapters/map.rs (System error: net::ERR_FILE_NOT_FOUND)

Could not load content for file:///rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/core/src/iter/adapters/step_by.rs (System error: net::ERR_FILE_NOT_FOUND)

Could not load content for file:///rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/core/src/char/methods.rs (System error: net::ERR_FILE_NOT_FOUND

Could not load content for file:///rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/alloc/src/boxed.rs (System error: net::ERR_FILE_NOT_FOUND)

Could not load content for file:///rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/core/src/mem/manually_drop.rs (System error: net::ERR_FILE_NOT_FOUND)

Could not load content for file:///rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/core/src/ops/function.rs (System error: net::ERR_FILE_NOT_FOUND)

Could not load content for file:///rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/core/src/macros/mod.rs (System error: net::ERR_FILE_NOT_FOUND)

Could not load content for file:///rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/core/src/option.rs (System error: net::ERR_FILE_NOT_FOUND

Which is caused because as shown here

Screen Shot 2023-04-02 at 10 30 43 am

For some reason it's not able to find these folders in Chrome DevTools > Sources

  • file:cargo/registry/src/github.com-1ecc6299db9ec823
  • file:rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library

I don't know what it's trying to use file:cargo/registry/src/github.com-1ecc6299db9ec823, which doesn't exist, when it is alraedy successfully got access to it here file:Users/luke/.cargo/registry/src/github.com-1ecc6299db9ec823

But meanwhile it can successfully find file:Users/luke, so it has access to the following folders to access Cargo dependencies required by the project

  • file:Users/luke/.cargo/registry/src/github.com-1ecc6299db9ec823

And it has access to the project folders itself

  • file:Users/luke/code/github/ltfschoen/kobold

Screen Shot 2023-04-02 at 11 20 44 am

So i tried running it on Ubuntu with RUST_LOG=debug trunk serve --address=<PUBLIC_IP_ADDRESS>, and it gave the same error not being able to find those folders like /rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0.
Note: the 9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0 refers to the commit of the rustc release being used rust-lang/rust@9eb3afe

rustc --version
rustc 1.68.2 (9eb3afe9e 2023-03-27)

I also did a search but couldn't find any rustc folders with a subdirectory called library when i did a search

$ find / -name rustc -type d

@maciejhirsz
Copy link
Owner

Thanks for doing all this, and documenting it!

There is still a ton of stuff that I want to tackle and this isn't necessarily top of my list right now, but it will be good to have all this researched when it is.

@ltfschoen
Copy link
Contributor Author

ltfschoen commented Apr 2, 2023 •
edited

2. On macOS, when i'm stepping-through the code debugging, sometimes it displays an error like one of the following, but it still seems to work:

So i resolved 2.

although, i think these errors may be as a result of from @71 trying to use source maps, but maybe the source maps aren't setup correctly yet.

but i just decided to manually copy the files it wants to the relevant folders as follows:

sudo touch /etc/synthetic.conf
sudo chmod 0666 /etc/synthetic.conf
sudo echo -e "rustc 	Users/luke/code/temp/rustc" >> /etc/synthetic.conf
sudo echo -e "cargo	Users/luke/code/temp/cargo" >> /etc/synthetic.conf
cat /etc/synthetic.conf
sudo chmod 0644 /etc/synthetic.conf
sudo chown root:wheel /etc/synthetic.conf

mkdir -p /Users/luke/code/temp/rustc
mkdir -p /Users/luke/code/temp/cargo

  • restart computer

  • install dependencies that are shown in Chrome DevTools to also need to be in /cargo/registry for debugging

  • this might give error Updating crates.io index error: there is nothing to install ... but it does install what we want. it was only showing that it was trying to find these files so these are the only ones i'll add

cargo install --version 0.2.3 dlmalloc
cargo install --version 0.1.21 rustc-demangle
cargo install --version 0.1.85 compiler-builtins

mkdir -p /Users/luke/code/temp/cargo/registry/src/github.com-1ecc6299db9ec823/dlmalloc-0.2.3
mkdir -p /Users/luke/code/temp/cargo/registry/src/github.com-1ecc6299db9ec823/rustc-demangle-0.1.21
mkdir -p /Users/luke/code/temp/cargo/registry/src/github.com-1ecc6299db9ec823/compiler_builtins-0.1.85

cp -r /Users/luke/.cargo/registry/src/github.com-1ecc6299db9ec823/dlmalloc-0.2.3/ /Users/luke/code/temp/cargo/registry/src/github.com-1ecc6299db9ec823/dlmalloc-0.2.3

cp -r /Users/luke/.cargo/registry/src/github.com-1ecc6299db9ec823/rustc-demangle-0.1.21/ /Users/luke/code/temp/cargo/registry/src/github.com-1ecc6299db9ec823/rustc-demangle-0.1.21

cp -r /Users/luke/.cargo/registry/src/github.com-1ecc6299db9ec823/compiler_builtins-0.1.85/ /Users/luke/code/temp/cargo/registry/src/github.com-1ecc6299db9ec823/compiler_builtins-0.1.85
  • repeat for rustc
mkdir -p ~/code/github/rust-lang
cd ~/code/github/rust-lang
git clone https://github.com/rust-lang/rust
git fetch origin 1.68.2:1.68.2
git checkout 1.68.2
cd rust

mkdir -p /Users/luke/code/temp/rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library
cp -r /Users/luke/code/github/rust-lang/rust/library/ /Users/luke/temp/code/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library
cd ~/code/github/rust-lang
git clone https://github.com/rust-lang/backtrace-rs
git fetch origin 07872f28cd8a65c3c7428811548dc85f1f2fb05b:07872f28cd8a65c3c7428811548dc85f1f2fb05b
git checkout 07872f28cd8a65c3c7428811548dc85f1f2fb05b
mkdir -p /Users/luke/code/temp/rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/backtrace
cp -r /Users/luke/code/github/rust-lang/backtrace-rs/ /Users/luke/code/temp/rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/backtrace

cd ~/code/github/rust-lang
git clone https://github.com/rust-lang/stdarch
git fetch origin b655243782c18d3419439daa523782e0818ecf26:b655243782c18d3419439daa523782e0818ecf26
git checkout b655243782c18d3419439daa523782e0818ecf26
mkdir -p /Users/luke/code/temp/rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/stdarch
cp -r /Users/luke/code/github/rust-lang/stdarch/ /Users/luke/code/temp/rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/stdarch
  • check that the file may be loaded by going here in Google Chrome Canary and it should load the file
    file:///rustc/9eb3afe9ebe9c7d2b84b71002d44f4a0edac95e0/library/backtrace/src/lib.rs
  • check that files in those folders load when server is running in Google Chrome Canary > Chrome DevTools > Sources > Page > top > file://

@ltfschoen
Copy link
Contributor Author

Note: For some reason after i restarted the computer when i went to debug again using Google Chrome Canary, even though I had breakpoints setup it wouldn't stop at them, and it would only debug the JS code instead of Rust code.

I resolved that by:

  • updating Google Chrome Canary (it was already latest version)
  • Reinstalling (i.e. uninstall then reinstall again) "C/C++ DevTools Support (DWARF)" Chrome extension from https://goo.gle/wasm-debugging-extension
  • Disabling "DWARF support feature" by following the steps here https://developer.chrome.com/blog/wasm-debugging-2020/?utm_source=devtools#past
    • Open Chrome Canary > Chrome DevTools, click the gear (⚙) icon in the top right corner of DevTools pane, go to the Experiments panel and unchecking WebAssembly Debugging: Enable DWARF support.
  • Re-enabling "DWARF support feature" by doing like last step but checking WebAssembly Debugging: Enable DWARF support.

Screen Shot 2023-04-03 at 1 53 10 am

  • Clicking "Reload DevTools", which appeared after making that change (i think this is the step that got it working again)

Screen Shot 2023-04-03 at 1 52 52 am

  • Rejoice as Rust breakpoints should trigger again :)

@ltfschoen ltfschoen mentioned this issue Apr 2, 2023
Closed
4 tasks
@maciejhirsz maciejhirsz added enhancement New feature or request help wanted Extra attention is needed labels Apr 9, 2023
@ltfschoen
Copy link
Contributor Author

ltfschoen commented May 6, 2023 •
edited

i just set this up so i could debug this PR where i am using CSS https://github.com/maciejhirsz/kobold/pull/57/files#diff-6f961f3fdf36b8574e58351c93169e1f148663d2d0b0aa58f7e839af517e8a12R16. it was necessary to update the index.html to be the following (note: the first has rel="css" and href="styles.css" but second has rel="rust" and does not have href="styles.css"

    <link
      data-trunk rel="css"
      data-keep-debug={true}
      data-type="main"
      data-typescript={false}
      data-wasm-opt="0"
      data-no-demangle={false}
      data-weak-refs={true}
      href="styles.css"
    />

    <link
      data-trunk rel="rust"
      data-keep-debug={true}
      data-type="main"
      data-typescript={false}
      data-wasm-opt="0"
      data-no-demangle={false}
      data-weak-refs={true}
    />

also i used Incognito mode.

if it crashed and it wouldn't show the files in "Source", i just disabled and re-enabled the "DWARF support feature" mentioned here #47 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@maciejhirsz @ltfschoen