Skip to main content

Enabling and using developer tools

Overwolf has decided to disable the Chrome Developer Tools by default in order to protect users and developers from potential security breaches. As developer you will need these tools to help you diagnose and debug potential issues in your app. The Chrome Developer tools can be toggled on or off either using the command line or changing a Windows registry key.

tip

The easiest way to enable Chrome Developer Tools is to add a registry key.

Using the command line​

To enable the Chrome Development Tools through the command line use overwolf.exe --ow-enable-features=enable-dev-tools.

To disable the Chrome Development Tools through the command line use overwolf.exe --ow-disable-features=enable-dev-tools.

note

Using this method, you may need to re-enable the Chrome Development Tools after a client update.

Using the windows registry key​

To enable a feature through the registry:

  1. Open the regedit tool.
  2. Navigate to [HKEY_CURRENT_USER\SOFTWARE\Overwolf\CEF].
  3. In the Edit menu, select New, and String value.
  4. In the Name field, enter enable-features and in the Value data field, enter enable-dev-tools. Then press OK.
note

Using this method, you may not need to re-enable the Chrome Development Tools after a client update.

Uninstalling the Overwolf client removes the registry key.

The command line overrides the registry entry and will explicitly disable this feature even of the registry key is enabled.

Alternatively, download the enable dev tools tool. After downloading, run it to add and enable the registry key.

The Chrome Development Tools should be enabled. If the tools are not working, restart your computer.

Using developer 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.

info

Chrome Developer Tools are disabled by default. You can enable them by adding a registry key.

Accessing the Overwolf developer tools​

Use the following methods to access the Overwolf developer tools.

Using hotkeys​

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

This will immediately open the development tools window for this app window. If it's not working, and you have just added the registry key, restart your machine and try again.

Using the Overwolf settings​

  1. Right click on 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 launching an app, the names of all of the app's active windows will show up in the Packages window, under the app's entry. Press on any window name to bring up its own instance of developer tools:

alt-text

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.

alt-text

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.

alt-text

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.

alt-text

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.

alt-text

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.

alt-text

Resources​

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

alt-text

Audits​

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

alt-text

Console​

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

alt-text

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:

alt-text

Using the remote debugger​

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

The remote debugger has two advantages:

  • Its easier to use in a secondary monitor. For some cases (for example, when debugging in-game windows), it's more convenient to open the debugger on a different screen and not as an in-game Overlay that can hide the UI.
  • It may eliminate overwolf debugger related issues. In certain circumstances, it be advantageous to open another debugger window to 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.

You can see the list of all open Overwolf apps and windows. Press a link to open the remote developer tools for that window.

Use local debugger with debug_url flag​

For local-server debugging (e.g, with React apps) you can use the debug_url flag in the manifest.json file.

Enabling automation testing with automation flag​

It is possible to use a testing framework (e.g. Selenium) with your application. More details here.

Run your React app locally​

Runs on a node.js server.

  1. Download a react project (E.g. This one).
  2. Extract it into a folder and open it in VS Code.
  3. Run the project using npm -i inside VS Code.

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

Debug your Overwolf app window locally​

The following 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 dev console will open 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 will open, and your react app will load up inside of it.
    Now every change made in the react code is seen in the Overwolf window.

Notes​

  • You must have a local web server installed on your machine.
  • This only works when loading unpacked extensions.
  • This only works when connecting directly to "localhost" / "127.0.0.1".
  • When using debug_url, calling overwolf.windows.getMainWindow() produces a known issue, and it will not work as expected. The API returns a reference to the current window instead of the main window.