Live reload, all code is unminifed so breakpoints can't be set

I’m using the AppFlow Vue tabs demo project.

After I run ionic capacitor run android -l --external and launch the app from Android Studio, I can connect with Chrome dev tools to inspect the HTML/CSS

But all the JavaScript is minified so I can’t use break points.

e.g. top of App.js

/*
 * ATTENTION: An "eval-source-map" devtool has been used.
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (function() { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

How can I stop this ?

Thanks. Been debugging in Chrome for years though and that appears to be a generic howto.

What I actually thing I need to do is change a setting in ionic somewhere ?

I’ve never needed to do any change in ionic. it’s not an ionic setting to change, you need to search for the file where you want to add the break point. That’s why I added the link, which it shows you how to do that.

I think you might be misunderstanding.

There are no .map files, for instance.

Chrome’s remote inspect is totally unable to see anything of any use

Sure, refresh away :slight_smile: I’ve certainly forgotten how you get meaningful source maps out of ionic.

Hey there! Soo this might be a default setting for Vue’s CLI service. Looking through the vue-cli docs, you might need to add this to a vue.config.js file.

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

Could you give that a try?

I don’t have a vue.config.json. Do I just make one with those lines in ?

You can get what I see as a project by choosing the Vue Tabs example when you start a new project in AppFlow

I don’t know if there’s a Git repo for it somewhere. Can’t seem to see one.

Yes, just make a file for this. We don’t provide one with our vue template since the Vue CLI doesn’t provide (we try to match it as close as possible).

I put that in vue.config.js

closed Studio

re-ran ionic capacitor run android -l --external

waited while Studio opened and did it’s thing and then relauched the app

It’s changed, and it works as long as I navigate to the ‘(cloud) my-folder-name/src/views’ folder in the side bar.

Break points and inspect variables work as expected now, thanks !

I can see not wanting to drift to far from stock Vue, but maybe you should if it leads to a broken developer experience otherwise ?

For sure! A valid point regarding DX. We’ll probably revisit our entire vue setup in the future as Vue-cli will soon be deprecated for Vite.

I’m almost afraid to ask given the pace of change in JS frameworks, but what’s Vite ?

OK, so it’s just another build tool, that’s less to keep up to date with :slight_smile: