Code Monkey home page Code Monkey logo

vscode-edge-devtools-network's Introduction


Visual Studio Code - Network for Microsoft Edge (Chromium)

Show Edge browser Network tool inside Visual Studio Code editor and use it to know details about network requests.

A Visual Studio Code extension that allows to use the Edge browser Network tool from within the editor. The Network tool will connect to an instance of Microsoft Edge giving the ability to see network requests details.

Note: This extension only supports Microsoft Edge (Chromium)

Network for Microsoft Edge - Demo

Using the Extension

Getting Started

For use inside Visual Studio Code:

  1. Install any channel (Canary/Dev/etc.) of Microsoft Edge (Chromium).
  2. Install the extension.
  3. Open the folder containing the project to work on.

Using the tools

The extension operates in two modes - it can launch an instance of Microsoft Edge navigated to your app, or it can attach to a running instance of Microsoft Edge. Both modes requires you to be serving your web application from local web server, which is started from either a Visual Studio Code task or from your command-line. Using the url parameter you simply tell Visual Studio Code which URL to either open or launch in the browser.

Other optional launch config fields

  • browserPath: The full path to the browser executable that will be launched. If not specified the most stable channel of Microsoft Edge (Chromium) will be launched from the default install location instead.
  • hostname: By default the extension searches for debuggable instances using localhost. If you are hosting your web app on a remote machine you can specify the hostname using this setting.
  • port: By default the extension will set the remote-debugging-port to 9222. Use this option to specify a different port on which to connect.

Launching the browser via the side bar view

  • Start Microsoft Edge via the side bar
    • Click the Network for Microsoft Edge view in the side bar.
    • Click the Open a new tab icon to launch the browser (if it isn't open yet) and open a new tab.
  • Attach the Network tool via the side bar view
    • Click the Attach icon next to the tab to open the Network tool.

Launching the browser manually

  • Start Microsoft Edge with remote-debugging enabled on port 9222:
    • msedge.exe --remote-debugging-port=9222
    • Navigate the browser to the desired URL.
  • Attach the Network tool via a command:
    • Run the command Network for Microsoft Edge: Attach to a target
    • Select a target from the drop down.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

See CONTRIBUTING.md for more information.

Other information

Data/Telemetry

This project collects usage data and sends it to Microsoft to help improve our products and services. Read Microsoft's privacy statement to learn more.

Reporting Security Issues

Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at [email protected]. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the MSRC PGP key, can be found in the Security TechCenter.

vscode-edge-devtools-network's People

Contributors

chshrest avatar microsoftopensource avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vscode-edge-devtools-network's Issues

Webview exception

I can't seem to get this extension to work.

I've tried multiple pages, version and vscode versions.

It seems like the web view does not render. but I can't find any obvious reason why.

Below an image and error:

ERR Unknown webview handle:36f7de0f-c235-489a-bd6a-18744d834c02: Error: Unknown webview handle:36f7de0f-c235-489a-bd6a-18744d834c02 at e.getWebview (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:4469:628) at e.$postMessage (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:4468:920) at p._doInvokeHandler (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:4486:707) at p._invokeHandler (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:4486:399) at p._receiveRequest (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:4485:59) at p._receiveOneMessage (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:4483:886) at file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:4482:34 at c.fire (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:99:67) at fire (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:478:326) at t.PersistentProtocol._receiveMessage (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:483:333) at file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:480:415 at c.fire (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:99:67) at g.acceptChunk (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:475:752) at file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:475:104 at Socket.t (file:///C:/Program Files/Microsoft VS Code Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:485:44) at Socket.emit (events.js:223:5) at addChunk (_stream_readable.js:309:12) at readableAddChunk (_stream_readable.js:290:11) at Socket.Readable.push (_stream_readable.js:224:10) at Pipe.onStreamRead (internal/stream_base_commons.js:181:23)

image

Support virtual workspaces

๐Ÿ‘‹ Hi there, Martin here, from the VS Code team.

Recently we've announced the Remote Repository feature that lets you browse and edit files and folders directly on GitHub.

Open Remote Repository... opens VSCode on a folder or workspace located on a virtual file system. We call this a virtual workspace. We observed that not all extension support this well, either because they can not, or they haven't thought about it.

It would be fantastic if you could test whether your extension can handle virtual workspaces:

Check out the Virtual Workspaces Extension Author Guide on how to do that.

When done, set the new virtualWorkspaces capability in your 'package.json'.

{
  "capabilities": {
    "virtualWorkspaces": true | false
  }
}
  • Use "virtualWorkspaces": true if your extension is prepared for virtual workspaces
  • Use "virtualWorkspaces": false if your extension should be disabled when a virtual workspace is opened

For questions and comments please use the Virtual Workspaces Tracking Issue.

Thanks for the support and the great work! โค๏ธ

Support Workspace Trust

Hello ๐Ÿ‘‹ I'm from the VS Code team.

Recently, we have been exploring a security feature we refer to as Workspace Trust. This feature is intended to centralize and unify a security conscious decision required by a variety of VS Code features. With workspace trust, the user will be able to declare whether or not they trust the folder that is opened in VS Code before these features are executed.

Why you should care

Your extension is incredibly popular with VS Code users! We want to make sure that those users have a delightful experience with workspace trust and that includes extension authors deciding how much of their extension is supported in an untrusted workspace.

Workspace Trust experience

You can enable the feature with the following setting security.workspace.trust.enabled. Once enabled, you will see the following dialog when opening folders in VS Code.

Workspace Trust Startup Dialog

This dialog is important for allowing the user to make a decision early and understand the impact of their decision. Once you understand the feature, you may want to customize when to display the dialog using the setting security.workspace.trust.startupPrompt.

You can follow the development of Workspace Trust and provide feedback in issue #106488.

Workspace trust API

First off, all of what I am about to say can be found in issue #120251. That issue will include discussion of the feature and any updates to the feature.

The Workspace Trust extension API is now in stable. This allowed us to release the first cut of our guide for onboarding your extension to Workspace Trust. The API is small, so here is a quick look.

You can declare your extension to provide complete, partial or no support in untrusted workspaces using the untrustedWorkspaces capability in package.json.

The following example declares that the extension is supported completely in untrusted workspaces. In this case, the extension is enabled in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": true
  }
}

The next example declares that the extension is not supported in untrusted workspaces. In this case, the extension is disabled in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": false
  }
}

The third option is to declared limited support. There are three tools provided to you when you select the limited option.

First, if you have a setting that can be configured in the workspace but requires the workspace to be trusted in order to apply the workspace value, then you can include the setting using restrictedConfigurations array property in untrustedWorkspaces object. Doing so, VS Code will ignore the workspace value of these restricted settings when your extension reads these settings values using the VS Code Workspace Configuration API.

The following example declares the settings that are restricted in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": "limited",
    "restrictedConfigurations": [
      "markdown.styles"
    ]
  }
}

Next, you can also check and listen if the current workspace is trusted or not programmatically using the following API:

export namespace workspace {
  /**
   * When true, the user has explicitly trusted the contents of the workspace.
   */
  export const isTrusted: boolean;
  /**
   * Event that fires when the current workspace has been trusted.
   */
  export const onDidGrantWorkspaceTrust: Event<void>;
}

Lastly, you can hide commands or views declaratively with the isWorkspaceTrusted context key in your when clauses.

A far more detailed guide on how to onboard which will be updated as we receive feedback can be found in issue #120251.

Rollout plan

Workspace Trust will remain disabled for the month of May, but we are planning on enabling this by default in the future. To prepare for that day, we would love for you to try it out and provide feedback.

We'd love your feedback

Since this issue was created in an automated fashion, we won't be monitoring the responses in this issue (our notifications would explode!). Instead we ask you to drop questions, and feedback in issue #120251 as we've mentioned above.

We're excited to see what you do with workspace trust!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.