我一向认为,学习一个框架最好的实践就是阅读官方提供的示例代码,于是这周就着重阅读官方提供的start模板代码.官方提供的有7个.
Ionic Angular 模板
| Starter | Description |
|---|---|
| tabs | A starting project with a simple tabbed interface |
| blank | A blank starter project |
| sidemenu | A starting project with a side menu with navigation in the content area |
| super | A starting project complete with pre-built pages, providers and best practices for Ionic development. |
| conference | A project that demonstrates a realworld application |
| tutorial | A tutorial based project that goes along with the Ionic documentation |
| aws | AWS Mobile Hub Starter |
具体的用法:
$ ionic start myNewProject super
$ cd myNewProject
$ ionic serve
这样示例模板就能跑起来了,可是在自行修改源码后,断点调试却遇到了问题
vs code提示"由于未找到生成的代码,已忽略断点".
debuggerError.png
这样自然是没法断点调试了.经过一些参考查找和学习(直接抄copay),大致按照以下步骤即可:
配置生成sourcemap
在package.json中增加
"config": {
"ionic_source_map": "source-map",
"ionic_generate_source_map": true
}
保证在编译后,有map文件,可在\www\build中查看.
mapFile.png
修改vscode中配置
1.debugger方式
最简单的方法就是:在需要的地方加上debugger语句,当程序运行到,自然就会停下来,然后可以通过F10,F11的方式进行断点调试.
debugger.png
2.launch方式
在vscode的.launch.json文件中,增加
{
"type": "chrome",
"request": "launch",
"name": "启动 Chrome 并打开 localhost",
"url": "http://localhost:8100",
"port": 9322,
"webRoot": "${workspaceFolder}/www",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
"meteor://💻app/*": "${webRoot}/*",
} ,
// "cwd": "${workspaceRoot}",
"runtimeArgs": [
// "--disable-web-security",
"--user-data-dir",
"--remote-debugging-port=9322"
]
}
和默认生成的最大不同在于
"webRoot": "${workspaceFolder}/www"
指定了webRoot目录在www里面,而非默认的${workspaceFolder}.
3.attach方式
launch方式每次都会新开一个chrome,如果想复用现有已经打开的chrome页面就需要用attach方式,在vscode的.launch.json文件中,增加
{
"type": "chrome",
"request": "attach",
"name": "贴上 Chrome,并打开,包含 sourcemaps",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}/www",
"url":"http://localhost:8100/",
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
"meteor://💻app/*": "${webRoot}/*",
}
}
同时chorme的快捷方式也要加上
--remote-debugging-port=9222
chromeLaunch.png
两种方式区别不大,我个人比较喜欢lauch方式,虽然每次打开新页面会慢一点,不过比较清晰,不会混淆.
debuggerSuccess.png
总结
发现这些方法好像都无法断点到home.ts,原因未知.另外,如何在android和ios中调试,还有待研究.
参考网址:
http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html
