How to View the Developer Console

Sometimes an error can occur in the Weave client that is not recorded in the weave.log file, this is especially likely to happen if you've been asked to test updates to a new piece of client-side functionality. For example, if you've been sent an updated plugin file and you've installed the plugin but now the client won't start, or the item with the new functionality is now not working at all. In these situations, it is possible that the error is logged by the browser on the clients' computer, rather than on the server that's running Weave. This article will provide information on how you can open the developer console and view any additional log information that may be generated there, which you can then provide to Cohga to help resolve the problem.

Debug Mode

Normally, when the Weave client is started, the JavaScript code running on the browser is compressed to make it quicker to download and run the code. This results in less useful information being written to the console which is a good thing, unless you are trying to debug an issue. To try and avoid this you should start the client in “debug mode”, which will sometimes provide information that can itself be used to resolve a problem, even without producing additional console output.

To enable debug mode when starting the Weave client you just need to add ;debug to the end of the URL you usually use to start Weave.

For example, if the usual Weave startup URL is:

http://example.com/weave/main.html

then to start the client in debug mode you’d use:

http://example.com/weave/main.html;debug

Note that if you have to login you may be directed away from the Weave client page to a login page and then redirected back to the Weave client page once you’ve logged in and the ;debug string at the end of the URL has been removed. If this is the case just manually add it back in the URL bar, and this time you should not be redirected to a login page, since you’re already logged in, but instead the client should start in debug mode. If you can’t get debug mode to work you can still perform the rest of the things outlined in this page to at least see if there’s an error occurring.

Opening the Developer Tools

Depending upon your browser there may be a different way to open the developer tools. Note that it’s possible for the developer tools to have been disabled by your organization.

Internet Explorer

You can access the developer tools either via the Setting menu in the top right, under the F12 Developer Tools menu item, or by pressing the F12 key.

Open

By default the developer tools will open up at the bottom of the existing browser window. You can use the “unpin” option in the developer tools title bar, or Control-P, to pop it out into a separate window that can be easier to view.

Open

To view the console output from here you should switch to the Console tab. If the tab is empty reload the client and you should see some output.

Google Chrome

You can access the developer tools in Chrome again from the Settings menu in the top right, but F12 and Control-Shift-I (that’s the letter, not the number) also work.

Again, Chrome will open the developer tools at the bottom of the browser window, and you can pop it out to a separate window.

And switching to the Console tab, and possibly reloading the client, should show the console output we’re after.

Microsoft Edge

The newest version of Edge operates in virtually the same way as Chrome (so refer to the instructions above).

Mozilla Firefox

Firefox uses Control-Shift-K to open the Web Console, or you can access it via the hamburger menu in the top right.

And switching to the Console tab, and possibly reloading the client, should show the console output we’re after.

Displaying the Code

Sometimes the issue you’re experiencing is related to errors in the Weave client JavaScript code. In this situation the developer console will generally output an error message that contains a link to open the offending code. Clicking on the link and sending the code, as a screenshot to Cohga can help resolve the issue.

Note: If you’re going to do this it is especially important that debug mode be enabled.

Internet Explorer

Clicking on the highlighted text above will switch to the Debugger tab and show the offending code

Google Chrome

Clicking on the link above will open the Sources tab and highlight the offending code

Related articles