Contents

Debugging Dart web apps

您可以使用Chrome DevToolsDart开发编译器(dartdevc)调试Dart网络应用.

该页面引导您将Dart与Chrome DevTools结合使用,并特别注意设置和Dart方面的注意事项. 有关使用Chrome DevTools进行调试的一般信息,请参见JavaScript调试入门指南参考.

Overview

  • 要提供您的应用程序,请在命令行或通过IDE使用webdev serve (使用dartdevc).
  • 要在Chrome DevTools中查看Dart类型,请启用自定义格式器 .
  • 您无法在Chrome DevTools控制台( someProperty )中使用Dart代码,但有时您可以使用关闭的JavaScript代码( this.someProperty ).
  • 如果您在Dart代码中设置断点时遇到问题,请尝试禁用和重新启用源映射 .

Getting started with Chrome DevTools

Dart开发编译器( dartdevc )内置了对源映射和Dart对象的自定义格式的支持.

Prerequisites

要使用Chrome DevTools调试dartdevc,您需要以下软件:

Walkthrough

本部分将引导您了解使用Chrome DevTools调试Web应用程序的基础知识. 如果您已经有可调试的应用程序,则可以跳过创建测试应用程序的步骤(步骤1),但是您需要调整说明以匹配您的应用程序.

  1. 可选:创建一个名为test_app的应用程序,该应用程序使用Stagehand的Web角度模板.

    • 如果您使用的是命令行,请按照以下步骤使用Stagehand创建应用

      $ mkdir test_app
      $ cd test_app
      $ stagehand web-angular
      $ pub get
      
    • 如果您使用的是Dart IDE或编辑器,请创建AngularDart网络应用并将其命名为test_app . 您可能会看到带有材料设计组件的Web应用程序描述.

  2. 编译并服务于应用与dartdevc,使用或者您的IDE或webdev在命令行.

    $ webdev serve
    
  3. 在Chrome浏览器窗口中打开应用.
    例如,如果您使用不带参数的webdev serve ,请打开localhost:8080 .

  4. 打开DevTools:按Control + Shift + I (或在Mac上按Command + Option + I ).

  5. 启用自定义格式器 ,以便您可以在Chrome DevTools中查看Dart类型.

  6. 选择" 源"选项卡.

  7. 在" 文件浏览器"窗格中,选择" 页面" ,然后导航到重要组件的Dart文件.
    例如,导航到packages/test_app/src/todo_list/todo_list_component.dart .

  8. 在响应用户事件而调用的方法中设置代码行断点.
    例如,通过单击行号36来中断add()方法的顶部.

  9. 在应用程序的用户界面中,触发导致方法调用的事件. 执行在断点处停止.
    例如,在文本字段中输入内容,然后按Enter .

  10. 在" 代码编辑器"窗格中,将鼠标悬停在属性上. 您可以查看其Dart运行时类型和值.
    例如,在add()方法中, items是长度为0的List<String> .

  11. 查看" JavaScript调试"窗格中的" 调用堆栈"和" 范围"窗格. 在作用域下 ,查看局部变量this的类型和值.

  12. 恢复脚本执行,然后再次触发事件. 执行再次暂停.

  13. 如果控制台不可见,请按Esc .

  14. 在控制台中,尝试查看组件的属性.

    例如,尝试查看items对象:

    • 输入items . 它不起作用,因为JavaScript要求使用this. 字首.

    • 输入this.items . 之所以可行,是因为JavaScript对象与Dart对象具有相同的名称. 多亏了自定义格式化程序,您才能看到Dart类型和值.

    • 输入this.items[0] . 之所以可行,是因为Dart列表映射到JavaScript数组.

    • 输入this.items.first . 这不起作用,因为与Dart List类不同, JavaScript数组没有first属性.

  15. Try other DevTools features.

Changing DevTools settings

本节介绍了在调试应用程序时可能需要更改的设置.

Enabling custom formatters

要在Chrome DevTools中查看Dart类型,您需要启用自定义格式化程序.

  1. 从DevTools 自定义和控制DevTools⋮菜单中,选择设置 . 或按F1键.
  2. 选择" 首选项"设置中" 控制台"标题下的" 启用自定义格式器 " .
  3. 关闭设置:按Esc或单击右上角的x .

Disabling and re-enabling source maps

Chrome DevTools 默认情况下启用源地图. 您可能需要暂时禁用源映射,以便可以看到生成的JavaScript代码.

  1. 从DevTools 自定义和控制DevTools⋮菜单中,选择设置 . 或按F1键.
  2. 找到" 首选项"设置中" 源"标题下的" 启用JavaScript源映射"复选框.
    • 显示JavaScript代码,请清除 启用JavaScript源映射 .
    • 要显示Dart代码(如果有),请选择 启用JavaScript源映射 .
  3. 关闭设置:按Esc或单击右上角的x.

Getting webdev and stagehand

If you’re using the command line instead of an IDE or Dart-enabled editor, then you need the webdev tool. To use the command line to create apps from standard templates, you also need the stagehand tool. Use pub to get these tools:

$ pub global activate webdev
$ pub global activate stagehand

如果您正确设置了PATH环境变量,则现在可以在命令行中使用以下工具:

$ webdev --help
A tool to develop Dart web projects.
...

有关设置PATH的信息,请参见pub global文档.

每当您更新Dart SDK或想要获得最新的Stagehand模板时,请通过再次激活它们来更新工具:

$ pub global activate webdev     # update webdev
$ pub global activate stagehand  # update stagehand

by  ICOPY.SITE