Debugging Tests with JavaScript Console Logs and HAR Files (Extended Debugging)

Enabling the Extended Debugging feature in your Selenium test script collects the console logs and HTTP Archive files generated during testing for use in debugging and build performance evaluation.

NOTE: Enabling Extended Debugging generates additional assets that impact test performance and is not intended for everyday testing. 

Getting Started

See the following sections for more information: 

What You'll Need

A Chrome browser (up to five versions back from current) or a Firefox browser (versions 53 and above).

NOTE: Extended Debugging is not supported with Headless. 

Enabling Extended Debugging

To generate the JS console logs and HAR files, add the extendedDebugging capability to the desired capabilities of your test and set it to true. Here are some example scripts in both W3C WebDriver Protocol and legacy JSON Wire Protocol that show Extended Debugging enabled. 

const capabilities: {
  browserName: 'chrome',
  browserVersion: 'latest',
  platformName: 'Windows 10',
  'sauce:options': {
        extendedDebugging: true,
  }
}

const capabilities = {
  browserName: 'chrome',
  version: 'latest',
  platform: 'Windows 10',
  extendedDebugging: true,
}

For more information and additional examples, see Extended Debugging (Sauce Labs on GitHub).

Once the test completes, you can access the logs and files through the Sauce Labs application or with the REST API.

Edit Your Firefox Profile

If you're testing on a Firefox browser, edit the Firefox about:config file to configure your profile as follows to allow Extended Debugging:

'mozz:firefoxOptions': {
	'profile': '<CUSTOM_PROFILE_ID>',
	'args': [
		'-start-debugger-server',
		'9222'
	],
	prefs: {
		'devtools.debugger.remote-enabled': true,
		'devtools.debugger.prompt-connection': false,
		'devtools.chrome.enabled': true
	}
},

JavaScript (JS) Console Logs

The JS console collects security errors, warnings, and messages that are explicitly logged by the browser. You can use these logs to find out which components of your web application failed to load or ran into an error, what warnings were logged by the browser, and get more information about application performance. The console log information is associated with the URL where it occurred, and is composed of four types of information: Log, Info, Warning, Error. In this example, you can see how an error was generated for the URL  https://pbs.twimg.com/profile_images/477099293250052097/fMFjb8gu_400x400.jpeg when a resource failed to load:

{
   "http://webdriver.io/api/action/click.html":[
      {
         "level":"error",
         "column":0,
         "text":"Failed to load resource: the server responded with a status of 404 (OK)",
         "source":"network",
         "networkRequestId":"1543.182",
         "url":"https://pbs.twimg.com/profile_images/477099293250052097/fMFjb8gu_400x400.jpeg",
         "timestamp":1501197041.22091,
         "line":0,
         "type":"log"
      }
   ]
}

Accessing Console Logs

You can access the JS Console logs (console.json) under the Logs tab of the Test Details page in Sauce Labs, or through the REST API through the assets endpoint:

curl https://YOUR_SAUCE_USERNAME:YOUR_SAUCE_ACCESS_KEY@api.us-west-1.saucelabs.com/v1/eds/JOB_ID/console.json

The topics in The Sauce Labs REST API contain more information about accessing the API, authentication, and available methods. 

Using HAR Files for Debugging

What are HAR Files?

HTTP Archive Format (HAR for short) files collect all network requests and responses made and received by the browser during testing. You can refer to HAR files for useful debugging information, such as:

• Identifying browser requests that time out
• Pinpointing requests slowing down the loading process
• Locating faulty API calls

Viewing HAR Files

You will need a HAR viewer to read the files. Check out the Sauce Labs React Network Viewer HAR viewer. For step-by-step usage instructions, see Visualize HAR Files with the New React Network Viewer (Sauce Labs Open Source Blog).

Other commonly used HAR viewers: 

• HTTP Archive Viewer (Software is Hard blog)

• Chrome HAR Viewer, by Eric Duran (Google)

Accessing HAR Files

To download HAR files in Sauce Labs, you can grab them from Live > Test Results > Click a test > Metadata. Alternatively, you can grab them from the REST API through the assets endpoint:

curl --compressed -O https://YOUR_SAUCE_USERNAME:YOUR_SAUCE_ACCESS_KEY@api.us-west-1.saucelabs.com/v1/eds/JOB_ID/network.har
and
curl --compressed -O https://YOUR_SAUCE_USERNAME:YOUR_SAUCE_ACCESS_KEY@api.eu-central-1.saucelabs.com/v1/eds/JOB_ID/network.har

The topics in The Sauce Labs REST API contain more information about accessing the API and available methods.