Ember 調(diào)試助手

Ember不僅提供了專門用于調(diào)試Ember程序的谷歌、火狐瀏覽器插件Ember Inspector( 安裝插件可能需要翻墻，如果你也是一個程序員我想翻墻對于你來說應(yīng)該不是什么難事！??！)，還提供了用于調(diào)試的helper。 按照慣例，先做好準(zhǔn)備工作，分別執(zhí)行Ember CLI命令創(chuàng)建controller、route和模板：

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

1，日志助手{{log}}

{{log}}可以把從controller、route類傳遞到頁面上的值以日志的形式直接輸出在瀏覽器的控制臺上。下面代碼在controller類添加測試數(shù)據(jù)。

// app/controllers/dev-helper.js


import Ember from 'ember';


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

我們可以在模板上直接顯示字符串testName的值，也可以使用{{log}}助手以日志形式輸出在控制臺。當(dāng)然你也可以直接使用{{log 'xxx'}}在控制臺打印"xxxx"。第二點(diǎn)斷點(diǎn)助手的示例中將為你演示{{log 'xxx'}}用法。

直接顯示在頁面上：{{testName}}
{{log testName}}

運(yùn)行http://localhost:4200/dev-helper之后我們可以在頁面上看到字符串testName的值。打開谷歌或者火狐的控制臺（console標(biāo)簽下）可以看到也打印的字符的值。比較簡單我就不再截圖了……

2，斷點(diǎn)助手{{debugger}}

當(dāng)你需要調(diào)試的時候，你可以在模板上需要添加斷點(diǎn)的地方添加這個助手，運(yùn)行的時候會自動停在添加這個助手的地方。

{{log '這句話在斷點(diǎn)前面'}}
{{debugger}}
<br>
{{log '這句話在斷點(diǎn)后面'}}

不出意外程序會停在有{{debugger}}這一行?？刂婆_應(yīng)該會打印“這句話在斷點(diǎn)前面”。然后通過點(diǎn)擊下一步跳過斷點(diǎn)，然后繼續(xù)打印“這句話在斷點(diǎn)后面”。
運(yùn)行結(jié)果不好截圖，請讀者自己試試吧！?。?br> 當(dāng)你使用了{{debugger}}，并且程序停止進(jìn)入debug狀態(tài)的時候，你可以直接在瀏覽器控制臺的命令行輸入get('key')來獲取controller設(shè)置的值。

在箭頭所指的位置輸入get('testName')，然后按enter鍵執(zhí)行。會得到如下結(jié)果：

可以看到正確的獲取到了前面在controller類里設(shè)置的值。 如果你不是在調(diào)試模式下輸入get('testName')那么會提示如下錯誤。

你還可以在遍歷助手{{each}}中使用{{debugger}}，點(diǎn)擊一次“下一步”就會執(zhí)行一次循環(huán)。

首先重寫route類的model回調(diào)，在里面添加測試數(shù)據(jù)。

//  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}}

運(yùn)行，瀏覽器自動進(jìn)入debug模式（如果不能自動進(jìn)入debug模式可以手動按F12進(jìn)入debug）。此時你可以在瀏覽器控制臺命令輸入get('item.name')來獲取本次循環(huán)對象的屬性值。然后你幾點(diǎn)“下一步”或者按F8，程序自動進(jìn)入到下一次循環(huán)，然后你再輸入get('item.name')，此時得到的是本次循環(huán)對象屬性值。然后點(diǎn)擊下一步或者按F8進(jìn)入第三次循環(huán)，由于route類設(shè)置返回的數(shù)組只有2個元素，第三次已經(jīng)沒有元素。所以這次會自動退出debug模式。 如果運(yùn)行正常你可會得到下圖所示的輸出信息。

在調(diào)試狀態(tài)下你還可以直接在瀏覽器控制臺命令行輸入context獲取上下文信息。會輸出本頁面所包含的所有類和屬性。

上述介紹的就是Ember提供的調(diào)試助手的所有使用方法。在你開發(fā)Ember應(yīng)用的時候應(yīng)該是很有用的，特別是在each循環(huán)遍歷的時候。
博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能又出入，不過影響不大！），如果你覺得博文對你有點(diǎn)用，請在github項目上給我點(diǎn)個star吧。您的肯定對我來說是最大的動力！！