JSRUN 用代码说话

调试助手

编辑教程

调试助手

Ember不仅提供了专门用于调试Ember程序的谷歌、火狐浏览器插件Ember Inspector( 安装插件可能需要翻墙,如果你也是一个程序员我想翻墙对于你来说应该不是什么难事!!!),还提供了用于调试的helper。 按照惯例,先做好准备工作,分别执行Ember CLI命令创建controller、route和模板:

ember generate controller dev-helper
ember generate route dev-helper

日志助手{{log}}

{{log}}可以把从controller、route类传递到页面上的值以日志的形式直接输出在浏览器的控制台上。

下面代码在controller类添加测试数据。

// app/controllers/dev-helper.js

import Ember from 'ember';

export default Ember.Controller.extend({
    testName: 'This is a testvalue...'
});

可以在模板上直接显示字符串testName的值,也可以使用{{log}}助手以日志形式输出在控制台。

当然也可以直接使用{{log 'xxx'}}在控制台打印"xxxx"。

第二点断点助手的示例中将为你演示{{log 'xxx'}}用法。


直接显示在页面上:{{testName}}
{{log testName}}

运行http://localhost:4200/dev-helper 之后我们可以在页面上看到字符串testName的值。

打开谷歌或者火狐的控制台(console标签下)可以看到也打印的字符的值

断点助手{{debugger}}

当需要调试时可以在模板上需要添加断点的地方添加这个助手,运行的时候会自动停在添加这个助手的地方。

{{log '这句话在断点前面'}}
{{debugger}}
<br>
{{log '这句话在断点后面'}}

不出意外程序会停在有{{debugger}}这一行。控制台应该会打印“这句话在断点前面”。

然后通过点击下一步跳过断点,然后继续打印“这句话在断点后面”。

当使用了{{debugger}},并且程序停止进入debug状态的时候, 可以直接在浏览器控制台的命令行输入get('key')来获取controller设置的值。

在箭头所指的位置输入get('testName'),然后按enter键执行。

正确的获取到了前面在controller类里设置的值。

如果不是在调试模式下输入get('testName')那么会提示错误。

还可以在遍历助手{{each}}中使用{{debugger}},点击一次“下一步”就会执行一次循环。

首先重写route类的model回调,在里面添加测试数据。

//  app/routes/dev-helper.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return [
            { id: 1, name: 'chen', age: 25 },
            { id: 2, name: 'ibeginner.sinaapp.com', age: 2 }
        ];
    }
});

在模板的each助手中使用{{debugger}}助手。

{{#each model as |item|}}
    {{debugger}}
    <li>item</li>
{{/each}}

运行,浏览器自动进入debug模式(如果不能自动进入debug模式可以手动按F12进入debug)

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟