Edit

Share via

Compose and send web API requests using the Network Console tool

  • Article

Use the Network Console tool to send web API requests. For example, use the Network Console tool when you're developing and testing web APIs.

To test a URL:

  1. To open DevTools, right-click a webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. On the main toolbar, click the More tools (More tools icon) button, and then select Network Console.

    The Network Console tool opens:

    The Network Console tool

  3. Click Create a request.

  4. Click the Hide Network Console navigator (The 'Hide Network Console navigator' icon) button, to get more space.

  5. In the Untitled Request text box, enter a URL to test, such as: https://microsoftedge.github.io/Demos/devtools-a11y-testing/

  6. In the GET dropdown list, select a REST method, such as GET, which is the default. The REST methods include:

    • GET
    • HEAD
    • POST
    • PUT
    • PATCH
    • DELETE
    • OPTIONS

  7. Optionally, in the Query section, enter key/value pairs in the Key and Value text boxes, such as ID and 123:

    Entering key/value pairs to construct a URL in the Network Console tool

    The Computed URL is updated as you enter key/value pairs.

  8. Click the Send button. The bottom part of the Network Console tool displays the following tabs:

    • Preview
    • Body
    • Headers
    • Cookies

Opening the Network Console tool from within the Network tool

To get to the Network Console tool by starting from the Network tool:

  1. To open DevTools, right-click a webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. On the main toolbar, select the Network (Network tool icon) tab. If that tab isn't visible, click the More tools (More tools icon.) button, and then select Network.

  3. Refresh the webpage. The Network tool displays the resources that are used to construct the webpage.

  4. Right-click the network request that you want to change and resend, and then select Edit and Resend:

    Right-clicking a resource for the webpage to select 'Edit and resend' in the Network tool

    The Network Console tool opens in the Quick View panel at the bottom of DevTools.

  5. Click the Hide Network Console navigator (The 'Hide Network Console navigator' icon) button, to get more space.

  6. Edit the network request information, and then click the Send button:

    Editing the network request and then clicking Send, in the Network Console tool

Save and export Collections, Environments, and environment variables

You can:

  • Save and export Collections.
  • Save and export Environments.
  • Edit and export sets of environment variables.

To define and save a new environment:

  1. In DevTools, in the Network Console tool, make sure the left, navigator part of the tool is displayed. If needed, click the Show Network Console navigator (The 'Show Network Console navigator' icon) button.

  2. In the Environments section, click the New (The New icon) button.

  3. In the text box that appears, enter a name for the new environment:

    Entering a name for the new environment

  4. Select the format for the new environment:

    • Network Console - Supports multiple environments in one file.
    • Postman - Supports one environment per file, but work with Postman.

    Selecting the format for the new environment

The Network Console tool is compatible with the Postman v2.1 and OpenAPI v2 schemas.

See also:

See also