RC.0: how do you use the Chrome Debugger with the Rollup bundler?

I must be doing something wrong.

I am playing with the new RC.0 release and I’m trying to inspect my code from the Chrome Debugger. I use npm run build --dev to build the project. I can see source maps for .tmp/app but not for .tmp/pages/home.

The code is in ‘build/main.js’ but I can’t seem to set breakpoints within. Plus it takes a loooong time to load the main.js scripts into the debugger.

also, I can’t seem to inspect the local variables, example:

[breakpoint] var sorted = _.sortBy(photos, function (o) {
            return o[sort.key];
        });
// console says: `VM163:1 Uncaught ReferenceError: _ is not defined(…)`
// but `_` is defined and the code runs correctly

What am I doing wrong?

Update

It looks like this is a rollup tree-shaking/source-map/Chrome debug console issue

// in the source map, I see:
sortPhotos = function (photos, options, replace) {
        if (options === void 0) { options = [{ key: 'dateTaken', descending: false }]; }
        if (replace === void 0) { replace = true; }
        // TODO: only use first sort option right now
        var sort = options[0];
        console.log(">>> _.keys(_): " + _.keys(_).slice(10, 20));
        var sorted = _.sortBy(photos, function (o) {
            return o[sort.key];
        });
        if (sort.descending)
            sorted.reverse();
        return sorted;
    };

// but in `main.js`, I see `lodash` instead of `_`. 
sortPhotos = function (photos, options, replace) {
        if (options === void 0) { options = [{ key: 'dateTaken', descending: false }]; }
        if (replace === void 0) { replace = true; }
        // TODO: only use first sort option right now
        var sort = options[0];
        console.log(">>> _.keys(_): " + lodash.keys(lodash).slice(10, 20));
        var sorted = lodash.sortBy(photos, function (o) {
            return o[sort.key];
        });
        if (sort.descending)
            sorted.reverse();
        return sorted;
    };

It seems the console is only picking up lodash from main.js, even though I have a breakpoint set through the source map

ideas…

7 Likes

in previous release i also hat the ability to debug the Typescript, i don’t have the pages and typescript Code anymore in ChromeDevConsole only the Transpiled Javascript

i added “sourceMap”: true in the tsconfig.json at compileOptions but no change

1 Like

Same here. But I don’t understand what’s happening behind the scene well enough to debug.

Is there a way to NOT bundle the transpiled JS in the npm run build --dev step and access the JS faster/easier in the Chrome DevConsole? It’s taking my poor MacBook Pro 2010 a loooong time to reach a breakpoint and load the source map.

We are facing the same issue, we just upgraded Ionic to rc0, and we have following issues:
1- the “ionic run” command always runs on production mode
2- cant debug the app from device on prod mode

Please Help!

I’m also facing the same issue. I updated to RC0 and everything works fine but it’s really difficult to debug in production mode and i couldn’t find where to activate the debug mode in the previous version the run & build command were in dev mode by default.

Please help !!!

You can build in dev mode by editing the correct scripts entry in package.json. Just add a --dev at the end of the build script.

"build": "ionic-app-scripts build --dev"

6 Likes

Perfect it worked for me

Good for me thanks a lot

not sure I am understanding how this fixes the issue? I have modified the package.json and I am still unable to debug the default template application

  "scripts": {
    "build": "ionic-app-scripts build --dev",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
1 Like

I have the same issue where only the pages directory is missing when debugging in chrome. Providers and app directories are present and can be debugged, have breakpoints set, etc, but nothing shows up for pages and no breakpoints are triggered.

This was bugging me, so I poked around a bit more. I can successfully debug in chrome for all .ts files (I’m using app, providers and pages directories atm) if I use the --lab argument when I call ionic serve. If I just use ionic serve, typescript debugging for .ts files located in pages does not work. I haven’t tested extensively, but for the moment ionic serve --lab is doing the trick for me - at least when running in the browser.

Also note that setting breakpoints in vscode seems hit-or-miss for whatever reason, but using debugger; in the typescript file does the trick.

Neither --dev than --lab work for me.

when I set “build”: "ionic-app-scripts build --dev"
it still can’t debug

can you debug ts file use the chrome debugger right now?

ChromeDevConsole Debugging Problems

This is what I have discovered so far:

  • package.json: "build": "ionic-app-scripts build --dev"
  • ionic serve

ChromeDevConsole:

  • watch script launched by ionic serve does not watch
  • ~ 5 sec delay to load source maps on my MBP 2010
  • source maps for /app and /shared, but /pages is missing
localhost:8100
  .tmp     // ~5 sec delay to load source maps :-(
    app
    pages  // <= these source maps are missing!
    shared
  • run ionic serve --lab instead
  • watch process seems to work, but I get frequent rollup errors
[08:49:55]  RangeError: Maximum call stack size exceeded
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:163:2)
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:165:18)
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:165:18)
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:165:18)
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:165:18)
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:165:18)
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:165:18)
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:165:18)
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:165:18)
    at deepClone (/dev.snaphappi.com/_ng2/mappi0/node_modules/rollup/dist/rollup.js:165:18)
  • npm run build does not produce the same errors
  • still no source map for /pages

Also, I’m loading lodash like this:

// in typescript
import _ from "lodash";
// ...
console.log(`lodash is '_' : ${_.keys(_).slice(10,20)}`);

But after transpiling & rollup tree shaking, it shows up in the ChromeDevConsole as

// javascript in ChromeDevConsole source map AFTER transpile, rollup
console.log(`lodash is 'lodash' : ${_.keys(lodash).slice(10,20)}`);

Either way, I’m not able to debug from typescript, which I am able to do using the angular2-seed template

I discovered that the source maps seem to be created only for modules. I’m trying to create a './pages/pages.module.tsto fix this problem, but I'm not clear how to import/export all the dependencies withionic2` going to start a new thread on this.

Same problem here.
It seems I cannot get the source map at all.
Using the --dev and set sourceMap to true in the tsconfig file.

Thanks.

Same problem here too, it is not possibile to debug in chrome, here it is the relevant part of “package.json”:

"scripts": {
  "build": "ionic-app-scripts build --dev",
  "watch": "ionic-app-scripts watch",
  "serve:before": "watch",
  "emulate:before": "build",
  "deploy:before": "build",
  "build:before": "build",
  "run:before": "build"
},

Same problem here.
Cannot debug in Chrome anymore.
When I laugh the app in Safari it does not even see the application. (Develop menu “No Inspectable Applications”)
Some help from ionic team will be appreciated.

There is a issue opened for it

2 Likes