Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.chrome.com/docs/devtools/wasm below:

Debug C/C++ WebAssembly | Chrome DevTools

Stay organized with collections Save and categorize content based on your preferences.

WebAssembly provides a way to run, for example, C/C++ code on the web at near native speed and alongside JavaScript. This document shows how to set up and use Chrome DevTools to better debug such applications.

Once you set up DevTools, you can:

• Inspect your original code in Sources > Editor.
• Pause execution with line-of-code breakpoints and step through your original C/C++ source code, not the compiled .wasm binary file.

And, while paused, you can:

• Hover over variables in the original source file and see their values.
• Understand function names in Call Stack and variables in Scope.
• Output deeply nested properties and complex objects to the Console.
• Inspect object memory with Memory Inspector.

To enable C/C++ WebAssembly debugging in DevTools:

1. Compile your application with DWARF debug information included. Run the latest Emscripten compiler and pass it the -g flag. For example:

   emcc -g source.cc -o app.html
   

   For more information, see Building projects with debug information.

2. Install the C/C++ DevTools Support (DWARF) Chrome extension.

With DevTools set up, debug your code:

1. Open DevTools to inspect your website. For this tutorial, you can try it on this demo page, which was compiled with the required -g flag.
2. Optionally, group the files you authored for easier navigation. In Sources, check > Page > > Group by Authored/Deployed .
3. Select your original source file from the file tree. In this case, mandelbrot.cc.

4. To set a line-of-code breakpoint, click a line number in the column to the left of the Editor, for example, on line 38.

5. Run the code again. The execution pauses before the line with the breakpoint.

While paused, try the following:

• In Sources > Editor, hover over a variable to see its value in a tooltip.

• In Sources > Call Stack, view function names as they are in the source.

• In Sources > Scope, view local and global variables, their types, and values.

• In Console, output variables and objects that are hard to navigate to in Scope:

  • Deeply nested variables, for example, indexed items in big arrays.
  • Complex objects, including those you can access with pointers (->). Expand them to inspect.

• In Sources > Scope, click the icon to open the Memory Inspector and inspect the raw bytes of object memory. For more information, see WebAssembly memory inspection.

With DevTools set up and open, the code Chrome runs isn't optimized. It's tiered down to give you better debugging experience.

In this case, you can't rely on console.time() and performance.now() in your code to profile performance. Instead, use the Performance panel to profile.

Alternatively, you can run your profiling code without opening DevTools, then open it to inspect the messages in the Console.

To speed up loading but still have a better debugging experience, you can split out the debug information into a separate .wasm file. For more information, see Debugging WebAssembly Faster.

You can either keep this file locally or host it on a separate server. To do it with Emscripten, pass the -gseparate-dwarf=<filename> flag and specify the path to the file:

emcc -g source.cc -o app.html \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]

If you build on a machine with a different operating system (container, VM, or remote server) than that on the machine you run Chrome on, you may need to manually map the debug file paths.

For example, if your project is at C:\src\project locally but was built in a Docker container with the path /mnt/c/src/project, do the following:

1. Go to chrome://extensions/, find the C/C++ DevTools Support (DWARF) extension, and click Details > Extension options.
2. Specify the old and the new file paths.

Check out the Chrome DevTools engineering blog for more information on WebAssembly debugging:

• Debugging WebAssembly with modern tools
• Debugging WebAssembly Faster
• Introducing the Memory Inspector
• Extending the Memory Inspector for C/C++ debugging

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-06-07 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2023-06-07 UTC."],[],[]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4