Debugging Client Side

[aabm00]

Item	Version
generator-angular-fullstack	3.6.1
Node	4.2.3
npm	3.7.5
Operating System	Windows 7
etc	etc

Item	Answer
Transpiler	TypeScript
Markup	HTML
CSS	CSS
Router	ui-router
Build Tool	Grunt
Client Tests	Jasmine
DB	MongoDB
Auth	Y
socket.io	Y

Hi

I am trying to debug the client side in Chrome but when I try to place a breakpoint for example in the
socket.service.js the view changes to the socket.service.ts but the code that appears under the socket.service.ts tab is belonging to index.html so I can't debug the client side because I can't place the breakpoints.

Am I doing something wrong?

Here the image of both socket.service.js and socket.service.ts

Thanks

[Awk34]

You should probably be able to get this working by mapping to the local TS files on your computer, through the dev tools settings

[aabm00]

The settings are Ok in the dev tools. The option Enable JavaScript source maps is checked.

So I don't understand why I can't debug through Typescript. If I uncheck Enable JavaScript source maps I can debug but only through the Javascript code (I can't see the typescript code),
When is checked as I explained in my last post I see all the typescript files as if they were the index.html,

I tried to find some post with the same problem but no luck. It looks like I am the only one with this problem.

Thanks

[Awk34]

Are the SourceMapURL's correct in your compiled code?

[aabm00]

Sorry but I'm not used to Typescript. I'd apreciatte Iif you can tell me where and what I have to look (directory and files)

I suposee you'are refering to the tsconfig.client.json. The content is:

{
"compilerOptions": {
"sourceMap": true,
"rootDir": "./client",
"outDir": ".tmp"
},
"filesGlob": [
"client/{app,components}//!(*.spec).ts",
"client/typings//*.d.ts"
],
"files": [
"client/app/account/account.ts",
"client/app/account/login/login.controller.ts",
"client/app/account/settings/settings.controller.ts",
"client/app/account/signup/signup.controller.ts",
"client/app/admin/admin.controller.ts",
"client/app/admin/admin.module.ts",
"client/app/admin/admin.router.ts",
"client/app/app.ts",
"client/app/main/main.controller.ts",
"client/app/main/main.ts",
"client/components/auth/auth.module.ts",
"client/components/auth/auth.service.ts",
"client/components/auth/interceptor.service.ts",
"client/components/auth/router.decorator.ts",
"client/components/auth/user.service.ts",
"client/components/footer/footer.directive.ts",
"client/components/modal/modal.service.ts",
"client/components/mongoose-error/mongoose-error.directive.ts",
"client/components/navbar/navbar.controller.ts",
"client/components/navbar/navbar.directive.ts",
"client/components/oauth-buttons/oauth-buttons.controller.ts",
"client/components/oauth-buttons/oauth-buttons.directive.ts",
"client/components/socket/socket.mock.ts",
"client/components/socket/socket.service.ts",
"client/components/ui-router/ui-router.mock.ts",
"client/components/util/util.module.ts",
"client/components/util/util.service.ts",
"client/typings/angularjs/angular.d.ts",
"client/typings/jquery/jquery.d.ts",
"client/typings/lodash/lodash.d.ts",
"client/typings/socket.io-client/socket.io-client.d.ts",
"client/typings/tsd.d.ts"
]
}

All the *.js.map files are in .tmp directory, but only some of them are repeated in the client folder, as the socket.service.js.map

Thanks

[Awk34]

You shouldn't have any .map files in the client/ directory 😕

At the bottom of every .js file in the .tmp/ directory should be a directive that looks like this: //# sourceMappingURL=/path/to/file.js.map. It tells debuggers/etc where the source mapping file is. Do your .js files have these directives? Is your server giving 404s for these files?

[aabm00]

Hi

The *.js,maps out of the .temp folder probably were created by webstorm, so I unchecked the Typescript options in the settings.

I decided create an entirely new application to try with. In this case with the new version 3.7.0 beta2.

I got the same results I can't debug typescript. The code under the typescript files are the index.html.

In this case all the *.js and *.js.map files are only under the .temp folder, so everything is Ok.

The steps I followeb are:

1- Run the database
2- In the command line under the project folder, run grunt serve. (I don't get any 404 message from the server )
3- Once the app is open in the Chrome browser I press F12 to see the Dev Tools.
4- I can see in the folder tree in the dev tools the Typescript and JavaScript.files
5- When I open any Typescript file I get the index.html file instead of the typescript code, so I can't debug the typescript code.
6- In the Dev Tools settings the "Enable JavaScript source maps" is checked

Can you get the typescript code in the dev tools and debug it?

Thanks