NativeScript / NativeScript/nativescript-cli

No more source map while debugging nativescript app

Abierto
#5,657 4 comentarios 2 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

bug-pending-triage
Lenguaje dominante
JavaScript
Estrellas
1.1k
Forks
204
Merge medio
1 d 9 h
PR fusionados (30 d)
8

Descripción

Issue Description

Since about March 10th 2022 debugging in chrome and VS Code fails as there is no more valid source mapping for the .vue files.

The line number of breakpoints of the original .vue file is correct but the .vue file is not opened with an error hint that the source map coverage is n/a. But if you add the "debugger" command in a method and the debugger halts the .vue file is opened correclty (sometimes)?! Also when a hot deploy is committed you get the correct .vue file.

This error on debugging occurs in the latest package version(s) and the demo project.

The following example program is an official demo project from nativescript:
debugger

In the call stack, you can see onItemTab method and the reference to Items.vue:93
image002

Versions
node.js 16.4.2
nativescript 8.2.3
npm 8.5.0
java openJdk 11

package.json:

{
  "name": "test",
  "main": "app/app.js",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/core": "~8.2.0",
    "@nativescript/theme": "~3.0.2",
    "nativescript-vue": "~2.9.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.2.2",
    "@nativescript/webpack": "~5.0.6",
    "nativescript-vue-template-compiler": "~2.9.0"
  }
}

ns doctor output
✔ Getting environment information

No issues were detected.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ Local builds for iOS can be executed only on a macOS system. To build for iOS on a different operating system, you can use the NativeScript cloud infrastructure.
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.2.3 version and is up to date.
✔ Component @nativescript/core has 8.2.1 version and is up to date.
✖ Component @nativescript/ios is not installed.
✔ Component @nativescript/android has 8.2.2 version and is up to date.

Reproduction

Reproduce this issue

With chrome dev tools

  1. Create a new project with "ns create --vue", give a name and select "Tabs"
  2. Add "debugger;" to Items.vue in the method "onItemTab" (line 92)
  3. Install an emulator or connect a hardware android device and start it
  4. Run the debugger with "ns debug android"
  5. Start the chrome dev tools: "devtools://devtools/bundled/inspector.html?ws=localhost:40000"
  6. Click in the app on a row to trigger the breakpoint
  7. Now you should see an precompiled version of Items.vue and in the "Call Stack" the line reference 93

We have this issue on all platforms (windows+android and mac+ios)

With Visual Studio Code

  1. Create a new project with "ns create --vue", give a name and select "Tabs"
  2. Open root directory with VS Code
  3. Install the "NativeScript" extension
  4. Open the run and debug tab
  5. Click on create launch.json and select "NativeScript"
  6. Select "Run on Android" and run the debugger
  7. You should now see an error message in the debug console
Relevant log output (if applicable)
Debugging with Visual Studio Code
Visual Studio Code shows the following exception while starting the debugger:

Error when trying to require webpack.config.js file from path '<PATH TO PROJECT ROOT DIRECOTRY>\webpack.config.js'. Error is: Error: Cannot find module 'C:\Users\<USERNAME>\AppData\Local\Programs\Microsoft VS Code\package.json'
Require stack:
- <PATH TO ROOT PROJECT DIRECTORY>\node_modules\@nativescript\webpack\dist\helpers\project.js
- <PATH TO ROOT PROJECT DIRECTORY>\node_modules\@nativescript\webpack\dist\helpers\dependencies.js
- <PATH TO ROOT PROJECT DIRECTORY>\node_modules\@nativescript\webpack\dist\helpers\externalConfigs.js
- <PATH TO ROOT PROJECT DIRECTORY>\node_modules\@nativescript\webpack\dist\index.js
- <PATH TO ROOT DIRECTORY>\webpack.config.js
- c:\Users\<USERNAME>\.vscode\extensions\nativescript.nativescript-0.12.3\out\debug-adapter\nativeScriptDebugAdapter.js
- c:\Users\<USERNAME>\.vscode\extensions\nativescript.nativescript-0.12.3\out\debug-adapter\nativeScriptDebug.js
- C:\Users\<USERNAME>\AppData\Local\Programs\Microsoft VS Code\[eval]
Environment

No response

Please accept these terms

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Reproduzca el comportamiento del depurador con el proyecto oficial Vue Tabs, Items.vue y los pasos indicados para Chrome o Visual Studio Code. Lea primero webpack.config.js y los archivos del adaptador de depuración de NativeScript referenciados; después, compare el mapeo de código fuente generado con la ubicación de Items.vue en la pila de llamadas. Se considera terminado cuando los archivos .vue se abren con una cobertura válida de source map en ambas rutas del depurador, sin el error de inicio indicado.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
android, ios, javascript, vscode, webpack
Área
cli, devtools, mobile-dev
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.