Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add React Native direct debugger #1088

Merged
merged 25 commits into from
Sep 26, 2019
Merged
Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
fdcdf0b
add Direct debugger
RedMickey Aug 28, 2019
cee1961
supplement Hermes docs
RedMickey Aug 28, 2019
b7258d7
change Hermes docs 2
RedMickey Aug 28, 2019
cc01499
change debug scenarios' names
RedMickey Aug 28, 2019
0b31d80
Merge branch 'master' into react-native-direct-debugger2
RedMickey Aug 28, 2019
84df93d
change direct debugger scenarios' parameters
RedMickey Aug 28, 2019
33f9ddd
fix code according PR comments
RedMickey Aug 28, 2019
69360fd
change docs and fix code according PR comments
RedMickey Aug 29, 2019
af4d45a
add desctiption of Hermes debug scenarios
RedMickey Aug 29, 2019
f511157
fix comment in code
RedMickey Aug 29, 2019
a3becad
fix comment in code2
RedMickey Aug 29, 2019
84798b7
Merge branch 'master' into react-native-direct-debugger2
SounD120 Aug 31, 2019
79975a1
change sendDirect method location and telemetry step name for direct …
RedMickey Sep 2, 2019
afbea95
Merge branch 'react-native-direct-debugger2' of https://github.com/Re…
RedMickey Sep 2, 2019
8605733
change log message about Hermes debugging
RedMickey Sep 2, 2019
27617cd
Fix code style errors
RedMickey Sep 3, 2019
09b295e
Separate the log message for Hermes in enableDirectDebuggingMode step
RedMickey Sep 3, 2019
a2fd6bb
change conditional operator
RedMickey Sep 3, 2019
9f22452
Rename isDirect flag and change docs
RedMickey Sep 4, 2019
2eac8e1
Add 'Experemental' word to Hermes debugger name
RedMickey Sep 6, 2019
679be78
Add isDirect flag to all steps of Hermes debugging
RedMickey Sep 6, 2019
362c701
fix code style and little bugs
RedMickey Sep 10, 2019
573c719
Change Hermes debugging log message
RedMickey Sep 10, 2019
2061086
Little description fix
RedMickey Sep 26, 2019
2c24ac9
Merge branch 'master' into react-native-direct-debugger2
RedMickey Sep 26, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ Once app is loaded and ran, [open Developer Menu](https://facebook.github.io/rea

You can debug your app on an Android emulator, Android device or iOS simulator. This extension provides [experimental support](doc/debugging.md#debugging-on-ios-device) for iOS devices.

Since version 0.60.2 [React Native supports Hermes engine for Android applications](https://facebook.github.io/react-native/blog/2019/07/17/hermes). Extension provides experimental support for debugging React Native Android applications with Hermes enabled. Please see [Debugging React Native apps with Hermes enabled](doc/debugging.md#debugging-react-native-apps-with-hermes-enabled) for more details.

More information about debugging using VS Code can be found in this [guide](https://code.visualstudio.com/docs/editor/debugging).

See [Setting up debug environment](doc/debugging.md) for more details.
Expand Down
32 changes: 32 additions & 0 deletions doc/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,35 @@ For WPF apps use `wpf`, e.g.(WPF debugging available only for react-native-windo
"platform": "wpf"
}
```

## Debugging React Native apps with Hermes enabled

Hermes is the new JavaScript engine optimized for running React Native apps on Android. It improves app performance and decreases app size.

To enable Hermes for your app please follow [this official instructions](https://facebook.github.io/react-native/docs/hermes/).
RedMickey marked this conversation as resolved.
Show resolved Hide resolved

Debugging apps with Hermes enabled is currently experimental and don't fully support all the features that are available for stable debugger. Please, see [this issue](https://github.com/microsoft/vscode-react-native/issues/1073) for more details about the implementation progress.
RedMickey marked this conversation as resolved.
Show resolved Hide resolved

RedMickey marked this conversation as resolved.
Show resolved Hide resolved
If you use Hermes engine, you are required to choose one of the following configurations:
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
- React Native Direct: Debug Android

```
{
"name": "Debug Android (Hermes)",
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
"cwd": "${workspaceFolder}",
"type": "reactnativedirect",
"request": "launch",
"platform": "android"
}
```

- React Native Direct: Attach to packager

```
{
"name": "Attach to packager (Hermes)",
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
"cwd": "${workspaceFolder}",
"type": "reactnativedirect",
"request": "attach"
}
```
168 changes: 168 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,174 @@
}
}
}
},
{
"type": "reactnativedirect",
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
"label": "React Native Direct",
dhanvikapila marked this conversation as resolved.
Show resolved Hide resolved
"program": "./src/debugger/direct/reactNativeDirectDebugEntryPoint.js",
"runtime": "node",
"enableBreakpointsFor": {
"languageIds": [
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
]
},
"configurationSnippets": [
{
"label": "React Native (Hermes): Debug Android",
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
"description": "%reactNative.snippets.debugAndroidHermes.description%",
"body": {
"name": "Debug Android (Hermes)",
"cwd": "^\"\\${workspaceFolder}\"",
"type": "reactnativedirect",
"request": "launch",
"platform": "android"
}
},
{
"label": "React Native (Hermes): Attach to packager",
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
"description": "%reactNative.snippets.attachPackagerHermes.description%",
"body": {
"name": "Attach to packager (Hermes)",
"cwd": "^\"\\${workspaceFolder}\"",
"type": "reactnativedirect",
"request": "attach"
}
}
],
"configurationAttributes": {
"attach": {
"required": [
"cwd"
],
"properties": {
"cwd": {
"type": "string",
"description": "%reactNative.attach.cwd.description%",
"default": "${workspaceFolder}"
},
"trace": {
SounD120 marked this conversation as resolved.
Show resolved Hide resolved
"type": "string",
"enum": [
"verbose",
"log",
"warn",
"error",
"stop"
],
"default": "log",
"description": "%reactNative.attach.trace.description%"
},
"address": {
"type": "string",
"description": "%reactNative.attach.address.description%",
"default": "localhost"
},
"port": {
"type": "string",
"description": "%reactNative.attach.port.description%",
"default": "8081"
},
"skipFiles": {
"type": "array",
"description": "%reactNative.attach.skipFiles.description%",
"items": {
"type": "string"
},
"default": []
}
}
},
"launch": {
"required": [
"cwd",
"platform"
],
"properties": {
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
"platform": {
"type": "string",
"enum": [
"android"
],
"description": "%reactNative.launch.platform.description%"
},
"cwd": {
"type": "string",
"description": "%reactNative.launch.cwd.description%",
"default": "${workspaceFolder}"
},
"target": {
"anyOf": [
{
"type": "string",
"enum": [
"device",
"simulator"
]
},
{
"type": "string"
}
],
"default": "simulator",
"description": "%reactNative.launch.target.description%"
},
"logCatArguments": {
"type": "array",
"description": "%reactNative.launch.logCatArguments.description%",
"default": [
"*:S",
"ReactNative:V",
"ReactNativeJS:V"
]
},
"runArguments": {
"type": "array",
"description": "%reactNative.launch.runArguments.description%"
},
"env": {
"type": "object",
"additionalProperties": {
"type": "string"
},
"description": "%reactNative.launch.env.description%",
"default": {}
},
"envFile": {
"type": "string",
"description": "%reactNative.launch.envFile.description%",
"default": "${workspaceFolder}/.env"
},
"skipFiles": {
"type": "array",
"description": "%reactNative.launch.skipFiles.description%",
"items": {
"type": "string"
},
"default": []
},
"trace": {
"type": "string",
"enum": [
"verbose",
"log",
"warn",
"error",
"stop"
],
"default": "log",
"description": "%reactNative.launch.trace.description%"
},
"launchActivity": {
"type": "string",
"description": "%reactNative.launch.launchActivity.description%",
"default": "MainActivity"
}
}
}
}
}
],
"configuration": {
Expand Down
2 changes: 2 additions & 0 deletions package.nls.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,10 @@
"reactNative.command.reloadApp.title":"Reload App",
"reactNative.command.runInspector.title":"Run Element Inspector",
"reactNative.snippets.debugAndroid.description":"A new configuration for launching react-native app on android",
"reactNative.snippets.debugAndroidHermes.description":"A new configuration for launching react-native Hermes app on android",
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
"reactNative.snippets.debugiOS.description":"A new configuration for launching react-native app on iOS",
"reactNative.snippets.attachPackager.description":"A new configuration for attaching to packager",
"reactNative.snippets.attachPackagerHermes.description":"A new configuration for attaching to packager of Android Hermes app",
"reactNative.snippets.debugExpo.description":"A new configuration for launching Expo app",
"reactNative.attach.program.description":"[DEPRECATED. USE cwd INSTEAD] The path to launchReactNative.js in the vscode folder",
"reactNative.attach.cwd.description":"The path to the project root folder",
Expand Down
10 changes: 10 additions & 0 deletions src/common/extensionHelper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license. See LICENSE file in the project root for details.

import * as path from "path";
import * as fs from "fs";

export function getExtensionVersion() {
const projectRoot = path.join(__dirname, "..", "..");
return JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf-8")).version;
}
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
8 changes: 8 additions & 0 deletions src/common/telemetryHelper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,14 @@ export class TelemetryHelper {
Telemetry.send(event);
}

public static sendDirect(eventName: string, properties?: Telemetry.ITelemetryProperties): void {
const event = TelemetryHelper.createTelemetryEvent(eventName, {isDirect: true});
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
if (properties) {
TelemetryHelper.addTelemetryEventProperties(event, properties);
RedMickey marked this conversation as resolved.
Show resolved Hide resolved
}
Telemetry.send(event);
}

public static sendCommandSuccessTelemetry(commandName: string, commandProperties: ICommandTelemetryProperties, args: string[] = []): void {
let successEvent: Telemetry.TelemetryEvent = TelemetryHelper.createBasicCommandTelemetry(commandName, args);

Expand Down
Loading