Most complete Pycharm Tutorials (1)--Custom Skins
Most full Pycharm Tutorials (2)-code style
Most full Pycharm Tutorials (3)-code debugging, running
Most complete Pycharm Tutorials (4)--related configuration for Python interpreter
Most full Pycharm Tutorials (5)--python shortcut key Related settings
Most full Pycharm Tutorials (6)--using Pycharm as a VIM editor
Most full Pycharm Tutorials (7)--Configuration of VM VMs
Most complete Pycharm tutorials (8) creation and management of--django engineering
Most complete Pycharm Tutorials (9)--Create and run a basic Python test program
Most complete Pycharm tutorial (Ten)--pycharm Debugger General Chapter
Most complete Pycharm tutorial (one)--pycharm Debugger Breakpoint Chapter
1. Overview
For web development, it is important to debug Java scripts. To show Pycharm's ability to debug Java scripts, we create a very simple script that shows some simple browser pages and then debugs them on the server.
To be able to debug on an external server, you need to run the program file on it and copy it on your computer. However, it doesn't matter whether the Web server is running on a physical remote or running on your computer, the application can be seen as a remote service program.
When a remote file generated using JavaScript is opened, the debugger tells Pycharm the name of the current processing file and the corresponding line number. Pycharm opens the local copy and navigates to the appropriate row. This behavior of Pycharm keeps the file processes of the server and client in sync. This communication mechanism becomes a mapping (mapping), which retains the relevant settings information in the Debug configuration file.
2. Preparatory work
(1) The Pycharm version is 3.0 or higher.
(2) Using Google Chrome (this tutorial is based on Google Chorme)
(3) You have installed the JetBrains IDE support external plugin. If you are loading the debugger for the first time, Pycharm will give you the importance of installing the JetBrains IDE support external plugin.
For example, for a browser, when the icon is displayed on the right side of the address bar and is not transparent, the plugin is installed and activated successfully.
Can be in https://chrome.google.com/webstore/detail/jetbrains-ide-support/ Hmhgeddbohgjknpmjagkdomcpobmllji Download and install the JetBrains IDE Support external extension.
It is recommended to use XAMPP as a service-side program (article is for XAMPP).
3. Create a simple project
From the main menu, select File→new Project, and select an empty project named Myjsproject:
Open this project in a separate window:
4. Case Preparation
First, create an HTML page. In the Project Management window, press Alt+insert to select the HTML file type in the popup shortcut menu named numbers:
Pycharm will add some raw content to the generated HTML file. Next, embed a JavaScript file into it and enter the code under the <body> tab:
Be aware of Pycharm's spelling hints when entering code:
When you are finished, note that the filename numbers.js is given in the highlighted form. This indicates that the current JavaScript file does not exist. With the cursor positioned on the name "Numbers", press Alt+enter (or click on the small yellow light bulb on the left); A quick tip is given--Create a default file:
With this quick method, the original JavaScript file is created and the following code is entered:
5. Set Breakpoints
The next step in the JavaScript file is to insert a breakpoint, which is very simple, click on the right:
6. Configure the server
7. Create a server
Open the Settings/preferences dialog box (ctrl+alt+s or click the Settings button on the main menu), click the Green plus sign of the deployment page, and name the server myremoteserver, The specified type is local or mounted server.
8. Configure the Map connection
Next, configure the server that you created. In the Connection tab, enter the directory of local files that need to be loaded, and this is C:\xampp\htdocs, which means that local files will be uploaded from this directory:
Click the Mappings tab, where you define the local path, the server's deployment path (same as the settings on the Connection tab), and the server's Web path:
9. Define the default server for the project
Specifies that the server being created is the default server for the current project, just click the button in Deployment toolbar.
10. Preview Server
Next, we need to confirm that our service program can be uploaded and run smoothly in the Pycharm visual window. Select Tools→deployment→browse Remote Hosts from the main menu. The Remote Host Control window displays the currently opened service:
11. Deploy files to the server application
This is a very simple operation in Pycharm. Select Tools→deployment→upload to Myremoteserver in the main menu to ensure that the new directory C:\xampp\htdocs has been successfully created on the server.
Another way to do this is by right-clicking the file and Working in the shortcut menu. Of course both need to be done through the upload to Myremoteserver command.
12. Commissioning
13. Start Commissioning
After you start debugging, your HTML page will be displayed in the browser, and the debug window of the Debugging tool windows opens. The program should stop when the first breakpoint is hit and mark the line with a blue code:
For more information about breakpoints, see the Breakpoints section in product documentation.
For more in-depth debugging of the application, the relevant debugging information is displayed in the Debug window and on the browser:
Click and control the debugging process for the code to terminate debugging by turning off the yellow flag or the unit price Cancel button.
Full Pycharm Tutorial (--pycharm) Java Script debugging for the debugger
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
