IntelliJ IDEA运行和调试Dart Web应用程序

运行和调试Dart Web应用程序

您可以在任何浏览器中运行Dart Web应用程序，而调试仅在Dartium 和Chrome中支持。要运行Dart Web应用程序，请在浏览器中打开应用程序的主HTML文件。调试Dart Web应用程序是通过类型JavaScript Debug的运行配置启动的。

IntelliJ IDEA与pub serve工具集成在一起，在必要时将Dart代码编译为JavaScript。当您在浏览器中打开Dart Web应用程序时，通常从内置的服务器URL（例如，http://localhost:63342/project-name/web/index.html）开始。但是，内置服务器不用于为应用程序提供服务。相反，IntelliJ IDEA会自动启动pub服务（例如在随机的自由端口上，例如，54321），并将浏览器页面重定向到发布服务URL（例如，http://localhost:54321/index.html）。

pub服务的工作记录在专用pub服务工具窗口中。当您在当前IntelliJ IDEA会话期间首次运行或调试Dart Web应用程序时，工具窗口会打开。您可以通过单击工具栏上的 来停止该工具。当您再次开始运行或调试时，pub serve会自动重新启动。

运行Dart Web应用程序

用Dart参考打开HTML文件，或者在项目工具窗口中选择它。在编辑器或选择的上下文菜单上，单击“在浏览器中打开（Open in Browser）”并在列表中选择所需的浏览器。

或者，在编辑器中打开HTML文件，按Alt+F2，然后从弹出式菜单中选择一个浏览器。

调试Dart Web应用程序

此功能仅在Ultimate版本中受支持。

仅在Dartium和Chrome中支持Dart Web应用程序的调试。调试会话通过类型为JavaScript Debug的运行配置启动。

在开始之前，你需要先配置内置调试器，按照“配置JavaScript调试器”中的描述进行配置。要使用实时编辑功能并在浏览器中查看HTML和CSS中的更改，请安装JetBrains IDE支持Chrome扩展。

在HTML，CSS和JavaScript的Live Edit中查找更多内容。

创建JavaScript Debug运行/调试配置

1. 打开引用Dart的HTML文件或在项目工具窗口中选择文件 。
2. 在上下文菜单中，选择：创建'<HTML_file_name>'（Create '<HTML_file_name>'），将打开该“运行/调试配置：JavaScript的调试（Run/Debug Configuration: JavaScript Debug）”对话框打开。
3. 选择浏览器来调试应用程序。如果您选择具有内置Dart虚拟机的Dartium，则Dart代码将以本机方式执行。如果您选择Chrome，则Dart代码将通过dart2js或dartdevc工具编译为JavaScript 。
4. 该URL字段已经以格式，http://localhost:<built-in server port>/<project-name>/<relative path to the HTML file>，显示应用程序的URL地址。在调试会话期间，浏览器将从该URL重定向到pub服务URL。
   确保此URL地址中的端口与调试器页面上的内置服务器端口以及Chrome扩展设置中的端口相同。

开始调试

1. 在Dart代码中配置和设置断点。
2. 启动调试会话：从工具栏上的“编辑配置（Edit configurations）”下拉列表中选择已创建的运行配置，然后单击 。IntelliJ IDEA在选定的浏览器中打开指定的URL。
3. 在打开的调试工具窗口中，逐步执行程序，停止并恢复程序执行，在暂停时检查它等。