第 3 部分。 调试 JavaScript
能够调试 JavaScript 对 Web 开发人员至关重要。 借助基于 IntelliJ IDEA 的产品，此类调试将变得非常简单。 为了用 PyCharm 演示 JavaScript 调试功能，我们将创建一个非常基础的脚本，只是在浏览器页面中显示一些数字，然后在服务器上对其进行调试。
开始之前
请确保在设置中启用了捆绑的 JavaScript and TypeScript 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，键入 JavaScript and TypeScript。 有关插件的更多信息，请参阅 管理插件。
请确保在设置中启用了捆绑的 JavaScript Debugger 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，键入 JavaScript Debugger。 有关插件的更多信息，请参阅 管理插件。
按照 配置 JavaScript 调试器 中的说明配置内置调试器。
若要在不重新加载页面的情况下，使您对 HTML、CSS 或 JavaScript 代码所做的更改立即显示在浏览器中，请启用 Live Edit 功能。 有关实时编辑功能的详细信息，请参阅 HTML、CSS 和 JavaScript 中的实时编辑。
本地调试 JavaScript
让我们从最基本的场景开始：当 JavaScript 与 HTML 文件位于同一文件夹时进行调试。
按照 创建 Python 项目 中的说明创建一个 纯 Python 项目。
在项目根目录中创建两个文件（有关信息，请参阅 创建新文件）：
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; });
在 script.js 的第 6 行设置一个断点，方法是点击行号。
切换到 index.html ，然后在上下文菜单中选择 调试 index.html 以启动调试器。 或者，按 Shift+F9。
PyCharm 在浏览器中打开 index.html 。 在该字段中键入任意文本，然后按 Enter 或点击 发送。
命中该断点，PyCharm 将停止执行 JavaScript。 您可以在 调试 工具窗口中检查当前状态。 有关信息，请参阅 检查已暂停的程序。
在本地开发服务器上调试 JavaScript
在开发 Django、Flask 或 React Web 应用时，JavaScript 文件通常由开发服务器提供。 下面我们来看在此类情况下如何调试 JavaScript。
准备项目
按照 创建 Django 项目 中的说明，创建一个包含应用的 Django 项目，例如
sample_app。转到 sample_app/views.py 并添加以下视图：
def index(request): return render(request, 'index.html')将插入符号置于应已高亮显示的
index.html处，按 Alt+Enter ，然后选择 创建模板 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> {% load static %} <script src="{% static 'script.js' %}"></script> </body> </html>在应用程序目录中创建一个新的 static 目录（有关信息，请参阅 创建目录）。 在新目录中，创建 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; });打开 urls.py ，将
from sample_app.views import index添加到导入中，并将path('', index, name='index'),添加到urlpatterns。 您应该得到如下内容：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), ]
现在，您的 Django 项目已准备就绪，您可以开始调试 script.js 。
在 script.js 的第 6 行设置一个断点，方法是点击行号。
使用窗口顶部的 运行 小部件运行自动创建的 Django 服务器运行配置。
在 运行 小部件中点击
，然后从下拉列表中选择 编辑配置。在打开的 运行/调试配置 对话框中，按 Alt+Insert 并选择 JavaScript 调试。 提供该配置的名称，并在 URL 中指定正在运行的 Django 服务器的地址（例如，
http ://localhost:8000/）。
点击 应用 以保存配置，然后按 Shift+F9 在调试模式下运行该配置。
PyCharm 在浏览器中打开 index.html 。 在该字段中键入任意文本，然后按 Enter 或点击 发送。
命中该断点，PyCharm 将停止执行 JavaScript。 您可以在 调试 工具窗口中检查当前状态。 有关信息，请参阅 检查已暂停的程序。