Hi there.
Here is a way I found to get debugging working with App Scripts 0.0.46.
Prerequisites
-
Google Chrome
-
Latest VS Code
-
Latest Ionic CLI + Latest package.json and tsconfig.json - simplest way to get these I have found is to use
npm install ionic@latest -g
. Then create a new project and copy the package.json, tsconfig.json and the node_modules folder over to your existing project. If you’ve been keeping up to date, the quick way is this: http://blog.ionic.io/rc3-error-reporting-final-oh-my/ -
The Chrome Remote Debugger extension (Go to extensions in VS Code and search Chrome. After installing restart VS Code)
Config
- Typescript Sourcemaps
1.Go to your package.json and add
"config": { "ionic_source_map": "source-map" }
after the ‘description’ entry.
- Sourcemap Mappings
1.In VS Code click on the debugger panel. Ensure that your project is currently in VS Code.
2.Click the settings Cog and choose the Chrome option. Don’t use Cordova Tools. If clicking the settings cog only brings up the launch.json
, delete the .vscode
folder in your project directory.
3.In the project file viewer find a folder called .vscode
4.Find launch.json
under .vscode
5.Make your launch.json look like mine except under the source map overrides. Here, specify your own typescript files which you want to be able to debug. Anything not specified here wont be accessible by the debugger:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"url":"http://localhost:8100/",
"sourceMapPathOverrides": {
"webpack:///helper.ts": "${webRoot}/src/directory1/helper.ts",
"webpack:///link.ts": "${webRoot}/src/directory2/link.ts",
"webpack:///my-page.ts" : "${webRoot}/src/pages/report-fault/my-page.ts",
"webpack:///tabs.ts" : "${webRoot}/src/pages/tabs/tabs.ts",
"webpack:///app.component.ts": "${webRoot}/src/app/app.component.ts",
"webpack:///app.module.ts": "${webRoot}/src/app/app.module.ts"
}
}
]
}
NOTE: We are interested in the “Attach to Chrome” entry.
NOTE: Since the ionic serve build process removes the directories that all your ts files are in, you have to show VSCode where each file maps to within your project.
NOTE: When I drop-dragged my project onto VSCode, I used the folder which had all these files in it:
If you put a ‘higher’ folder in, the launch.json won’t point to the right stuff.
Debugging
Now the fun bit.
-
Close all instances of Google Chrome. On windows sometimes Chrome runs in the background so be thorough.
-
On a Mac, open the terminal and type:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
(on a windows, launch chrome with the same flag) -
cd to your project directory and run
ionic serve
-
Once the build process is complete and chrome is displaying your app, got to VS Code and start the debugger. You do this by going into the debugging tab and clicking the green play button. (NOTE: Make sure the mode is set to “Attach to Chrome, with sourcemaps”).
-
Set some breakpoints (You can do this earlier) in your .ts files and refresh the browser by clicking the address bar and hitting enter. (For some reason the Ionic CLI has got rid of the ‘r’ command, not sure why - could someone clarify!)
You are done!
I hope this has been helpful
Thanks
Chris