Part 3. Debugging JavaScript

1. Make sure the JavaScript and TypeScript bundled plugin is enabled in the settings. Press Ctrl+Alt+S to open settings and then select Plugins. In the search field, type JavaScript and TypeScript. For more information about plugins, refer to Managing plugins.

2. Install and enable the JavaScript Debugger plugin on the Settings | Plugins page, as described in Installing plugins from JetBrains Marketplace. The plugin is available only in PyCharm Pro.

3. Configure the built-in debugger as described in Configuring JavaScript debugger.

   To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality. For more information about the live editing functionality, refer to Live Edit in HTML, CSS, and JavaScript.

1. Create a Pure Python project as described in Create a Python project.

2. Create two file in the project root (for information, refer to Create new files):

   • index.html:

     <!DOCTYPE html> <html> <head> <title>Character count</title> </head> <body> <form id="form"> <input type="text" id="inputText" placeholder="Enter text"> <button type="submit">Send</button> </form> <p id="output">Character count: </p> <script src="script.js"></script> </body> </html>

   • script.js

     document.getElementById("form").addEventListener("submit", function(event){ event.preventDefault(); let inputText = document.getElementById("inputText").value; let characterCount = inputText.length; document.getElementById("output").innerHTML = "Character count: " + characterCount; });

3. Set a breakpoint on the line 6 of script.js by clicking the line number.

   

4. Switch to index.html and start the debugger by selecting Debug index.html from the context menu. Alternatively, press Shift+F9.

   

5. PyCharm opens the browser with index.html. Type any text in the field and press Enter or click Send.

   

6. The breakpoint is hit, and PyCharm stops the execution of JavaScript. You can examine the current state in the Debug tool window. For information, refer to Examine suspended program.

   

Prepare the project

1. Create a Django project with an app, for example, sample_app as described in Create a Django project.

2. Go to sample_app/views.py and add the following view:

   def index(request): return render(request, 'index.html')

3. Set the caret to index.html which should be hihglighted, press Alt+Enter, and select Create template index.html.

   

4. Fill the newly created template file with the following:

   <!DOCTYPE html> <html> <head> <title>Character count</title> </head> <body> <form id="form"> <input type="text" id="inputText" placeholder="Enter text"> <button type="submit">Send</button> </form> <p id="output">Character count: </p> {% load static %} <script src="{% static 'script.js' %}"></script> </body> </html>

5. Create a new directory static in the application directory (for information, refer to Create directories). In the new directory, create script.js and fill it with the following code:

   document.getElementById("form").addEventListener("submit", function(event){ event.preventDefault(); let inputText = document.getElementById("inputText").value; let characterCount = inputText.length; document.getElementById("output").innerHTML = "Character count: " + characterCount; });

6. Open urls.py, add from sample_app.views import index to imports, and path('', index, name='index'), to urlpatterns. You should get the following:

   from django.contrib import admin from django.urls import path from sample_app.views import index urlpatterns = [ path('', index, name='index'), path('admin/', admin.site.urls), ]

Set a breakpoint on the line 6 of script.js by clicking the line number.

1. Run the automatically created Django server run configuration by using the Run widget at the top of the window.

   

2. Click in the Run widget and select Edit Configurations from the dropdown.

3. In the Run/Debug Configurations dialog that opens, press Alt+Insert and select JavaScript Debug. Provide the name of the configuration and specify the address of the running Django server (for example, http ://localhost:8000/) in URL.

   

4. Click Apply to save the configuration and press Shift+F9 to run it in the debug mode.

5. PyCharm opens the browser with index.html. Type any text in the field and press Enter or click Send.

   

6. The breakpoint is hit, and PyCharm stops the execution of JavaScript. You can examine the current state in the Debug tool window. For information, refer to Examine suspended program.

   

1. Set a breakpoint on line 6 of script.js and a breakpoint on the return render(request, 'index.html') line of sample_app/views.py by clicking the line numbers.

2. Click in the Run widget and select Edit Configurations from the dropdown.

3. In the Run/Debug Configurations dialog, select the Django server run configuration. Click Modify options and select Start JavaScript debugger automatically when debugging. PyCharm also adds the Run browser field with the address of the Django server, for example, http://127.0.0.1:8000.

   For more information about the options, refer to Run/Debug Configuration: Django Server.

4. Click Apply to save the configuration and press Shift+F9 to run it in the debug mode.

5. PyCharm starts the Django server, opens the page in the browser, and attaches the JavaScript debugger to it. The breakpoint in views.py is hit when the server processes the request for the page. Resume the program by pressing F9.

6. In the browser, type any text in the field and press Enter or click Send. The breakpoint in script.js is hit. For information about examining the program state, refer to Examine suspended program.