How do I debug Typescript file in VS code for a NativeScript project ?

[monishakhapali]

How do I debug Typescript file in VS code for a NativeScript project ? I Tried running Launch an ios and Attach to an ios.
After it runs, at the debug point it says - breakpoint ignored because generated code not found.
Also getting the following error in debug console
Error when trying to require webpack.config.js file from path '/Users/monishakhapali/Desktop/sample/webpack.config.js'. Error is: Error: Cannot find module '/package.json'
Require stack:

• /Users/monishakhapali/Desktop/sample/node_modules/@nativescript/webpack/dist/helpers/project.js
• /Users/monishakhapali/Desktop/sample/node_modules/@nativescript/webpack/dist/helpers/dependencies.js
• /Users/monishakhapali/Desktop/sample/node_modules/@nativescript/webpack/dist/helpers/externalConfigs.js
• /Users/monishakhapali/Desktop/sample/node_modules/@nativescript/webpack/dist/index.js
• /Users/monishakhapali/Desktop/sample/webpack.config.js
• /Users/monishakhapali/.vscode/extensions/nativescript.nativescript-0.12.3/out/debug-adapter/nativeScriptDebugAdapter.js
• /Users/monishakhapali/.vscode/extensions/nativescript.nativescript-0.12.3/out/debug-adapter/nativeScriptDebug.js
• /[eval]

[NathanWalker]

Hi @monishakhapali in your launch.config in VS Code you can add sourceMapPathOverrides as follows:

{
    "name": "Attach on iOS",
    "type": "nativescript",
    "request": "attach",
    "platform": "ios",
    "appRoot": "${workspaceRoot}",
    "sourceMaps": true,
    "watch": false,
    "sourceMapPathOverrides": {
        "webpack://app/./*": "${workspaceRoot}/*",
    }
},

Then in webpack.config.js add this:

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
	webpack.init(env);

	// for vs code debugger:
	webpack.chainWebpack(config => {
		config.output.devtoolNamespace('app')
	})

	return webpack.resolveConfig();
};

Then in the VS Code Terminal you can run ns debug ios --no-hmr
After app launches you can then use 'Attach on iOS' to begin breakpointing as normal.

I put together this video if it helps provide any clarity:
https://drive.google.com/file/d/1VZMgSqi3CwoIE630Aqjvb7fVEqEKVT5_/view?usp=sharing

You can also use the chrome debugger when using ns debug ios. A green url outputs in terminal that looks like this:

To start debugging, open the following URL in Chrome:
devtools://devtools/bundled/inspector.html?ws=localhost:41000

Copy/paste that url into chrome to breakpoint/debug the same as well.

[NathanWalker]

If using {N} within Nx you can see additional insights here in this comment.