第 3 部分。 调试 JavaScript
调试 JavaScript 的能力对 Web 开发人员至关重要。 使用基于 IntelliJ IDEA 的产品，这种调试变得非常简单。 为了演示 PyCharm 的 JavaScript 调试功能，我们将创建一个非常基础的脚本，该脚本仅在浏览器页面中显示一些数字，然后在服务器上调试它。
在开始之前
请确保在设置中启用了 JavaScript 和 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>在应用程序目录中创建一个新目录 静态 （有关信息，请参阅 创建目录）。 在新目录中创建 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。 您可以在 调试 工具窗口中检查当前状态。 有关信息，请参阅 检查挂起的程序。