PyCharm 3.1.0 Web Help

The JetBrains Chrome extension is mainly responsible for debugging JavaScript in Chrome and Dartium. During a debugging session, the extension also supports Live Editing of HTML, CSS, and other code that contains or produces JavaScript, and provides actual HTML DOM and dynamically updated source code of the actual page.

With the JetBrains Chrome extension, you can run several debugging sessions controlled by several IDEs and switch between them by changing the port which the extension listens to. And finally, the extension provides the possibility to override default CORS (Access-Control_Allow_Origin) settings and access local scripts on your machine that are by default protected.

On this page:

Installing the JetBrains Chrome extension

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

  1. Do one of the following:

    In either case the JetBrains IDE Support page opens where you can learn more about the extension.

  2. Click the Add to Chrome button chrome_extension_add_to_chrome.
  3. In the Confirm New Extension dialog box that opens, click Add. The Add to Chrome button changes to Added to Chrome chrome_extenstion_added_to_chrome .

When the extension is installed, the chrome_extenstion_jb_icon icon is displayed next to the Chrome address bar.

Enabling, disabling, and removing the JetBrains Chrome extension

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

  • To open the chrome://extensions/ page, click the Customize and control Chromium button chrome_extension_control_icon next to the address bar, then choose Tools | Extensions on the context menu.
  • 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 Chromium button chrome_extension_remove.
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. See more about CORS at https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS.

You can enable access to the resources protected by default by changing the Chrome extension options.

  1. Right-click the chrome_extenstion_jb_icon icon and choose Options on the context menu. A web page with Chrome extension options opens showing the parameters to connect to PyCharm.
  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 the port for connecting to PyCharm

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

If for some reason the default PyCharm port is already busy, PyCharm finds the closest available port and starts on it. This results in a conflict: PyCharm 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 PyCharm. The conflict reveals when you initiate a debugging session from PyCharm: the extension fails to connect through the default port, PyCharm waits for connection from the extension and displays the following message with the port number where it is actually running:

js_debug_install_extension.png

To fix the problem, specify the actual PyCharm port in the Chrome extension options, see Using JetBrains Chrome Extension.

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

See Also

Procedures:

Reference:

External Links:

Web Resources: