search

nativescript-community / nativescript-vscode-extension

A Visual Studio Code Extension for NativeScript
https://www.nativescript.org/visual-studio-code
Apache License 2.0
82 stars 32 forks source link

Breakpoint ignored because generated code not found (source map problem?). #284

Closed fraune closed 2 years ago

fraune commented 3 years ago

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

Describe the bug My team and I test our app by running, tns run {platform} --no-hmr. Once the app is running, if we attach the iOS or Android debugger in the VS Code extension, we have trouble with breakpoints. Our breakpoints remain unverified, give the error message listed in the title of this bug, and won't pause execution.

To Reproduce This behavior seemed to begin after a teammate and I updated our Macbooks from macOS Big Sur 11.2.2 to 11.2.3. (Wondering if the Webpack security fix somehow has anything to do with this issue...?)

Expected behavior We should be able to use breakpoints to halt the execution of our code.

Sample project I don't have a sample project/code to share at this time.

Additional context Our project is a NativeScript-Angular-Typescript app for iOS and Android. Running tns doctor gives all check marks. Inquire for more specific version info if necessary. We've been able to get the Chrome debugger working, but have found that it's inferior to the VS Code debugger.

My team and I would greatly appreciate some assistance on this. Thanks!

fraune commented 3 years ago

Sample Project/Steps to Reproduce I can replicate this behavior with a brand new project.

  1. ns create ns-test-app --ng
  2. Open VS Code at directory ns-test-app
  3. Go to the Debug menu, and click the link to create a launch.json file, and select the NativeScript environment.
  4. Run the project (e.g. ns run android)
  5. In the debugger sidebar of VS Code, click the Play button next to Attach on Android
  6. Set a breakpoint and see that the breakpoint isn't verified after the debugger is attached
jcassidyav commented 3 years ago

For me I noticed that the source map had {"version":3,"sources":["webpack:///./src/app/di...

While the launch.json had 

            "sourceMapPathOverrides": {
                "webpack:///*": "${workspaceRoot}/src/*"
            },

So changing the launch.json to 

            "sourceMapPathOverrides": {
                "webpack:///*": "${workspaceRoot}/*"
            },

And debugging started to work.

There is some issue with loading the config still I am getting and error that it is trying to load a pakage.json from 

C:\Program Files\Microsoft VS Code\package.json

I think 

function getProjectRootPath() {
    return process.cwd();
}

in @nativescript\webpack\dist\helpers\project.js is returning the vscode cmd path.

but debugging seems to work.

jcassidyav commented 3 years ago

This only works when there is no name defined in the package.json as the name ends up in the source map definition and then does not match.

jcassidyav commented 3 years ago

I had a look at debugging again today as the chrome debugging wasn't working for me properly ( showing js not ts ). starting with tns create testD --angular

Two changes were required to get debugging working in VsCode and chrome. Add "sourceMap": true, to the tsconfig.json, in the compilerOptions Add 

"sourceMapPathOverrides": {
                "webpack://@nativescript/template-hello-world-ng/*": "${workspaceRoot}/*"
            }

to the launch.json for Launch on Android.

@nativescript/template-hello-world-ng is the name specified in package.json and this ends up in the source-map After that I could set breakpoints in item.services.ts / item-detail.component.ts which were hit.

fraune commented 3 years ago

@jcassidyav The workaround you provided helped me get breakpoints working for in VS Code on the test app, but not my team's production app. How were you able to inspect the sourcemap? I can't seem to find the file...

jcassidyav commented 3 years ago

For me the source maps are at the end of each js file

so I see something like this:

//# sourceMappingURL=data:application/json;charset=utf-8;base64,askdjlasjdkjas......

Everything after the base64, is encoded base 64.

Decoding gives a json object where the sources property has entries like:

"webpack:///<project name>./src/app/module/blank/blank-routing.module.ts"

The sourcemap generation is controlled by webpack so could be different depending on how it is configured, it can be configured for external source maps for example.

fraune commented 3 years ago

Hm, I might be missing something. When I build my app (or the testD example), I can't seem to locate any transpiled js files... is this because they are webpacked? Could you please describe in a little more detail where I can find these files?

jcassidyav commented 3 years ago

Sorry I wasn’t very clear. They are in the apk. I don’t have it in front of me. So I can’t remember the exact path.

fraune commented 3 years ago

Thanks! I have successfully achieved your workaround! I'll recap my steps in case it can help anyone else...

After unarchiving the built apk and its contents until I saw a folder, I found the file you mentioned at: platforms/android/app/build/outputs/apk/debug/app-debug.apk 2 2/assets/app/bundle.js.

I inspected the bundle.js file, and most of the way down I found the line starting with this: //# sourceMappingURL=data:application/json;charset=utf-8;base64,. I converted the first few lines of the subsequent base64 and found:

{"version":3,"sources":["webpack:///../$_lazy_route_resource lazy namespace object","webpack:///../node_modules/moment/locale sync ^\\.\\/.*$","webpack:///./app.component.html","webpack:///./app.component.ts","webpack:///./app.css","webpack:///./app.module.ts", ...

My team's project structure is slightly different from yours and the sample project, plus I don't have my app's name set in my package.json. So, I slightly modified the code you added to your launch.json, and placed it into each of my launch/attach configurations. Here's what worked for my project:

"sourceMapPathOverrides": {
    "webpack:///*": "${workspaceRoot}/app/*"
}

Launching and attaching on iOS/Android now works for me. Breakpoints getting hit again! I'm not sure if this will be a permanent fix, but it got my team and I off the ground again! Thanks, @jcassidyav.

asharghi commented 3 years ago

My base64 is decoded to paths like webpack://appname/./app/main.ts. For me this worked as sourceMapPathOverrides

"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": {
    "webpack://appname/*": "${workspaceRoot}/*",
},

Thanks for the research and breakdown guys!

fraune commented 3 years ago

One possible issue that still exists with my configuration is that when setting breakpoints, I now get an error from VS Code in my debug console:

Error processing "breakpointLocations": 'Debugger.getPossibleBreakpoints' was not found: [object Object]

Hasn't seemed to affect my ability to actually hit the breakpoints though... any thoughts on this?

jcassidyav commented 3 years ago

I don't see that on my setup (windows) I just get the other error above loading package.json

Marcel0001 commented 3 years ago

Tried everything above still doesn't work.

Tried launching and attaching debugger using the nativescript plugin in vscode.

launch.json

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Attach on Android", "type": "nativescript", "request": "attach", "platform": "android", "appRoot": "${workspaceRoot}", "sourceMaps": true, "watch": false }, { "name": "Launch on Android", "type": "nativescript", "request": "launch", "platform": "android", "appRoot": "${workspaceRoot}", "sourceMaps": true, "watch": true, "sourceMapPathOverrides": { "webpack://<myprojectname>/*": "${workspaceRoot}/*" } } ] }

Edit: Reason could be this error in my debug console. Still don't know how to fix

Error when trying to require webpack.config.js file from path 'C:\appname\webpack.config.js'. Error is: Error: Cannot find module '@nativescript/webpack'

Edit 2: Don't know how but the error is now this one.

Error when trying to require webpack.config.js file from path 'C:\appname\webpack.config.js'. Error is: Error: Cannot find module 'C:\Users\username\AppData\Local\Programs\Microsoft VS Code\package.json'

Danny168 commented 3 years ago

I am also getting the same error message: Error when trying to require webpack.config.js file from path 'E:\appname\webpack.config.js'. Error is: Error: Cannot find module 'C:\Users\username\AppData\Local\Programs\Microsoft VS Code\package.json'.

I've changed my launch.json file to be 

        {
            "name": "Launch on Android",
            "type": "nativescript",
            "request": "launch",
            "platform": "android",
            "appRoot": "${workspaceRoot}",           
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:// appname/*": "${workspaceRoot}/*",
            },
            "watch": true
        },

My webpack.config.js is the default as created:

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

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

    // Learn how to customize:
    // https://docs.nativescript.org/webpack

    return webpack.resolveConfig();
};
darkyelox commented 3 years ago

Same problem here with NativeScript v8, it's a shame this wonderful framework lacks of good tools and some of them very outdated.

DEBUG CONSOLE OUTPUT:

Error when trying to require webpack.config.js file from path '/Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/webpack.config.js'. Error is: Error: Cannot find module '/package.json' Require stack:

rob4226 commented 3 years ago

After a lot of messing around with things, I finally found something that magically made everything work in my Nx workspace NativeScript project. I put "sourceRoot": "." in the tsconfig.app.json compiler options and now finally the vscode debugger finds my breakpoints! sourceRoot specifies the root path for debuggers to find the reference source code.

 "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "sourceRoot": ".",
  },
// ...

Note: The above worked for webpack-4 (@nativescript/webpack v3-v4) but for webpack-5 (@nativescript/webpack v5 or beta) I also had to do the below in launch.json like is discussed in this thread. I guess the source map paths are done differently in webpack-5. My project is a shared mobile/web Angular NativeScript app in a Nx workspace monorepo. The nativescript app's nx workspace app name is mobile and located in apps/mobile. Also note, the name in apps/mobile/package.json is mobile which is important bc webpack-5 puts it in the sourcemap path.

"sourceMapPathOverrides": {
    "webpack://mobile/*": "${workspaceRoot}/apps/mobile/*",
},
ebewley commented 2 years ago

I am using {N} v8.1.4 and {A} v12.2.0 and in addition to the debugger not stopping on breakpoints, I was also getting the message that of @darkyelox in which it was looking for a file at C:\Program Files\Microsoft VS Code\package.json. None of the other suggestions worked, so I thought to add an almost empty package.json file at the location specified. That worked! The errors went away and debugging started working. By an almost empty package.json file, I mean...

{
}

I hope this helps some of you!

NathanWalker commented 2 years ago

We'll move to this discussion where answer is provided: https://github.com/NativeScript/NativeScript/discussions/9693

aqweeva commented 2 years ago

Might be a bit late here to the party, but this article Finally Resolved the issue for me!!! (after fighting with this for 2 days) Pretty much the common solution worked.

  1. Added to tsconfig.json "sourceMap": true,

  2. Added to my launch.json "sourceMapPathOverrides": { "webpack://@nativescript/appnameinmy.package.json/": "${workspaceRoot}/" }

       Thank you!