如何在 WebStorm 對 Angular 下中斷點 Debug?

栏目: 编程语言 · AngularJS · 发布时间: 7年前

内容简介:如何在 WebStorm 對 Angular 下中斷點 Debug?

WebStorm 允許我們如同 Visual Studio 一樣,直接在 IDE 內設定 中斷點 ,並停止執行在那一行,我們可觀察當時的變數,也可使用 step over、step into、step out 等除錯技巧,重點是它是停止在 TypeScript 上,而非 JavaScript 上。

Version

WebStorm 2017.1.2

Angular CLI 1.0.1

Angular 4.1.0

Installation

安裝 Chrome Extension

如何在 WebStorm 對 Angular 下中斷點 Debug?

安裝 JetBrains IDE Support Chrome extension。

WebStorm 設定

如何在 WebStorm 對 Angular 下中斷點 Debug?

Run -> Edit Configurations…

如何在 WebStorm 對 Angular 下中斷點 Debug?

按左上角的 + ,選擇 JavaScript Debug

如何在 WebStorm 對 Angular 下中斷點 Debug?

  • URL : 輸入 http://localhost:4200

ApplyOK 繼續。

Debug

設定 TypeScript 中斷點

如何在 WebStorm 對 Angular 下中斷點 Debug?

在任意 TypeScript 你想停止的地方,加上 中斷點

開始 Debug

如何在 WebStorm 對 Angular 下中斷點 Debug?

使用 ng serve 啟動 Angular CLI 內建 web server,並按下上方的 瓢蟲 開始 debug。

如何在 WebStorm 對 Angular 下中斷點 Debug?

畫面會跳到 Chrome,並在上面顯示 JetBrains IDE Support is debugging this browser .

在 tod 輸入任何值,按 enter

如何在 WebStorm 對 Angular 下中斷點 Debug?

從 Chrome 自動跳回 WebStorm,並且停到中斷點,顯示目前所有變數與 call stack。

如何在 WebStorm 對 Angular 下中斷點 Debug?

但這樣使用有個前提,就是要產生 source map,我們才有辦法透過 source map 將中斷點停在 TypeScript。

Conclusion

  • 後端使用 中斷點 的 debug 經驗,一樣可以套用在 TypeScript 與 Angular。

Reference

Manuel Rauber , How to debug Angular 2 with WebStorm?


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PERL學習手札.

PERL學習手札.

簡信昌 / 上奇科技 / 20040816 / NT$ 390

1. 關於Perl 當你翻開這本書的時候,你也就進入了一個奇幻的世界。Perl確實是一種非常吸引人的程式語言,而之所以這麼引人入勝的原因不單單在於他的功能,也在於他寫作的方式,或說成為一種程式寫作的藝術。即使你只是每天埋首於程式寫作的程式設計師,也不再讓生活過份單調,至少你可以嘗試在程式碼中多一些變化。而且許多Perl的程式設計師已經這麼作了,這也是Perl的理念-「There is mor......一起来看看 《PERL學習手札.》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具