What is a better way to debug inside physical hardware than console.log()? I cannot debug in my browser since I am developing with Firebase Cloud Messaging, Bluetooth, and real hardware. Android Studio logcat shows unhelpful messages, so I use lots of console.log().
For example, I have a directory structure pages/home/ with home.page.ts and services/websocket.service.ts. Inside websocket.service.ts on line 67 I have this to inform me that the connectLoop() function has been called:
console.log('websocket.service connectLoop()');
Logcat shows the following when I console.log(). The file referenced isn’t the websocket.service.ts file where this console.log() lives, nor is the line number correct:
2023-09-20 07:52:17.519 12387-12387 Capacitor/Console com.securecoop.app D File: http://localhost/src_app_pages_home_home_module_ts.js - Line 539 - Msg: websocket.service connectLoop()
And then I received this error message, but I don’t have a file with that name, and I certainly don’t have any files with that many lines in them, so I don’t know where this error is occurring:
2023-09-20 08:16:59.790 13120-13120 Capacitor/Console com.securecoop.app E File: http://localhost/vendor.js - Line 67536 - Msg: ERROR TypeError: Cannot read properties of undefined (reading 'next')
How could I be notified that this function has been called, inspect variables, get better trace stacks, all of that?
In Chrome you can go here chrome://inspect/#devices to open DevTools for your app on the real device.
1 Like
Well, that shows similar contents with logcat in my browser, but still very unhelpful errors. For example:
vendor.js:67536 ERROR TypeError: Cannot read properties of undefined (reading 'next')
I don’t have a vendor.js and I don’t have any file with that many lines. So I don’t know what’s causing this error.
Are you testing on an Android emulator or physical device? What phone and SDK version?
Thinking the device you are testing on doesn’t support a JS feature your app is using.
Today, emulator, but often a physical device as well. Emulator and physical device both are a Google Pixel 3 with SDK API 31.
What SDK should I try?
SDK 31 should be fine. I’ve only had issues with an Emulator 28 and below as it is running a really old WebView version. I would check the version of Android System WebView is on the device. My guess it’s the latest 116 which rules out that being an issue.
If it’s not working on any device, then I would say it probably has to do with your websocket connection configuration and the library being used is unhappy. I am not sure how to debug it though. Maybe someone else can help.
Does src_app_pages_home_home_module_ts.js - Line 539 exist? Looks like one of your files. Maybe you can put a breakpoint on it in DevTools?
You are using typescript or a bundler that generates those .js files.
In case you want to inspect the original files that generate the errors you have to create source maps.
Then if you are using capacitor you have to use the --inline option on copy command (npx cap copy --inline so the source maps are inlined.
If you use cordova you’ll have to inline the source maps yourself.
When using source maps, chrome inspector detects them and shows a message about showing the original files, so you can see the original file that generates that folder instead of the vendor.js.
2 Likes
I do use Typescript, and that worked. Thanks.
FYI if anyone is reading this with the same issue set "sourceMap": true in your tsconfig.json then npx cap copy --inline. Use the browser debug as @twestrick suggested.
1 Like
How do I inspect variables and set breakpoints?