WebF Go

WebF Go is a pre-built native application that contains the WebF rendering engine. It allows you to preview and test your WebF applications on real devices (iOS, Android, desktop) without needing to set up Flutter development tools or build a custom host app.

What is WebF Go?

WebF Go provides:

• Quick Testing: Load your WebF app via URL instantly
• Multi-Platform: Available for iOS, Android, macOS, Windows, and Linux
• DevTools Access: Built-in Chrome DevTools integration
• No Setup Required: Just download and run
• Development Companion: Perfect for the iterative development workflow

Installation

Desktop (macOS, Windows, Linux)

Download WebF Go for your desktop operating system:

Download WebF Go → 

• macOS: Download the .dmg and drag to Applications
• Windows: Download and run the installer
• Linux: Download the .AppImage or .deb package

Mobile (iOS & Android)

iOS:

• Download from the App Store 
• Or search for “WebF Go” in the App Store

Android:

• Download from Google Play 
• Or search for “WebF Go” in Google Play

Quick Start

1. Create a WebF App Project

If you don’t have a project yet, create one with Vite:

npm create vite@latest my-webf-app
cd my-webf-app
npm install

Select your preferred framework (React, Vue, Svelte, etc.) when prompted.

2. Start Development Server

npm run dev

Vite will start a dev server, typically at http://localhost:5173.

3. Load in WebF Go

1. Open the WebF Go app on your device or desktop
2. You’ll see an input field at the top
3. Enter your dev server URL (e.g., http://localhost:5173)
4. Tap “Go” or press Enter

Your WebF application will now render inside WebF Go with full hot reload support!

Development Workflow

Hot Reload

WebF Go fully supports Hot Module Replacement (HMR):

1. Make changes to your source code
2. Save the file
3. Changes appear instantly in WebF Go
4. No need to reload or restart

This works with all modern dev servers (Vite, Webpack, etc.).

Testing on Multiple Devices

WebF Go makes it easy to test on different platforms:

1. Start your dev server (make note of the network URL)
2. Open WebF Go on multiple devices (phone, tablet, desktop)
3. Enter the same URL on each device
4. See your app running on all platforms simultaneously
5. Changes sync instantly across all devices

Using DevTools

WebF Go integrates with Chrome DevTools for debugging.

Connecting Chrome DevTools

1. While your app is running in WebF Go, look for the floating action button (debug icon)
2. Tap or click the debug button
3. A DevTools panel will appear
4. Click the “Copy” icon to copy the DevTools URL (devtools://...)
5. Open Google Chrome on your desktop
6. Paste the URL into Chrome’s address bar
7. Press Enter

You’re now connected! You can:

• View console.log() messages
• Inspect the DOM tree
• View and modify CSS styles
• Monitor network requests
• Check localStorage/sessionStorage

Performance Monitoring

For performance profiling, you can use browser DevTools or add custom performance markers in your code:

// Mark performance points
performance.mark('operation-start');
// ... your code
performance.mark('operation-end');
performance.measure('operation', 'operation-start', 'operation-end');
 
const measure = performance.getEntriesByName('operation')[0];
console.log(`Operation took ${measure.duration}ms`);

Viewing Logs from Command Line

You can also view console logs directly from the command line:

macOS

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

Windows

# Navigate to installation directory
.\webf_go.exe

Linux

# Navigate to installation directory
./webf_go

Android

adb logcat | grep "WEBF_NATIVE_LOG"

iOS

1. Enable Developer Mode on your iOS device
2. Open Console.app on your Mac
3. Select your iOS device from the sidebar
4. Filter logs by searching for WEBF_NATIVE_LOG

Common Use Cases

1. Rapid Prototyping

Perfect for quickly testing ideas:

# Create a new project
npm create vite@latest prototype
cd prototype
npm install
npm run dev
 
# Open in WebF Go
# URL: http://localhost:5173

Iterate rapidly with hot reload on real devices.

2. Cross-Platform Testing

Test your app on multiple platforms without building native apps:

• Desktop: See how it looks on large screens
• Mobile: Test touch interactions and mobile layouts
• Tablet: Verify responsive design

3. Demo & Presentation

Show stakeholders your app running natively:

• No need to build and deploy
• Just share your dev server URL (with network access)
• Real native performance, not a browser preview

4. Web Framework Evaluation

Test different frameworks quickly:

# Try React
npm create vite@latest test-react -- --template react
 
# Try Vue
npm create vite@latest test-vue -- --template vue
 
# Try Svelte
npm create vite@latest test-svelte -- --template svelte

Load each in WebF Go to see how they perform.

Tips & Tricks

Local Network Access

If you can’t access your dev server from mobile:

1. Check firewall: Ensure your dev server port isn’t blocked
2. Use network IP: Use 192.168.x.x instead of localhost
3. Vite config: Add --host flag:

   npm run dev -- --host

HTTPS for Testing

Some features require HTTPS. With Vite:

npm install -D @vitejs/plugin-basic-ssl

// vite.config.js
import basicSsl from '@vitejs/plugin-basic-ssl'
 
export default {
  plugins: [basicSsl()]
}

Clear Cache

If you see stale content:

1. Open WebF Go settings
2. Select “Clear Cache”
3. Reload your app

URL History

WebF Go remembers recent URLs:

• Click the URL input field
• Select from recent URLs
• Quickly switch between projects

Limitations

WebF Go is a development tool with some limitations:

• No Custom Native Plugins: Can’t test custom native plugins (use a custom host app)
• Development Only: Not for production distribution
• Network Required: Desktop version can’t load from file:// URLs
• Standard Features Only: Doesn’t include enterprise or custom features

Next Steps

Now that you know how to use WebF Go:

• Developer Guide — Build your first WebF app
• Core Concepts — Understand WebF fundamentals
• Web Frameworks — Use React, Vue, or other frameworks
• Add WebF to Flutter — Integrate WebF into your own Flutter app

Troubleshooting

App Won’t Load

• ✅ Check dev server is running
• ✅ Verify URL is correct
• ✅ Ensure device and computer are on same network
• ✅ Check firewall isn’t blocking the port

DevTools Won’t Connect

• ✅ Use desktop Chrome browser (not other browsers)
• ✅ Copy the complete devtools:// URL
• ✅ Try restarting WebF Go

Hot Reload Not Working

• ✅ Verify Vite/Webpack HMR is enabled
• ✅ Check console for HMR errors
• ✅ Try manually reloading (re-enter URL)

Performance Issues

• ✅ Use production build for accurate performance testing
• ✅ Check console for errors
• ✅ Use performance.mark() and performance.measure() for profiling
• ✅ Profile on actual target devices

Need more help? Visit our GitHub issues  or contact support@openwebf.com.