Developer Tools

The Overwolf developer tools are a set of web authoring and debugging tools. They can do a variety of things such as: showing which assets the page has requested, how long they took to load, inspecting currently-loaded HTML, CSS JS and more.

How do you pull it up? Two ways:

Keyboard:

  1. Click on the relevant app window
  2. Hit Ctrl+Shift+I

Settings menu:

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

dev-options

Explore the panels

Elements

The Elements panel allows you to see what the HTML on your app’s window looks like at runtime, as well as what CSS is applied to each element.

elements

 

Network

The Network panel records information about each network operation on a page. Use it to get insights into requested and downloaded resources and optimize your page load performance.

network

 

Sources

Lets you debug your JavaScript using breakpoints. Breakpoints can be configured to only be triggered when certain or general conditions are met.

Tip – Make a minified code readable by pressing the “pretty print” button ({ })

sources

 

Timeline

Allows you to improve the runtime performance of your app by recording and inspecting events that happen during the app’s lifecycle.

timeline

 

Profiles

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

profiles

 

Resources

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

resources

 

Audits

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

audits

 

Console

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

console