CLion 2017.2 Help

Using JetBrains Chrome Extension

On this page:

Introduction

The JetBrains Chrome extension is mainly responsible for debugging JavaScript in Chrome and Dartium. During a debugging session, the extension also supports of HTML, CSS, and JavaScript, and shows the DOM tree and the source code of the actual page.

Installing the JetBrains Chrome extension

You can install the extension during the first debugging session with Chrome or Dartium or at any time directly from the Chrome Web Store.

  1. Open the JetBrains IDE Support page by doing one of the following:
    • Visit the Chrome Web Store at any time.
    • Start a JavaScript debugging session: create a JavaScript run configuration with Chrome as the debugging browser, and click the Debug button /help/img/idea/2017.2/debug.png on the toolbar. For details, see Debugging JavaScript in Chrome. CLion informs you that it is waiting for connection with the JetBrains IDE Support extension and shows the following message in the Debug tool window:
      js_debug_install_extension.png
      Click the JetBrains IDE Support extension link which brings you to the Chrome Web Store.
    In either case the JetBrains IDE Support page opens.
  2. Click the Add to Chrome button /help/img/idea/2017.2/chrome_extension_add_to_chrome.png.
  3. In the Confirm New Extension dialog box that opens, click Add. The Add to Chrome button changes to Added to Chrome /help/img/idea/2017.2/chrome_extenstion_added_to_chrome.png.

When the extension is installed, the /help/img/idea/2017.2/chrome_extenstion_jb_icon.png icon is displayed next to the Chrome address bar.

Working with JetBrains Chrome extension

Control over the JetBrains Chrome extension is provided through the chrome://extensions page:

  • To open the page, just type chrome://extensions in the Chrome address bar.
    Alternatively click Customize and control Google Chrome (/help/img/idea/2017.2/chrome_extension_control_icon.png), choose Settings on the context menu, and then click Extensions on the chrome://settings page that opens.
  • To deactivate the extension, clear the Enabled check box. The check box name changes to Enable.
  • To activate the extension, select the Enable check box.
  • To uninstall the extension, click the Remove from Chrome button /help/img/idea/2017.2/chrome_extension_remove.png.

Overriding the default CORS settings

Suppose the page you are debugging requests a resource which is protected against access for security reasons through CORS settings. You can enable access to the resources protected by default by changing the Chrome extension options.

To override the default CORS settings:

  1. Right-click /help/img/idea/2017.2/chrome_extenstion_jb_icon.png and choose Options on the context menu. A web page with Chrome extension options opens showing the parameters to connect to CLion.
  2. In the Force CORS text box, type the pattern that defines the URL addresses you want to make accessible, for example: http://youtrack.jetbrains.com/rest/*.

Changing port

During a debugging session, the Chrome extension listens to the port of the JetBrains IDE from which the extension was invoked. Each IDE including CLion has its own default port on which it starts by default.

If for some reason the default CLion port is already busy, CLion finds the closest available port and starts on it. This results in a conflict: CLion is running on a "new" port while the Chrome extension still listens to the port of a previously started product and fails to establish connection with CLion.

The conflict reveals when you initiate a debugging session from CLion: the extension fails to connect through the default port, CLion waits for connection from the extension and displays the following message with the port number where it is actually running (for example, current port 63343):

js_debug_install_extension.png

To fix the problem, specify the actual CLion port in the Chrome extension options:

  1. Right-click /help/img/idea/2017.2/chrome_extenstion_jb_icon.png and choose Options on the context menu. A web page with the Chrome extension options opens showing the parameters to connect to CLion.
  2. In the IDE Connection area, specify the actual CLion port in the Port spin box.

See Also

Last modified: 16 August 2017