I just created a dummy Ionic4-Capacitor-React
app.
Then, in order to run it on the mobile (actual device) I do:
$ npm run build && ionic capacitor run android -l --address=$DEV_PC_IP_ADDRESS
$ ionic capacitor open android
Then, the project gets opened on Android Studio
. Then, when I click the run button on Android Studio
the app runs properly on the device. When the project gets opened on Android Studio
it is not human readable. In the other hand, if I open the project on VS Code
the project is human readable since it contains the Ionic
source code.
Then, I have 2 questions related to this:
Question 1: Is there a way to debug the Ionic
app from VS Code
by setting breakpoints on the Javascript
code?
Question 2: Is there a way to log things? for example, with Javascript
I normally do: console.log('...')
. I want to do something similar. In that case, where do I see the output?
By the way, here is content of: package.json
:
{
"name": "ionic-dummy-app",
"version": "0.0.1",
"private": true,
"dependencies": {
"@capacitor/android": "^1.3.0",
"@capacitor/core": "1.3.0",
"@capacitor/ios": "^1.3.0",
"@ionic/react": "^4.11.0",
"@ionic/react-router": "^4.11.0",
"@types/jest": "^24.0.18",
"@types/node": "^12.7.12",
"@types/react": "^16.9.5",
"@types/react-dom": "^16.9.1",
"@types/react-router": "^5.1.1",
"@types/react-router-dom": "^5.1.0",
"ionicons": "^4.6.3",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-router": "^5.1.0",
"react-router-dom": "^5.1.0",
"react-scripts": "3.2.0",
"typescript": "3.6.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@capacitor/cli": "1.3.0"
},
"description": "An Ionic project"
}
Thanks.