Enabling and using developer tools

Chrome DevTools, the remote debugger, API tracing, and automation are available in the Overwolf client (Native) when you are signed in with a developer account.

Enabling developer tools

DevTools are available only when you are signed in to the Overwolf client with a developer account approved by Overwolf. If you haven't yet submitted your app idea for review, see Submit your app idea.

If you can't open DevTools:

1. Check that you are signed in to the Overwolf client with your developer account.
2. Relaunch the client after you sign in. DevTools become available only after a relaunch.

note

The client no longer uses the enable-dev-tools feature flag or the enable-features registry value to unlock DevTools. --ow-enable-features and the registry value have no effect for non-developer accounts.

To turn DevTools off on a developer account, launch the client with overwolf.exe --ow-disable-features=enable-dev-tools.

Opening developer tools

Use one of the following methods. Both require a developer account.

Using the hotkey

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

The DevTools window for that app window opens.

Using the Overwolf settings

1. Right-click the Overwolf tray icon.
2. Select Settings, then About, then Development options.
3. Launch your app and select the relevant window's name in the Packages window.

After you launch an app, the names of all of its active windows appear in the Packages window, under the app's entry. Press a window name to open its own DevTools instance.

Developer tools menus

This section describes the different menu tabs in the developer tools window.

Elements

This tab allows you to see your app window's HTML code during runtime. In addition you can view and change the CSS styles applied to each element. Changing a CSS style element is temporary and will be lost when your app is closed.

Network

This tab displays information about every network related operation on a window. Use it to get insights into requests, downloaded resources, and opportunities to optimize the app's network performance.

Sources

This tab enables breakpoint-based debugging for JavaScript. Breakpoints can be configured to be triggered at specific locations to help you debug your app. To add a breakpoint, right click the line number and select Add breakpoint from the menu. To remove a breakpoint, right click the line number with the breakpoint and select Remove breakpoint from the menu.

tip

Make minified code easily readable by using the “pretty print” button () at the bottom left of the code pane.

Timeline

This tab makes it easier to spot non-permanent or situational issues. It assists you in improving the performance of your app by inspecting events that happen during its usage timeline.

Profiles

This tab helps you learn more about the memory usage and execution times of your app. The CPU and Heap profilers help you find where resources are being spent, so that you can make sure that your app is running as smoothly as possible.

Resources

This tab shows a summary all of your app's loaded resources. This includes databases, session storage, app cache, cookies, fonts and more.

Audits

This tab analyzes your app and suggests ways for decreasing load times and increasing your app's responsiveness.

Console

This tab provides the ability to interact with your code, as well as logging capabilities to help you as you develop your application.

Enabling Time Stamps in Console

It is beneficial to see timestamps in your console when you are debugging. To enable this behavior, go to the console settings, and select your preferred timestamps preferences:

Using the remote debugger

In addition to the DevTools window, you can use the regular Chrome debugger. The remote debugger works only with a developer account.

The remote debugger has two advantages:

• It's easier to use on a secondary monitor. When you debug in-game windows, it's often more convenient to open the debugger on a different screen than as an in-game overlay that can hide the UI.
• It can help when an issue is related to the Overwolf debugger itself. Opening another debugger window lets you display the data differently.

To use the remote debugger:

1. Make sure your Overwolf app is running.
2. Open a new Chrome browser tab.
3. Open http://localhost:54284.

The page lists all open Overwolf apps and windows. Press a link to open the remote DevTools for that window.

Using API tracing

overwolf://api-tracing gives you a DevTools-style trace of every ODK call your app makes: API name, calling window, parameters, callback result, and how long the call took. It also records addListener and removeListener calls alongside the number of listeners still registered, which helps you find a handler that fires twice or a listener that is never removed. It logs the game events registered through setRequiredFeatures, so you can see which features got enabled and which events came through.

API tracing requires a developer account.

Calls to Overwolf-internal APIs are traced only for Overwolf staff accounts, so third-party developers don't see them.

To open API tracing:

1. Right-click the Overwolf tray icon.

2. Select Packages.

3. Find your app, and press the API tracing icon (the waveform icon next to the copy icon) beside the app's UID field. This scopes the trace to that app's calls only.

   

4. Or, in the Packages window's toolbar row (below the search bar, right-aligned), press the Trace API calls waveform icon, the second icon from the left after the pin icon, to open the API tracing window for all apps.

   

Opting an app out of developer tools

Set disable_dt to true in the data object of your manifest.json to prevent DevTools from opening on your app's windows, even for developer accounts. It doesn't affect API tracing.

Property	Type	Default	Client version
disable_dt	boolean	false	0.118.3

{
  "data": {
    "start_window": "background",
    "disable_dt": true,
    "windows": {
      "background": {
        "file": "background.html",
        "is_background_page": true
      }
    }
  }
}

For the full list of data properties, see the manifest.json reference.

Using a local server with debug_url

For local-server debugging (for example, with React apps), use the debug_url flag in the window settings of the manifest.json file. For details, see Extension window data object. The redirect to the debug_url address happens only for the window's start URL.

Running your React app locally

The example app runs on a Node.js server.

1. Download a React project (for example, this one).
2. Extract it into a folder and open it in VS Code.
3. Run the project using npm install inside VS Code.

This example assumes your React app runs on localhost:3000.

Debugging your Overwolf app window locally

The example app has two windows, a background controller called main and an app window called popup.

1. In the 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 the 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 DevTools console opens for this window.

5. Open the popup window by typing into the console:

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

   The popup window opens, and your React app loads inside it. Every change you make in the React code appears in the Overwolf window.

Notes

• You must have a local web server installed on your machine.
• debug_url works only when loading unpacked extensions.
• debug_url works only when connecting directly to localhost or 127.0.0.1.
• The redirect happens only for the window's start URL.
• When you use debug_url, calling overwolf.windows.getMainWindow() produces a known issue. The API returns a reference to the current window instead of the main window.

Enabling automation testing

You can use a testing framework such as Selenium with your app. The automation switch and the overwolf.automation API require a developer account.

For setup steps, the required command line flag, and examples, see Automated testing.