microsoft / edge-devtools-network-console

An API exploration and development tool for Microsoft Edge (and Chromium) DevTools

Introduction

Network Console (working title) is an experimental component for Chromium-based DevTools for making synthetic network requests over HTTP. It can be used during the dev-test loop for web APIs.

As part of this effort, we want to meet our customers where they are. We know that Network Console isn't going to be feature-complete with our initial pass; we want to have the flexibility to iterate rapidly, experiment in the open, and get great ideas for what will be going into Network Console in the future.

This project is new, and while the first iteration is going to be rolling into Microsoft Edge DevTools behind an experiment flag, we're not sure what the right long-term vision for it is; for example, will it be better to package it into a browser extension rather than a built-in tool? We're not sure yet; this is a relatively fresh canvas for us to start from. Please keep that in mind if you consider contributing.

Structure of Network Console

Network Console is constructed in a monorepo style. It presently has two packages:

• devtools-network-console is the primary front-end of the UI. It is presently built in React bootstrapped from create-react-app, and wherever it makes sense, we're using off-the-shelf components to try to go fast.
• network-console-shared contains file parsing logic which needs to be shared with the host, as well as interfaces which define the host-frontend communication channel. This allows our messages to be type-checked in the host and frontend.

The "Host" is responsible for a number of tasks:

• File system: Reading, saving, and managing API collections and environment settings
• Executing requests: By separating out the concern of constructing the request from actually executing the request, it allows for "special considerations" to be applied. For example, when hosted within Edge, requests made by Network Console are issued in the context of the page being debugged.

Some parts of the UI as seen in Microsoft Edge are part of the actual DevTools code. These parts include the tab frame and the tree lists presenting the API collections view.

Host communication occurs over a postMessage message channel. For details about what a host needs to implement, please see the Host protocol documentation.

Developing

After obtaining the source tree, run:

• npm install
• npm run install-children

Then, depending on which task you want to do:

Developing for Chromium DevTools

1. Determine the path to devtools-frontend/src in your devtools-frontend enlistment. For example, from a root Chromium developer enlistment, this path will be something like f:\chromium\src\third_party\devtools-frontend\src or ~/chromium/src/third_party/devtools-frontend/src.
2. Optional: Set the environment variable NETCONSOLE_DEVTOOLS_SRC_PATH to the devtools-frontend path of your Chromium enlistment. (If you omit this step, you'll need to include a command line parameter later).
3. From the root of the Network Console enlistment, run npm run build. Optionally, you can pass in parameters here using -- --devtools_src_path parameters (more info below).

The outputs from this will be:

• In packages/network-console-shared/dist, a global.js file which contains a number of components injected into the global namespace NCShared in Chromium/Edge.
• In the same folder, two .d.ts files (network-console-shared.d.ts and index.d.ts which describe the global namespace NCShared).
• In packages/devtools-network-console/build, the staged files output from the default create-react-app build.
• In dist, these files are all scaffolded for ingestion into Chromium.

If the NETCONSOLE_DEVTOOLS_SRC_PATH environment variable was set, or --devtools_src_path parameter specified, the build script will also update the scaffolded version of Network Console in the target Chromium enlistment. This is referred to as "rolling Network Console," and should be done in a clean destination directory (because Chromium's presubmit checks verify that changes to third_party are isolated from other changes).

Building and running locally

If you just want to run Network Console in a local browser instance, first ensure that you have built the network-console-shared project by running npm run build from that folder. Then, you should be able to run the Network Console frontend in a browser by changing to the devtools-network-console folder and running npm run start. Bear in mind that updates to the network-console-shared project will require a new build of that project to be triggered; however, running tsc --watch in that folder should generally be adequate while in the build-test loop.

When running the Network Console frontend in a web browser, it uses the Web Application Host implementation, which stubs much of the functionality and doesn't actually do much, although you can generally interact with it via the DevTools console, and most of the UI should be accessible.

Bear in mind that when you use Network Console from the Web Application Host, because it simply executes Fetch requests from the hosting web page, those requests are subject to CORS browser security restrictions. Generally this means that outgoing requests will be subject to cross-origin preflight requirements.

NPM Commands

• npm run clean: Deletes the /dist folder from the root repository
• npm run install-children: runs npm install on child folders under /packages
• npm run build-locally: Runs production build of both shared component and frontend
• npm run install-and-build: Single step to npm install and build (suitable for CI)
• npm run deploy -- --devtools_src_path <path>: After running one of the build steps, will deploy the build output to the Chromium enlistment. See notes above about how to determine the path to pass into this command, or how to configure the NETCONSOLE_DEVTOOLS_SRC_PATH environment variable.
• npm run start: Runs the frontend in development mode (equivalent to running the same command in the packages/devtools-network-console path)

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.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Notices

• Data Collection. The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

edge-devtools-network-console's Issues

Possibly remove CRA-injected dependencies

https://github.com/facebook/create-react-app/blob/master/packages/cra-template-typescript/template.json

The default TypeScript template includes a number of dependencies, which probably can be moved to dev-dependencies. Investigate whether these can be migrated out of dependencies in package.json.

hhh

hhh

Network Console Edit/Resend issue UI problem

Window 10 Version 21h1 x64
Edge 92.0.902.73 &
Edge beta 93.0.961.24

https://techcommunity.microsoft.com/t5/discussions/network-console-edit-resend-issue-ui-problem/m-p/2665888

This applies to both Edge / Edge Beta

In Devtools, I have enabled Network Console. I right click on a request I want to edit and resend. But I get this "loading" for an extended time. Urls in screenshot sanitized

No collections --> No ability to "Save as"

If the user clicks "Save" for a brand-new request, or Ctrl+Click to save-as, and no Collections are defined, that will yield an empty "Save to Collection" dialog:

The dialog should provide a "Create new Collection" button (or something similar), which would prompt the Host to create a new Collection.

Error message appears cut off in web application host

Send an invalid request in the webhost, such as to localhost:3000, and the resulting error message appears cut off when resizing the splitter:

"Save" when the Host has no Collections defined yields a scenario that doesn't make sense

The frontend is allowed to click "save" in this scenario (which should be invalid, because no destination collection is present). When this occurs, the frontend should display "New collection," which should cause the Host to prompt the user to create a new collection into which the request would be saved. (This is the equivalent of File -> New -> Save, which would functionally be "Save as" in, for example, a text editor).

Without this process, the user gets an unhelpful error message.

Default name of a request should be "Untitled request"

To align with the tab bar title.

request execute/edit page will crash when I leave this dev tools window

Description:
If I leave the dev tools window a moment, usually when I came back to the Network console, I cannot see the request detail page to execute or edit one request, even I close request tab and reopen request tab. but when I close dev tools window and re-launch dev tools again, I can open request tab correct.

env:
windows 11, edge: Version 122.0.2365.80 (Official build) (64-bit)

Consider changing how we issue the fetch request

Today we fetch with code generated at runtime by a custom generation script that relies on a lot of string concatenation. However, Chromium DevTools already has a "Copy as fetch" option.

Alternatively, the function can be written out in regular vanilla JS (so it can be typechecked) and then be converted to a string to Function#toString().

chrome-extension://invalid/

chrome-extension://invalid/

body编辑后发送请求,编辑数据没有生效

网络控制台的body中编辑后发送请求,编辑的数据没有生效

---

Google translation: "After editing the body of the network console and sending the request, the edited data does not take effect"

Allow the Host to disable the Cookies view

Cookies are not accessible in fetch requests. We should be able to disable the Cookies view conditioned on the Host's capabilities.

# This workflow is used to auto-create ADO work items when issues are labeled with 'tracked'. name: Sync issue to Azure DevOps work item on: issues: types: [labeled] jobs: sync: runs-on: ubuntu-latest permissions: issues: write steps: - uses: MicrosoftEdge/action-issue-to-workitem@main env: ado_token: "${{ secrets.ADO_PERSONAL_ACCESS_TOKEN }}" github_token: "${{ secrets.GITHUB_TOKEN }}" with: label: 'tracked' ado_organization: 'microsoft' ado_project: 'Edge' ado_tags: 'DevToolsGitHubSync' ado_area_path: 'Edge\Web Experience\Developer Tools'

Unable to click "Edit and Resend" in Devtools Network Panel, and I can't click the "import a collection" in Network Control

Description:

1. Unable to click "Edit and Resend" in devtools network panel
   

2. I can't click the "import a collection" in Network Control
   

env:
windows 10, edge: Version 123.0.2420.97 (64-bit)

Implement persistence / rehydration

Formerly in devtools-network-console/host/vscode-application-host.ts:

    private reloadGlobalState(_stateValue: string) {
        // TODO: Implement persistence / rehydrate

        // const almostView = JSON.parse(stateValue);
        // almostView.request = IMap(almostView.request);
        // almostView.response = IMap(almostView.response);
        // almostView.viewManager.openViews = ISet(almostView.viewManager.openViews);

        // globalDispatch(globalInitializeAction(almostView));
    }

We can promote this to the parent class and then support teardown and rehydration.

Delete operation on grid rows reorders the entries

In query, headers, body form-data, and body x-www-form-urlencoded, enter the following set of parameters:

• a=b
• b=c
• c=d
• d=e
• e=f
• f=g
• g=h

Now delete a=b

Observed: The parameters are no longer in the same order as they were entered
Expected: The parameter order should not change

Discovered this issue while solving problems related to losing focus on deleting a row.

Cannot click on radio button, only on labels to select

The radio buttons under the Request Body or the Request Auth pane only select when clicking the label text, not on the radio buttons themselves

Note: I reproed when reviewing #43
but I don't think its directly related

Focus can be lost when deleting items in EditorGrid rows

1. Populate a grid with multiple items
2. Delete an item

Observed: Focus is sometimes lost from the editor grid or the configuration tool generally
Expected: Focus should move to a reasonable location

Executing requests in a page with overriden native functions

Consider a webpage that overrides the native fetch function

const originalFetch = fetch;
fetch = async function(...args) {
  if (args[1]) {
    args.headers.append('x-monitoring', 'true');
  }
  return originalFetch(...args);
}

using the network console in such a webpage will go through this code

AB#46933573

Add workspace like opera

Hi . thank you for your great work at edge.
there is something that very needed
in opera we can add workspace and switch between them without need to wait to load tabs
please add this to edge too
in this video i show how opera manage workspaces:

2024-04-02.12-36-15.mp4

No visual indicator for 40X/50X failures

When replaying a failed request, it can be challenging to tell if a request failed if there is no body response. The only indicator is the status at the bottom. Consider adding an icon to the title, changing color, etc to additionally communicate request failure

Implement Save/Export

Should support:

• Network Console native format
• Postman v2.1 format

Imported files from Postman should re-export anything that wasn't modified by Network Console.

Can't get detail from request when click edit and resend

when you click the edit and resend, can't get url and body from request.
The title of the resend section is POST *, missing the url.
And the body content keep loading.......

Tests

Round 1:

• Reducer tests
• Utility tests

Round 2:
UI tests

Edit and resend doesn't open the network console

I am trying to edit and resend a specifc request. On right click on edit and resend nothing happens. This is not just limited to one specific type of request or website.

Similar problem on Stackoverflow: https://stackoverflow.com/questions/78273237/microsoft-edge-edit-and-resend-not-showing-up

I am on Microsoft Edge for Business
Version 124.0.2478.51 (Official build) (64-bit)

suggestion: option to add request to collection from network tab itself

option to add request to collection from network tab itself, currently we have to edit and then save

ServiceWorker refactor or removal

Consider:

• Remove the ServiceWorker references altogether, or
• Use ServiceWorker to service fetch requests for Monaco and Office Fabric UI

The ServiceWorker references are currently excluded, but will continue to live within the source tree.

Delete icons are black on black in dark theme

The delete icons in the header table are black on black when using the dark theme version. makes it hard to see.

Issuing a request having selected Bearer Token authorization but not providing a token fails forever

1. Select "Bearer Token" authorization
2. Don't provide a token
3. Configure the request otherwise
4. Press 'Send'

Expected: Request issues with a blank Authorization: Bearer header, or request fails with an error message presented to the user.
Actual: Assertion failure in the synthesizeHttpRequest function.

Add a UI affordance to cancel a request

If a request is invalid it can get into an invalid, "perpetually loading" state.

Bug: "Unchecked" headers are sent in the composed request to the Host

The Host is still receiving unchecked headers (and in Edge is composing them into the fetch request). This is a bug; only enabled properties should be included.

Feature request: Enable sending a raw, binary file as a request entity

A customer has reported that sending a file as part of a form-data request is inadequate, and wants to be able to send a raw file as the request entity.

click on the edit and resender button but it doesn't work

hello, Dear developer, I click on the edit and resender button but it doesn't work

this is my environmental information:

edge:
version124.0.2478.10 dev (64 位)

window11 23H2

When a collection authorization is updated, there isn't a message to handle it

Suggest updating the IHostCollection interface that belongs to the UPDATE_COLLECTIONS_TREE message, to enable ambient authorization settings (those belonging to the collection folder) to be included. This would allow the current UPDATE_COLLECTIONS_TREE message to keep the ambient authorizations up-to-date, and then the environmentAuth properties on LOAD_REQUEST can be removed.

First collection not autoseclected when trying to save request in collection

when we try to save a request
by default the last used collection or first collection is not autoselected
but still save button is enabled and if clicked gives error " something went wrong"

either it should be selected or button should be disabled until selection is done or give proper/correct message.

Change response actions to include started / stopped times

#1 (comment)

#1 (comment)

These are good comments and we should take.

JSON preview doesn't scroll

The JSON preview visualizer doesn't scroll.