Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use Pycharm debugger to achieve Java script debugging". In daily operation, I believe many people have doubts about how to use Pycharm debugger to achieve Java script debugging. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to use Pycharm debugger to achieve Java script debugging". Next, please follow the editor to study!

1. Overview

For Web development, debugging Java scripts is very important. To demonstrate Pycharm's strong debugging capabilities for Java scripts, we create a very simple script here to display some simple browser pages, and then debug it on the server.

In order to be able to debug on an external server, you need to run the program file on it and make a copy on your computer. But it doesn't matter, whether the Web server runs on a physical remote or on your computer, the application in it can be seen as a remote service.

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 line. This behavior of Pycharm keeps the file processes on the server side and the client side synchronized. This communication mechanism is called mapping, and the relevant setting information is retained in the debug configuration file.

2. Preparatory work

(1) Pycharm version 3.0 or higher.

(2) use Google browser (this tutorial is based on Google Chorme)

(3) you have installed the JetBrains IDE Support external plug-in. If you are loading the debugger for the first time, Pycharm will tell you about the importance of installing JetBrains IDE Support external plug-ins.

For example, for browsers, when an icon is displayed on the right side of the address bar and is not transparent, the plug-in has been installed and activated successfully.

You can download and install JetBrains IDE Support external extensions on https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji.

It is recommended to use XAMPP as the server program (the article is aimed at XAMPP).

3. Create a simple project

Select File → New Project from the main menu, select an empty project, and name it MyJSProject:

Open the project in a separate window:

4. Instance preparation

First, create a HTML page. Press Alt+Insert in the project management window, select the HTML file type from the pop-up shortcut menu, and name it numbers:

Pycharm adds some original content to the generated HTML file. Next, embed a JavaScript file into it and enter the code under the tag:

When entering the code, pay attention to the spelling prompt function of Pycharm:

When you are done, notice that the file name numbers.js is given in highlighted form. This indicates that the current JavaScript file does not exist. After positioning the cursor over the name "numbers", press Alt+Enter (or click the small yellow light bulb on the left); a quick prompt is given-- create a default file:

With this shortcut, you have created the original JavaScript file, and then enter the following code:

5. Set breakpoints

Next, insert a breakpoint in the JavaScript file, which is very simple, just 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 on the Deployment page page, name the server MyRemoteServer, and specify the type local or mounted server.

8. Configure the mapping connection

Next, configure the server you created. In the Connection tab, enter the directory of the local files that need to be loaded, here is C:\ xampp\ htdocs, which means that the local files will be uploaded from this directory:

Click the Mappings tab, where you define the local path, the deployment path for the server (same as the settings for the Connection tab), and the Web path for the server:

9. Define the default server for the project

Specify that the server created is the default server for the current project, just click the button in Deployment toolbar.

10. Preview server

Next, we need to make sure that our service program can be uploaded and run smoothly in the visual window of Pycharm. Select Tools → Deployment → Browse Remote Hosts from the main menu. The remote Host control window displays the currently newly opened services:

11. Deploy files to the server application

This operation is very simple in Pycharm. Select Tools → Deployment → Upload to MyRemoteServer from 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 in the shortcut menu by right-clicking on the file. Of course, both need to be done through the Upload to MyRemoteServer command.

12. Debugging

13. Start debugging

After you start debugging, your HTML page will be displayed in the browser and the debug window Debug tool window will open. The program should stop when the first breakpoint is hit and mark the line of code in blue:

For more information about breakpoints, see the Breakpoints section of product documentation.

For more in-depth debugging of the application, the relevant debugging information is displayed in the debugging window as well as on the browser:

Click and control the debugging process of the code, and stop debugging by turning off the yellow flag or the unit price Cancel button.

At this point, the study on "how to use the Pycharm debugger to debug Java scripts" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.