- Before you start
- Creating a simple project
- Preparing an example
- Setting breakpoints
- Configuring a server
- Deploying files to the server
- See also
Before you start
Make sure that:
- You are working with PyCharm Professional Edition version 3.0 or higher.
- You are working with Google Chrome (this tutorial is written for Chrome).
- You have JetBrains IDE Support extension installed and activated. If you launch the debugger for the very first time, PyCharm will warn you about the necessity to install the extension JetBrains IDE Support.
For example, with Chrome, you can tell that JetBrains extension is installed and activated, when icon shows to the right of the address bar, and it is non-transparent.
You can install JetBrains IDE Support extension https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji yourself.
- You are using XAMPP as an application server (this tutorial is written for XAMPP).
Creating a simple project
On the main menu, choose File→New Project, choose the empty project type, and specify the name MyJSProject:
Choose to open this new project in a separate window, not adding it to any of the currently open projects:
Preparing an example
First, let’s create a HTML page. To do that, with the Project tool window having the focus, press Alt+Insert, choose HTML file on the pop-up menu, and enter the file name numbers:
Mind the code completion, which is available while you type:
Configuring a server
Creating a server
To do that, open Settings/Preferences dialog (press Ctrl+Alt+S or click on the main toolbar), in the Deployment page click and specify the server name MyRemoteServer and type local or mounted server.
Configuring connection and mappings
Then, configure the server. In the Connection tab, specify the directory where your local files will be uploaded; in our case, this directory is C:\xampp\htdocs - it means that the local files will be uploaded to this directory:
Click the Mappings tab. Here define the local path, the deployment path on the server (which is relative to the folder specified in the Connection tab), and the Web path on the server:
Defining project default server
Make the server the project default. To do that, click button in the Deployment toolbar.
Viewing the server
Let's make sure the server is up and running, and, which is even more important, visible to PyCharm. To do that, on the main menu, choose Tools → Deployment → Browse Remote Hosts. The Remote Hosts tool window shows the newly created server:
Deploying files to the server
With PyCharm, it's just a snap... For example, you can easily do that via the main menu: choose Tools → Deployment → Upload to MyRemoteServer, and make sure that the new directory C:\xampp\htdocs is created on the server.
Another approach is to use the context menus of the files: both contain same command Upload to MyRemoteServer.
Starting the debugger session
All the preliminary steps are done, and it’s time to proceed to the debugging session. To start it, right-click the background of the file numbers.html, and choose Debug 'number.html' on the context menu - thus you will launch the debugger with the default temporary run/debug configuration:
Examining the debugger information
When the debugging session is launched, your HTML page appears in the browser, and the Debug tool window opens. Your program execution suspends when the first breakpoint is hit. Such a breakpoint is marked with a blue stripe:
As you step through your application, the corresponding information appears in the Debug tool window, and in the page of your web browser:
To step though the script, click or ; to terminate the debugger session, close the yellow banner, or click Cancel.