You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To install the [NativeScript extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=Telerik.nativescript) open the Command Palette (`F1` or `Cmd+Shift+P`) and run `Extensions: Install Extension` command, then search for 'NativeScript' and choose it from the list.
25
25
26
-
### Figure 1: How to install NativeScript extention for Visual Studio Code.
27
26
28
27
29
28
After the installation completes, the extension appears in the list of installed extensions. You can see it if you run `Extensions: Show Installed Extensions` command from the Command Palette.
30
29
31
30
## Debugging
32
31
33
-
Open your application root folder, created with the `tns create` command, in Visual Studio Code.
32
+
Open your application root folder, created with `tns create` command, in Visual Studio Code.
34
33
35
34
### Generate launch configurations
36
35
37
-
Click the debugging icon  in the View bar, and then click the gear icon  to choose the NativeScript debug environment. A `launch.json` file should be generated in your `.vscode` folder located next to the `app` folder. The configurations, described in `launch.json`, can be selected from the menu in the Debug Panel.
36
+
Click the debugging icon  in the View bar, and then click the gear icon  to choose the NativeScript debug environment. A `launch.json` file should be generated in your `.vscode` folder, containing 4 default launch configurations - `Launch on iOS`, `Attach on iOS`, `Launch on Android` and `Attach on Android`. You can always add your own debug configuration or alter the existing ones just by editing the `launch.json` file.
38
37
39
-
### Figure 2: How to debug application via Visual Studio Code.
40
-
38
+
41
39
42
40
### Launch an application with the debugger
43
41
44
-
Choose one of the launch configurations (e.g., `Launch on iOS Emulator`) and press the `Start` button next to the menu. This will run your app in the iOS emulator and attach the VS Code debugger. The app should break on the first JavaScript/TypeScript statement. You can find more information about the debugging support in VS Code in the [VS Code Debugging Guide](https://code.visualstudio.com/docs/editor/debugging).
42
+
Choose one of the launch configurations (e.g., `Launch on iOS`) and press the `Start Debugging` button next to the menu. This will trigger a NativeScript CLI command which will build, deploy and run your app in an iOS device or emulator and attach the Visual Studio Code debugger. If you want the execution to stop on the first JavaScript/TypeScript statement set the `stopOnEntry` flag to `true`in your `launch.json` configuration.
45
43
46
-
### Figure 3: Attach the debugger without rebuilding the application.
Once the debugger is attached you can inspect scope variables, set breakpoints, watch expressions, execute code while the app is paused on a breakpoint etc. You can find more information about the debugging support in Visual Studio Code in the [VS Code Debugging Guide](https://code.visualstudio.com/docs/editor/debugging).
45
+
46
+
What's more awesome is that the default launch configurations take advantage of the NativeScript CLI watch functionallity. Therefore, while the VS Code debugger is attached, every change to the app's source will trigger a livesync (after saving the altered file) which will update and restart the target application while the VS Code debugger is automatically reattached to the new app instance preserving all breakpoints and watched expressions. The watching feature can be disabled by setting the `watch` flag to `false` in your `launch.json` configurations.
48
47
49
48
### Attach the debugger to an already running app
50
49
51
-
If you already have a NativeScript application running your Android or iOS emulator or device, you can attach the VS Code debugger to it, without rebuilding and restarting the application. Just select the desired attach configuration through the debug configuration menu and press the start button.
50
+
If you have an already running NativeScript application in your emulator or device, you can attach the VS Code debugger to it, without even restarting the app. Just select the desired attach configuration through the debug configuration menu and press the start button.
52
51
53
52
### Debug TypeScript
54
53
@@ -58,10 +57,7 @@ If you are writing your app in TypeScript, you have fully functional debugging s
58
57
59
58
### Supply additional arguments to the debug command
60
59
61
-
Under the hood, starting a particular debug configuration executes the `tns debug` command with various arguments. You can append additional arguments by supplying them in the `tnsArgs` property of a debug configuration definition in `launch.json`. For example, if you add `"tnsArgs": "--log=trace"` in the `Launch on iOS Emulator` configuration, in the background VS Code will execute the `tns debug ios --emulator --no-client --log=trace` command, which will give you more verbose information in the Debug Console.
62
-
63
-
### Figure 4: Adding additional command while debugging.
64
-
60
+
Under the hood, starting a particular debug configuration executes the `tns debug` command with various arguments. You can append additional arguments by supplying them in the `tnsArgs` property of a debug configuration definition in `launch.json`. For example, if you add `"tnsArgs": "--log=trace"` in the `Launch on iOS` configuration, in the background VS Code will execute the `tns debug ios --no-client --log=trace` command, which will give you more verbose information in the Debug Console.
65
61
66
62
### Turn on diagnostic logging
67
63
@@ -71,16 +67,18 @@ If the `diagnosticLogging` flag for a particular debug configuration in `launch.
71
67
72
68
Type `nativescript` in the Command Palette and you will see all NativeScript-specific commands. Currently there are only two of them but the list will grow in the future.
73
69
74
-
### Figure 5: Using NativeScript-specific commands directly from Visual Studio Code .
The Run command is the equivalent to`tns run` in the NativeScript CLI. It lets you build, deploy and run your app on an emulator/device directly from Visual Studio Code.
72
+
The `Run on Android/iOS`command is the equivalent of`tns run` in the NativeScript CLI. It lets you build, deploy and run your app on an emulator/device directly from Visual Studio Code.
78
73
79
74
## NativeScript CLI version detection
80
75
81
76
The extension depends on a globally installed NativeScript CLI. It will show an error message if it can't find it.
82
77
83
-
### Figure 6: Handle NativeScript's error for extensions builded for specific NativeScript CLI.
84
78
85
79
86
-
> The extension requires a specific NativeScript CLI version and if you have another version installed, you will see a warning message. The extension is likely to work with the unsupported version but it is recommended that you update the NativeScript CLI or the VS Code extension.
80
+
> The extension requires a specific NativeScript CLI version and if you have another version installed, you will see a warning message. The extension is likely to work with the unsupported version but it is recommended to update the NativeScript CLI or the VS Code extension.
81
+
82
+
## Known issues
83
+
*[The variables pane on Android doesn't work](https://github.com/NativeScript/nativescript-vscode-extension/issues/21). * [In order to be able to debug, the opened workspace must be the app root folder.](https://github.com/NativeScript/nativescript-vscode-extension/issues/104)
0 commit comments