Source Maps not Appearing in Chrome Dev Tools on `ionic serve`

Ionic Framework ionic-v3
1

Hello,

I’ve just discovered that source maps aren’t appearing in Chrome Dev Tools when I first run ionic serve. However, if I modify a *.ts file, the source maps appear in the Tools. I just updated my package.json file to this…

{ "name": "HisApp", "author": "Chuck", "homepage": "http://hisapp.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve", "test": "karma start ./test-config/karma.conf.js" }, "config": { "ionic_rollup": "./config/rollup.config.js" }, "dependencies": { "@angular/common": "4.0.0", "@angular/compiler": "4.0.0", "@angular/compiler-cli": "4.0.0", "@angular/core": "4.0.0", "@angular/forms": "4.0.0", "@angular/http": "4.0.0", "@angular/platform-browser": "4.0.0", "@angular/platform-browser-dynamic": "4.0.0", "@ionic-native/core": "3.4.2", "@ionic-native/splash-screen": "3.4.2", "@ionic-native/status-bar": "3.4.2", "@ionic/storage": "2.0.1", "ionic-angular": "3.0.1", "ionicons": "3.0.0", "rxjs": "5.1.1", "sw-toolbox": "3.4.0", "zone.js": "^0.8.4" }, "devDependencies": { "@ionic/app-scripts": "1.3.0", "@types/jasmine": "^2.5.41", "@types/node": "^7.0.12", "angular2-template-loader": "^0.6.2", "html-loader": "^0.4.5", "jasmine": "^2.5.3", "karma": "^1.6.0", "karma-chrome-launcher": "^2.0.0", "karma-jasmine": "^1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^2.0.3", "null-loader": "^0.1.1", "rollup-plugin-replace": "^1.1.1", "ts-loader": "^2.0.3", "typescript": "~2.2.1" }, "cordovaPlugins": [ "ionic-plugin-keyboard", "cordova-plugin-splashscreen", "cordova-plugin-console", "cordova-plugin-device", "cordova-plugin-statusbar", "cordova-plugin-whitelist" ], "cordovaPlatforms": [], "description": "His app - Ionic 2 Application" }
Any ideas what could be going on here?

2

+1. I also have this issue after upgrading to ionic 3.0.1. Somebody please help…

1 Like
3

I have also noticed that source maps are not appearing for me. Both on Chrome and Firefox on MacOS

$ ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Ionic Framework                 : ionic-angular 3.4.2

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.2.0
4

Try to add the following in the config section of your package.json:

"ionic_source_map_type": "source-map"
2 Likes
5

That did it, thank you

1 Like
6

thank. it work for me

7

33%20AM

The source code are the orange folders. To see it, in my case, i changed the locahost for the local IP of my computer (OS X) ej. 10.0.0.45