内容简介：如何在 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
安裝 JetBrains IDE Support Chrome extension。
WebStorm 設定
Run -> Edit Configurations…
按左上角的 + ，選擇 JavaScript Debug 。
- URL : 輸入
http://localhost:4200。
按 Apply 與 OK 繼續。
Debug
設定 TypeScript 中斷點
在任意 TypeScript 你想停止的地方，加上 中斷點 。
開始 Debug
使用 ng serve 啟動 Angular CLI 內建 web server，並按下上方的 瓢蟲 開始 debug。
畫面會跳到 Chrome，並在上面顯示 JetBrains IDE Support is debugging this browser .
在 tod 輸入任何值，按 enter 。
從 Chrome 自動跳回 WebStorm，並且停到中斷點，顯示目前所有變數與 call stack。
但這樣使用有個前提，就是要產生 source map，我們才有辦法透過 source map 將中斷點停在 TypeScript。
Conclusion
- 後端使用 中斷點 的 debug 經驗，一樣可以套用在 TypeScript 與 Angular。
Reference
Manuel Rauber , How to debug Angular 2 with WebStorm?
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
企业应用架构模式
Martin Fowler、王怀民、周斌 / 王怀民、周斌 / 机械工业出版社 / 2004-7 / 49.00元
本书作者是当今面向对象软件开发的权威，他在一组专家级合作者的帮助下，将40多种经常出现的解决方案转化成模式，最终写成这本能够应用于任何一种企业应用平台的、关于解决方案的、不可或缺的手册。本书获得了2003年度美国软件开发杂志图书类的生产效率奖和读者选择奖。本书分为两大部分。第一部分是关于如何开发企业应用的简单介绍。第二部分是本书的主体，是关于模式的详细参考手册，每个模式都给出使用方法和实现信息，并一起来看看 《企业应用架构模式》 这本书的介绍吧!
