2

I am trying to run the script

ionic build

But the generated build version is always with --production flag. Thus my js/ts code is minified and not suitable for debugging. Do you know a way to build in dev mode?

output of "ionic build"

The command "ionic build -- --mode development" which seems to work for Vue does not seem to work for React.

tjhannes
  • 23
  • 4

1 Answers1

1

Ionic React uses Create React App under the hood. This means that you can use CRA build commands instead of Ionic.

As described in this gist, you need to enable profiling mode for CRA to get unminified output.

You can do this with the command react-scripts build -- --profile.

To make it easier, you can add a command to scripts in your package.json like:

   "build-profile": "react-scripts build -- --profile",
Patrick Kenny
  • 4,515
  • 7
  • 47
  • 76
  • I deleted the build folder, and did "npm run build -- --profile" but the output looks still the same.. it is one huge file with unreadable code. thanks anyway! – tjhannes Aug 29 '22 at 12:29
  • @tjhannes What you should get are, for example, in the `js` folder, several dozen js files with random names and corresponding `.map` files. You can then debug these files using the browser dev tools, which can read the source maps. – Patrick Kenny Aug 29 '22 at 14:37
  • Thanks for the explanation. Debugging with XCode or Android Studio is thus not possible? – tjhannes Sep 02 '22 at 12:23
  • @tjhannes You can debug capacitor plugins and such with XCode/Android Studio but for the webapp part you will generally debug in the browser: https://ionicframework.com/docs/troubleshooting/debugging – Patrick Kenny Sep 02 '22 at 12:39