运行、调试、测试和部署
调试
使用 PyCharm 进行调试
第 3 部分. 调试 JavaScript

第 3 部分. 调试 JavaScript

最后修改时间：2023 年 11 月 3 日

警告
此功能仅在专业版中支持。该版本是商业版本，它提供了一组出色的功能：有关更多详细信息，请参阅比较矩阵。

调试 JavaScript 的可能性对于 Web 开发人员来说至关重要。使用基于 IntelliJ IDEA 的产品，此类调试变得非常容易。为了说明 PyCharm 的 JavaScript 调试功能，我们将创建一个非常基本的脚本，仅在浏览器页面中显示一些数字，然后在服务器上对其进行调试。

如果在外部 Web 服务器上进行调试，应用程序文件将部署在该服务器上，并且您的计算机上会有它们的副本。无论 Web 服务器本身是在物理远程主机上还是在您的计算机上运行，部署在其上的应用程序文件都将被视为远程。

当打开加载一些 JavaScript 的远程 HTML 文件时，调试器会告诉 PyCharm 当前处理的文件的名称以及要处理的行号。PyCharm 打开此文件的本地副本并指示具有提供的编号的行。通过指定服务器上的文件和文件夹及其本地副本之间的对应关系可以启用此行为。这种对应关系称为映射，它是在调试配置中设置的。

先决条件

确保：

您正在使用 PyCharm Professional Edition 版本 3.0 或更高版本。
您正在使用 Google Chrome。
您正在使用XAMPP作为应用程序服务器。

提示
Chrome 无法打开其控制台窗口。

本教程是使用以下工具创建的：

PyCharm 专业版 2017.1。
谷歌浏览器。
XAMPP。

创建项目

从主菜单中，选择文件| 新建项目，然后执行以下操作：

选择纯Python项目类型
指定项目位置C: \SampleProjects \py \MyJSProject
选择Python解释器

准备就绪后，单击“创建”。

选择在单独的窗口中打开这个新项目，而不是将其添加到任何当前打开的项目中：

准备示例代码

首先，让我们创建一个 HTML 页面。为此，请在“项目”工具窗口获得焦点时，按，在弹出菜单上选择HTML 文件，然后输入文件名。AltInsertnumbers

PyCharm 用一些初始内容存根 HTML 文件。接下来，将对 JavaScript 文件的引用嵌入到该 HTML 文件中。为此，请在 <body> 标记内键入以下代码：

<script type="text/javascript" src="numbers.js" language="JavaScript"></script>

请注意代码完成，在您键入时可用：

准备好后，请注意突出显示的文件名numbers.js。这是对不存在的 JavaScript 文件的引用。将插入符号放在该名称处并按（或单击黄色灯泡）；建议快速修复 - 创建丢失的文件：AltEnter

选择此快速修复，并准备好 JavaScript 存根文件。接下来，输入以下代码：

var i=0;
for (i=0;i<=10;i++)
    {if (i==3)
        {
            continue;
        }
    document.write("The number is " + i);
    document.write("<br/>");
}