Skip to Content
DocsDeveloper GuideDevelopment Workflow

Development Workflow

Your development workflow with WebF is designed to be as close as possible to standard web development.

Project Structure

Because you are using a standard web tool like Vite to create your project, the project structure is exactly what you would expect. There are no special WebF-specific files or configurations required in your WebF app project.

Hot Reload

WebF fully supports the Hot Module Replacement (HMR) capabilities of modern web development servers like Vite. Any changes you make to your source code will be instantly reflected in the running WebF application.

Using the DevTools

WebF integrates with Chrome DevTools for DOM inspection and console logging, and also includes its own built-in tools for performance profiling.

For DOM and Console Debugging

  1. While your app is running, click the floating action button with the debug icon. This opens the WebF DevTools panel.
  2. In the panel, click the “Copy” icon to get the DevTools URL (devtools://...).
  3. Paste this URL into a desktop Google Chrome browser to connect the inspector.

With the Chrome DevTools connected, you can:

  • View console.log() messages.
  • Inspect the DOM element tree and CSS styles.
  • Analyze network requests in the “Network” tab.

Note: The JavaScript debugger (e.g., setting breakpoints in the “Sources” tab) is not yet supported in the Chrome DevTools integration. For performance profiling, use performance.mark() and performance.measure() APIs in your code.

Reading JS Logs from the Command Line

As an alternative to the DevTools UI, you can view console.log messages using platform-specific tools.

macOS (for the desktop app)

/Applications/WebF\ Go.app/Contents/MacOS/WebF\ Go

Windows

# Navigate to the installation directory and run the executable
.\webf_go.exe

Linux

# Navigate to the installation directory and run the executable
./webf_go

Android

# Use the Android Debug Bridge (adb) to view logs
adb logcat | grep "WEBF_NATIVE_LOG"

iOS

  1. Ensure your connected iOS device has Developer Mode enabled.
  2. On your Mac, open the Console.app.
  3. Select your iOS device from the sidebar.
  4. In the search bar, filter the logs by entering WEBF_NATIVE_LOG.
Getting StartedCore Concepts