Improve discoverability of functionality

[molant]

A few developers have reported that they have issues with one or more of the following:

• How to add a debug profile
• What commands are available
• New features

There are a few things we can do to improve this and I'd like us to discuss them.

• Would it be possible to automatically update launch.json after running a command? We could add the most common use cases automatically (maybe detecting also what emulators are available, hermes, etc.)?
• Toast notifications about debugging. If we identify that a user has been running the extension for a while without debugging or running a command (and we are in a React Native project), we could prompt them with more detailed instruction on how to use them.
• Prompt that links to changelog: A notification that tells the user the extension has been updated and that opens the changelog when the user clicks on it

[SounD120]

Hi @molant . Yes, these changes could be useful. This is how see these changes:

Would it be possible to automatically update launch.json after running a command?

I am not sure that changing launch.json file automatically after launching a command will be convenient, instead of this what if we add complex UI for generating appropriate launch.json file where we check all needed dependencies and show dynamic tips like in vscode-python extension.

As you can see on the images below the Python extension allows to tune your debug configurations dynamically and has multi-step debug scenarios settings. I think we can try to do something like this but for React Native development needs, so the user will be able to create debug configuration without large manual changes in JSON file.
Also Python extension doesn't render in the Add configurations... button list as a list of debug scenarios, but just as one line.
Maybe that will be more convenient than showing lots of debug scenarios to the new user.
What do you think? You can compare these approaches on the images below.

React Native Tools extension example images

Python extension example images

Toast notifications about debugging.

I am not sure what metrics we should use to understand when and what we should show to user. I have some preliminary considerations, but they need to be worked out in more detail before sharing.

Prompt that links to changelog

We can force open the extension change log on the first extension activation, or show the toast. This is quite easy to implement.

[molant]

the Python extension allows to tune your debug configurations dynamically and has multi-step debug scenarios settings.

I'll take a look at what can be possible. I think we might want to look at what are the different tools developers are using with React Native (TypeScript, babel, etc.) to make sure that we get the sourcemaps working as well and then do a few interviews to see what devs like best before implementing anything.

/cc @jabfrei as we might have to organize something to research this 😊

[molant]

Another verbatim from a user:

cant get the debugger to work. maybe I'm just simple, but regardless would be nice if it was idiot-proof.

[SounD120]

Hey @molant , @jabfrei . I want to bump this thread up. So what else can we analyze to enhance discoverability?

[SounD120]

@molant Are there any updates?

[molant]

Nope, been on PTO last week and haven't had the time to look into this.

Do you have an idea of how many options the complex UI would have? Would it be possible to mock it so we can validate the flow with some users?
With the experiments feature we have, can we target users that do not use a particular feature? I think it will be good to ask some of those user why they don't use the debugger.

Thanks!

[RedMickey]

@molant, We suggest adding three sequences of creation debug configurations. We looked through all our configuration options and decided to focus on main ones.

• Run application -> Select platform (iOS, Android, macOS, Windows) -> Select type of React Native application (if available direct/classic)
• Debug application -> Select platform -> Select type of React Native application (if available direct/classic) -> Select Expo host type (if available)
• Attach to application -> Enter address (default localhost) -> Enter port (default 8081) -> Select type of React Native application -> Select platform(if direct selected)

We think that we shouldn't use too many steps, because it's difficult to remember all the previous ones. So we limit steps to 3 ones.
This method of creating debug configuration can be triggered by clicking on Add Configuration... button in the launch.json file.
Below there are examples of creation of Run application configurations:

• Add Run Direct iOS - Experimental
  
• Add Run MacOS
  

[EzioLi01]

Close this issue as completed since the related PR is all merged, please reopen this or create a new issue if you have another feature request. Thanks!