Overwolf

Overwolf

  • Getting Started
  • Docs
  • API
  • Events Status
  • Blog
  • Q&A
  • Support

›Getting Started

Getting Started

  • Getting started
  • App Creation process
  • SDK Introduction
  • Using our dev tools
  • Game compliance principles
  • Submit app proposal

Build Your First App

  • The Basic Sample App
  • Sample App Components
  • UX/UI Best Practices
  • Overwolf UI Components

Test Your App

  • App testing basics
  • Technical checklist
  • Product checklist
  • Marketing checklist
  • Community alphas

Submit Your App

  • App submission basics
  • Custom Installer

Monetize with Ads

  • Monetization overview
  • Ads Monetization Basics
  • Ads SDK overview
  • Configuring your Ads
  • Managing Ads
  • Current Ads SDK

Monetize with Subs

  • Subscriptions overview
  • Subscriptions user flow
  • Integrate subscriptions
  • Request an app plan

Maintain Your App

  • Submit an app update
  • Set app status
  • Support Your Users
  • App Knowledge base
Edit

Using Overwolf`s developers tools

The Overwolf developer toolkit is a set of web authoring and debugging tools.
You can use these tools for a variety of tasks, among them: Listing which assets the page has requested, how long each asset took to load, reviewing tools for currently-loaded HTML, CSS or JS, and more.

important

Chrome Developer Tools disabled as default. The only way to enable it, is by adding a registry key.

How can I access the Overwolf developer tools?

There are two ways to unlock them:

1 - Using Hotkeys

  1. Run the app.
  2. Click on the app window that you want to debug.
  3. Press Ctrl+Shift+I.

Doing this will immediately get you into the developmet tools menu for this app window.

2 - Through the Overwolf settings

  1. Right click on the Overwolf tray icon.
  2. Select Settings → About tab → Development options.
  3. Launch your app and select the relevant window's name.

After you launch the app you're debugging, each window's name will show up in the developers tools interface. You can click on any window name to bring up a full breakdown of available developer tools for that window:

alt-text

Explore each menu

Elements

The Elements panel allows you to see your app window's HTML code during runtime, as well as CSS styles applied to each element.

alt-text

Network

The Network panel displays information about every network-related operation on a page. Use it to get insights into requests, downloaded resources and optimization opportunities when it comes to network performance.

alt-text

Sources

This menu enables breakpoint-based debugging for JavaScript. Breakpoints can be configured to only be triggered when specific or general conditions are met. Tip – Make minified code easily readable by using the “pretty print” button ({ })

alt-text

Timeline

Makes it easier to spot non-permanent or situational issues, and enables you to improve the performance of your app by inspecting events that happen along an app’s usage timeline.

alt-text

Profiles

Learn more about memory usage and execution times of your app here. The CPU and Heap profilers help you find where resources are being spent.

alt-text

Resources

Review all loaded resources including databases, session storage, app cache, cookies, fonts and more.

alt-text

Audits

Analyzes your app and suggests ways for decreasing load time and increasing responsiveness.

alt-text

Console

Allows interaction with the JS and log diagnostic information during development.

alt-text

Enabling Time Stamps in Console

Sometimes it’s useful to see timestamps when you are debugging.
To enable this, go to the console settings (top right wheel), and select your preferred timestamps preferences:

alt-text

Use the remote debugger

In addition to the developer tools debugger, you can use the regular chrome debugger.

The remote debugger has two advantages:

  1. Easier to use in a secondary monitor.
    In some cases, like debug in-game windows, it's more convenient to open the debugger on a different screen, and not on as an in-game Overlay that can hide the UI.
  2. Eliminate overwolf-debugger related issues.
    In some hard to crack cases, it might help to open another debugger that might display the data differently.

How to use the remote debugger

  1. Make sure your OW app is running.
  2. Open a new chrome browser tab.
  3. Browse to this URL: http://localhost:54284

You can see all the list of open OW apps and windows. In this example, you can see a couple of Facecheck app's windows, along with our rocket league sample app, ads window, and more:

alt-text

Clicking on a link will open a remote debugger tab.

Use local debugger with debug_url flag

For local-server debugging (like react apps) you can use the debug_url flag.

Run your React app locally

Runs on a node.js server.

  1. download some react project. This one for example.
  2. extract it to some folder and open it in VS Code.
  3. Run in the terminal command npm -i

For this example, we assume that your react app is running on localhost:3000.

Debug your OW app window locally

For this example, we assume that your app has two windows: a background controller called "main" and an app window called "popup".

  1. In your app's manifest, add the debug_url flag on the same port as your react app (3000):

    "popup": { "file": "popup.html","debug_url": "http://localhost:3000" }

  2. load your OW app as an unpacked extension.

  3. Open the CEF remote debugging URL in chrome (http://localhost:54284).

  4. Find the "main" app window on the list, and open it. The dev console will open for this window.

  5. Open the "popup" window:*

    • overwolf.windows.obtainDeclaredWindow('popup', console.log)
    • overwolf.windows.restore('popup', console.log)

The popup window will open, and your react app will load in it.
Now every change that you'll do in the react code will reflect in the OW window.

Notes

  • You must have a local web server installed on your machine.
  • Valid only when loading unpacked extensions.
  • Valid only with "localhost" / "127.0.0.1".
  • When using debug_url, calling getMainWindow() produces a known issue, and it will not work as expected: it returns a reference to the current window instead of the main window.
Last updated on 10/9/2021 by Alexander Winter
← SDK IntroductionGame compliance principles →
  • How can I access the Overwolf developer tools?
    • 1 - Using Hotkeys
    • 2 - Through the Overwolf settings
  • Explore each menu
    • Elements
    • Network
    • Sources
    • Timeline
    • Profiles
    • Resources
    • Audits
    • Console
  • Enabling Time Stamps in Console
  • Use the remote debugger
  • Use local debugger with debug_url flag
    • Run your React app locally
    • Debug your OW app window locally
    • Notes
  • Legal
    • Terms overview
    • Developer's terms
    • App terms
    • Overwolf terms
    • Overwolf Privacy policy
  • Support
    • Questions and Answers
    • Discord
    • Slack
    • Facebook
    • Twitter
  • Documentation
    • Changelog
    • API
    • App Creation Process
    • Best Practices
    • Game Events status
  • Information
    • Careers
    • Fund
    • Developers Blog
    • Overwolf Appstore
    • Advertise on Overwolf
Overwolf 2022