# itk-wasm debugging example problem

**URL:** <https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870>\
**Category:** Engineering\
**Tags:** itk-wasm\
**Created:** [April 16, 2023, 4:34pm UTC](https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870 "2023-04-16T16:34:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sag](https://discourse.itk.org/user_avatar/discourse.itk.org/sag/32/2041_2.png) [@sag](https://discourse.itk.org/u/sag)\
**Post date:** [April 16, 2023, 4:34pm UTC](https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870/1 "2023-04-16T16:34:13Z")

</div>

@matt.mccormick ,

Hi matt,

I have been reading about the WebAssembly and emscripten to understand how ITK-WASM works for last two months. two months ago I got stuck in build watershed segmentation 2d for node.js, it simply crashed despite following the InputsOutputs example which worked fine. I left the forum to read about webassembly/wasi/emscripten/… and wonder in webassembly platform, now i am back again to ITK-WASM examples to build for `WASI `and `EMSCRIPTEN`.  
I decided to use the debugging example to debug `watershed segmentation example built for Node.js and it crashed 2 months ago.` I am refering to debugging example in tutorial. it fails in Node.js which i am interested in.

`turorial > Debugging > Node.js fails when I reach to build for node.js section.` the build for node release and debug works fine, but when I try to run them as instructed in tutorial it fails for both debug and release. it seems there is a problem with runEmscriptenNode.js, there is an import for runPipelineNode which i looked into the ´itk-wasm´ repository and that file is missing please look at the following screen shot.

 ![itk-wasm-debugging1](https://discourse.itk.org/uploads/default/original/2X/5/59423896ef6b9e9aaa8723862dd6038401548743.png)

`Following is the screen shot for ITK-WASM repository`

 ![itk-wasm-debugging2](https://discourse.itk.org/uploads/default/original/2X/1/1513d7b621b1874ba483d20bf6a2469e308c6471.png)

according to the file runEmscriptenNode.js there is `import { runPipelineNode} from ./dist/node/index.js`

if you look at the screen shot of repository i have pasted here, there is no such file there?! `go to itk-wasm/disk/node ?! ` there is no node directory there  
can you please investigate this, i need this to work because i am more into using the `Emscripten build for web browser. ` part of ITK/VTK

following is the `itkwasm/emscripten image` is in the screen shot.

 ![itk-wasm-debuggin3](https://discourse.itk.org/uploads/default/original/2X/3/3f240489172abb7d695ccffd3104bd830c22b9cc.png)

i think there is something wrong with the file `runEmscriptenNode.js` you provided in the example Debugging. have you commited the right version of itk-wasm repository or am i missing something here?  
i tried to use `import { runPipelineNode } from itk-wasm`, but still it crashes`

please help to solve this issue.  
I need to debug the watershed segmentation for Node.js/emscripten build so i can build it to a docker image and run it in a docker container on the webbrowser.

BR  
@sag

---

<div class="post-metadata">

**Author:** ![matt.mccormick](https://discourse.itk.org/user_avatar/discourse.itk.org/matt.mccormick/32/7_2.png) [@matt.mccormick](https://discourse.itk.org/u/matt.mccormick)\
**Post date:** [April 17, 2023, 1:42pm UTC](https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870/2 "2023-04-17T13:42:08Z")

</div>

Hi @sag ,

With your persistence and hard work you will come to an understanding and get it running.

I will do what I can to help.

A few pointers:

1. Make sure to use the latest version of itk-wasm (check what version is found in `node_modules/itk-wasm/package.json`. At the time of this writing that is `1.0.0-b.94`.
2. Try using the in-progress subcommand `itk-wasm bindgen`. Like `itk-wasm build`, this generates TypeScript/JavaScript bindings and the package build configuration. This may resolve issues in how `runPipelineNode` is set up or how dependencies or setup, etc. in your current configuration. More documentation is coming on this, but it is worthwhile trying it before then.
3. `./dist/node/index.js` is not in the `itk-wasm` source code repository because it is built as part of the `itk-wasm` build process.
4. Try debugging with the Chromium browser debugger (described in the documentation) instead of the Node.js debugger. The browser debugger is full-featured and refined.

Hope this helps,  
Matt

---

<div class="post-metadata">

**Author:** ![sag](https://discourse.itk.org/user_avatar/discourse.itk.org/sag/32/2041_2.png) [@sag](https://discourse.itk.org/u/sag)\
**Post date:** [April 18, 2023, 9:33am UTC](https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870/3 "2023-04-18T09:33:37Z")

</div>

Hi,

Thanks for the replay.

1. I did install itk-wasm@1.0.0-b.94 but it did not fix the problem.
2. I built the emscripten-build-release as you suggested in your previous message as follows: npx itk-wasm --build-dir emscripten-build-release bindgen --package-name @itk-wasm/DebugMe --package-description “Example DebugMe”  
it generates a typescript folder with files that contains no .wasm module in it, also created a Emscripten-build-release with just a env… file inside.
3. I executed : npm run emscripten-build-release. This fills previously almost empty emscripten-build-release folder with all wasm related files, such as DebugMe.wasm, DebugMe.umd.wasm, etc.
4. then I executed : npm run run-node-release script in tutorial instructions.  
the same error.

Did I follow your instructions correctly if not could you please tell me what is that I am doing wrong?  
can you tell me more about its-wasm bindgen , it generates typescript/javascript files, rust+wasm/emscripten has such script bindgen in rust language? anyways not to get out of my way, I need this to work.  
I did also try the web browser approach in the instruction of DebugMe tutorial as you preferably suggested, but the same crash happened.

node.js v19.8.1  
npm 9.6.3  
itk-wasm: 1.0.0-b.94

I really appreciate this matt,

`here is the screen shot of what I explained please check out the folder typescript and emscripten-build-release`

 ![emscripten-build-release1](https://discourse.itk.org/uploads/default/original/2X/a/a7442f29f2e2e88d37155a461840ae9fd17834ed.png)

BR,  
@sag

---

<div class="post-metadata">

**Author:** ![sag](https://discourse.itk.org/user_avatar/discourse.itk.org/sag/32/2041_2.png) [@sag](https://discourse.itk.org/u/sag)\
**Post date:** [April 18, 2023, 11:44am UTC](https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870/4 "2023-04-18T11:44:24Z")

</div>

Hi matt,

I wanted to mention some facts I know about wasm/JS interaction via webassembly platform. I have seen using wasm-bingen as a dependency in rust to allow exchange of string, structures, classes, etc, despite that wasm stack machine only takes numbers like u32 and float.

`npx itk-wasm --build-dir emscripten-build-debug bindgen --package-name @itk-wasm/DebugMe --package-description “Example DebugMe”`  
the above subcommand causes crash with error that H is not json in `Hello debugger world` in DebugMe.cxx??!! `I commented out abort() form DebugMe.cxx, I think web workers or threads racing and abort happens faster than printing the Hello ... text, I don't know anyways` because the command should generate typescript/javascript and configuration to allow runEmscriptenNode.js run the DebugMe.wasm module correct?  
what is going on here? am I doing something wrong?  
`This is the sequence of commands I executed`

1. build DebugMe program for emscripten debug  
next \>
2. execute npx itk-wasm … bindgen … to generate necessary typescript/javascript/configuration files like I wrote above. this generates typescript folder which know about the Emscripten-build-debug folder and DebugMe.wasm, both folders are connected now - right??  
next \>
3. npm run run-node-debug to run the DebugMe.wasm using javascript in node.js

which causes a crash and complains about `Hello debugger world` text, ‘H’ with error:  
syntaxError: Unexpected token ‘H’, 'Hello debugging"… is not valid JSON at JSON-parse

no idea what is going on?

I appreciate it.

BR  
@sag

---

<div class="post-metadata">

**Author:** ![matt.mccormick](https://discourse.itk.org/user_avatar/discourse.itk.org/matt.mccormick/32/7_2.png) [@matt.mccormick](https://discourse.itk.org/u/matt.mccormick)\
**Post date:** [April 20, 2023, 2:03pm UTC](https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870/5 "2023-04-20T14:03:20Z")

</div>

Good work generating the _typescript/_ package folder.

In JavaScript development, when:

- Sharing a package as a library on [npmjs.com](http://npmjs.com)
- Using a project in the browser

There are typically a few build steps involved:

- Transpile, process inputs, e.g. TypeScript type checking, transpilation, polyfill newer language features to work on older JavaScript runtimes
- Bundle multiple modules into a single module for consumption
- Optionally minify the bundle

itk-wasm bindgen provides all the configuration for this, but there are steps to build it:

```auto
cd typescript/
npm install
npm run build
# this serves the bundle for local testing and development
npm start

```

---

<div class="post-metadata">

**Author:** ![matt.mccormick](https://discourse.itk.org/user_avatar/discourse.itk.org/matt.mccormick/32/7_2.png) [@matt.mccormick](https://discourse.itk.org/u/matt.mccormick)\
**Post date:** [April 20, 2023, 2:06pm UTC](https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870/6 "2023-04-20T14:06:04Z")

</div>

> [@sag](#):
>
> I have seen using wasm-bingen as a dependency in rust to allow exchange of string, structures, classes, etc, despite that wasm stack machine only takes numbers like u32 and float.

Yes, this is related, and eventually itk-wasm bindgen will use this for rust, etc. bindings, too.

---

<div class="post-metadata">

**Author:** ![sag](https://discourse.itk.org/user_avatar/discourse.itk.org/sag/32/2041_2.png) [@sag](https://discourse.itk.org/u/sag)\
**Post date:** [April 24, 2023, 4:47pm UTC](https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870/7 "2023-04-24T16:47:58Z")

</div>

@matt.mccormick

Hi,  
I did `npm install && run build && start`, it shows the ITK-wasm version of DebugMe which different than what is in the DebugMe tutorials. One error occurred though which complained about index-node.ts object is empty. exception asked to write `export {} - and it launched the ITK-WASM/DebugMe on the server on chrome web browser` I did though `npm start - outside of typescript folder in root DebugMe and I got it to work with DebugMe tutorial version but I got an exception. eventually I got it to work, yet in dev tools the program does not stop at break points. I did the path substitution just like in tutorials but still not possible to stop in c++ code, just in javascript code the program stops.`  
I got the @itk-wasm/DebugMe from ITK company showing the package and functions to run as shown in the following screen shot:

 ![emscripten-build-release1-2](https://discourse.itk.org/uploads/default/original/2X/0/0d5375aeb9f30564891649b9561eb998b502aca3.png)

I still don’t understand how the `bindgen` is going to help run the emscripten wasm module on the web browser/node ?  
`How to publish my own DebugMe on the e.g. npmjs.com site as you mentioned above?`  
secondly:  
`How this typescript is going to help me to run <run run-node-debug> on command line as mentioned in DebugMe example?`

I really appreciate your help.

`but I have a bigger question which I will send another message to you and explain. that is about a @sohrab123/segmentation-watershed`

p.s.: I did manage to publish couple of packages on [npmjs.com](http://npmjs.com), so I know that.

BR  
@sag

---

<div class="post-metadata">

**Author:** ![matt.mccormick](https://discourse.itk.org/user_avatar/discourse.itk.org/matt.mccormick/32/7_2.png) [@matt.mccormick](https://discourse.itk.org/u/matt.mccormick)\
**Post date:** [April 24, 2023, 8:25pm UTC](https://discourse.itk.org/t/itk-wasm-debugging-example-problem/5870/8 "2023-04-24T20:25:59Z")

</div>

> ITK-wasm version of DebugMe which different than what is in the DebugMe tutorials. One error occurred though which complained about index-node.ts object is empty

Yes, to generate bindings for the pipeline, the code will need an `itk::wasm::Pipeline` declared and a call to `ITK_WASM_PARSE`. For example:

> <https://github.com/InsightSoftwareConsortium/itk-wasm/blob/1ceb67b93c4942aea6a03afc16237992fe5d627e/examples/hello-pipeline/hello-pipeline.cxx#L24>

> <https://github.com/InsightSoftwareConsortium/itk-wasm/blob/1ceb67b93c4942aea6a03afc16237992fe5d627e/examples/hello-pipeline/hello-pipeline.cxx#L42>

> eventually I got it to work, yet in dev tools the program does not stop at break points.

This could be because the module is not built with debugging symbols. In the build scripts defined in the package.json file, add `-DCMAKE_BUILD_TYPE:STRING=Debug` as described in the debugging tutorial.

> How this typescript is going to help me to run on command line as mentioned in DebugMe example?

The bindings help to provide a way to get the WebAssembly code _running in the browser as bundled JavaScript with a JavaScript interface so it can be debugged with Chrome’s WebAssembly debugging tooling_.