Learn WebAssembly by Mike Rourke

Learn WebAssembly by Mike Rourke

Author:Mike Rourke
Language: eng
Format: epub
Publisher: Packt Publishing
Published: 2018-09-25T05:41:00+00:00


Using source maps

Emscripten has the ability to generate source maps by passing some additional flags to the compiler. Source maps allow your browser to map the source of a file to the file being utilized in an application. For example, you can use a JavaScript build tool such Webpack to minify the code as part of your build process. However, it's incredibly difficult to navigate and troubleshoot the minified code if you're trying to find a bug. By generating a source map, you can view the code in its original form within the browser's development tools and set breakpoints for debugging. Let's generate a source map for our /chapter-06-interact-with-js/js-without-glue.cpp file. Within the /book-examples folder, run the following command in a terminal:

emcc chapter-06-interact-with-js/js-without-glue.cpp -O1 -g4 -s WASM=1 -s SIDE_MODULE=1 -s BINARYEN_ASYNC_COMPILATION=0 -o chapter-06-interact-with-js/js-without-glue.wasm --source-map-base http://localhost:8080/chapter-06-interact-with-js/

The -g4 argument enables source maps, while the --source-map-base argument tells the browser where to find the source map file. Once compiled, start your local server up from the /book-examples folder by running the following command:

serve -l 8080

Navigate to http://127.0.0.1:8080/chapter-06-interact-with-js/js-without-glue.html, open the Developer Tools, and select the Sources tab (in Chrome) or Debugger tab (in Firefox). If you're using Chrome, you should see the following:



Download



Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.