Ionic 2: Debugging in Visual studio code for Browser and Emulator/Device

||||| 4 I Like It! |||||

Ionic

While working on Ionic , I found it difficult to debug the app.
Once simple way of debugging code is do it directly in browser (like chrome) as ionic used to have all client side code which get downloaded to client and debugging can happen in browser itself.

Since I am very fond of visual studio code for editing code, I was trying to get ways by which I can use visual studio code editor itself for debugging (like I was using it for my other Node apps).
While searching on net I found very good article to replicate same functionality.

http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html

How to Debug?


You just need to add “Debugger for chrome extension” in visual studio code and follow below mentioned steps (same has been mentioned in above article as well).

You need to change content of .vscode\launch.json as per below.”configurations”: [

{ “name”: “Launch in Chrome”,

“type”: “chrome”,

“request”: “launch”,

“url”: “http://localhost:8100”,

“sourceMaps”: true,
“webRoot”: “${workspaceRoot}/www”

}

]

Then you need to start app with normal ionic command “ionic serve” within integrated terminal of visual studio code. Open the integrated Terminal window with Ctrl+` and type ionic serve -b (the -b switch will prevent the page from opening in your default browser).

Once app is opened in browser, press “F5” in visual studio code and it will attach debugger from chrome instance.

Imp Note– You shouldn’t have any other instances of Chrome running when you do that or the debugger will fail to attach to it.

Put a break point in ts files and code will stop at that point.

Great, this way we can debug code in visual studio code editor instead of doing same in browser.

What to do if I need to debug code on emulator or device in visual studio code (which was actual intent of this article).

I got again a link from same author which saved my day. J

http://www.damirscorner.com/blog/posts/20170113-DebugIonic2AppsInVsEmulatorForAndroid.html

add “Cordova Tool” extension to visual studio code.

Simply change content launch.json with below.

“configurations”: [
{
“name”: “Attach to running android on device”,

“type”: “cordova”,

“request”: “attach”,
“platform”: “android”,
“target”: “device”,
“port”: 9222,
“sourceMaps”: true,
“cwd”: “${workspaceRoot}”
}

]

Deploy your app using command “ ioniccordova run”, select android.
It will deploy to open emulator. Once app is deployed on emulator, press F5 in visual studio code which will attach debugger to emulator app.

I hope this will help at least few people working on Ionic who are looking to debug app in browser and emulator.

2 Comments

Leave a Reply

Your email address will not be published.

*
*

Powered by themekiller.com watchanimeonline.co