DevTools: Add support for opening in editor with custom URL protocols

[sean9keenan]

Summary

Today it is not possible to open VSCode or other editors if a custom URL protocol is used (such as 'webpack://').

This adds the ability to replace a URL protocol for another string when the "custom" option in "Open in Editor URL" is selected:

In turn, this allows the "Open in editor" link to appear in these cases:

The empty state looks like:

Open to alternative approaches on how to make the replace handle more cases, but this seemed simple and easy!

How did you test this change?

Tested locally, see the screenshots above, clicking the link opens the editor to the correct line.

[sean9keenan]

Hey @hoxyq - wondering if there's anything at a high level I should address here. Thanks in advance!

[hoxyq]

Hey @hoxyq - wondering if there's anything at a high level I should address here. Thanks in advance!

Hey, sorry for the delay, currently prioritizing other project

I will try to take a look tomorrow

[hoxyq]

My current understanding is that you want to replace any potential custom schemes, like webpack://, with something else that will allow you to successfully open source files.

React DevTools gets the source url of the script that contains inspected component from the source map of this script. Looks like in your case Webpack bundler is responsible for generating source maps.

Although this change is minimal and probably gives more flexibility to the user, I believe it should be solved on the other bundler side, or the entity that is responsible for generating source maps.

If your application would emit source maps urls in file URI scheme, then it should work out of the box with React DevTools? If it doesn't, then it is something that we should fix in React DevTools

[hoxyq]

The limitations of such approach could be:

1. Relying on the fact that every script is using same scheme, like webpack:// in your case
2. Relying on the fact that source files on a file system (or somewhere else) will all be relative to the root folder of the project, what you are replacing webpack:// with. I think it is common case for an app to have multiple bundles, which may have different root folders specified.

[sean9keenan]

Makes sense, that seems like the better approach!

I'd need to investigate further to see how I can make the source map URLs work out of the box w/React DevTools. But today - clicking the "Go to source <>" button will open the component inside of the Chrome dev-tools Sources tab where source-maps are loaded, which hints that we could handle it the same way that Chome dev-tools does.

[hoxyq]

clicking the "Go to source <>" button will open the component inside of the Chrome dev-tools Sources tab

Yeah, this is by design, and we are using some some browser extension APIs for it. This button is expected to always be available, if you are debugging web application, whereas the button for opening a file in IDE will be disabled for most of the apps, because it heavily relies on the information about where your file is located on a file system and the fact that this information is present inside source maps.

we could handle it the same way that Chome dev-tools does.

I might be missing context, but does Chrome DevTools open script file correctly on a file system as of today?

I think Chrome DevTools, same as React DevTools, only rely on the information that is in source map, and if there is no information about the file path, then it won't have any deep linking.