本篇文章主要介紹了Angular2使用vscode斷點調試ts文件的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧
VSCode自備debugger工具,管理後台專案使用angular2,試了下調試ts檔案十分方便。下面是具體的實現步驟以及踩踏的坑。當你調試出來後,回頭看這個設定還是十分簡單的。我使用的是ng-cli創建的專案。後面再補充一般項目的調試,感覺也差不多。
解決了「由於未找到生成的程式碼,已忽略斷點(是否是來源映射問題?) 」 ,參考下面的我的環境配置
我的環境配置
1. node v7.3.0
2. npm 3.10.10
3. ng >= 1.3 // 這點非常重要,我一開始的版本低於這個版本,就一直報「由於未找到生成的程式碼,已忽略斷點(是否是來源映射問題?) 」
4. 在vscode中安裝vscode for chome 插件, 版本要3.1.4以上
5. 產生launch.json, 檔案內容改為以下內容
{ "version": "0.2.0", "configurations": [ // 这个数组里包含了可以包含多个配置对象 { "name": "ng serve", // 配置对象的名称,你可以选择其中一个配置运行调试 "type": "chrome", "request": "launch", "url": "http://localhost:4200/#", "webRoot": "${workspaceRoot}" }, { "name": "ng test", "type": "chrome", "request": "launch", "url": "http://localhost:9876/debug.html", "webRoot": "${workspaceRoot}" }, { "name": "ng e2e", "type": "node", "request": "launch", "program": "${workspaceRoot}/node_modules/protractor/bin/protractor", "protocol": "inspector", "args": ["${workspaceRoot}/protractor.conf.js"] } ] }
1. ng-cli版本更新
//1. 先卸载 npm uninstall -g angular-cli npm uninstall --save-dev angular-cli //2. 全局安装 npm uninstall -g @angular/cli npm cache clean # if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force) npm install -g @angular/cli@latest //3. 本地安装 npm install --save-dev @angular/cli@latest
2. launch.json設定修改
#第一步先安裝vscode for chrome這個外掛:
#外掛程式安裝
##第二步修改launch .json配置:
第三步驟更改lauch.json檔案配置:
#第四步啟動偵錯:
啟動偵錯
第五步啟動後展示:
##上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
使用JQUERY如何實作多個AJAX請求使用js如何實作焦點圖效果在微信小程式中如何實作圖片懶載入在NodeJs中如何使用form-data格式傳輸檔案以上是在Angular2中如何實作斷點偵錯ts文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!