Debugging Ionic app from VS Code

@zeuscronos wrote:

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.

Posts: 1

Participants: 1

Read full topic