Postman - How to see request with headers and body data with variables substituted

Question

I am using the Postman Chrome plugin to invoke HTTP requests for software testing. I use the Environments feature with Environment and Global Variables to substitute variables in my requests headers and body.

The variable substitution is working correctly (I can tell as the responses from the HTTP Server indicate that).

However, I would like to be able to see the Request Header and Body values AFTER the variables have been substituted. How can I do that?

Answer 1

As of now, Postman comes with its own "Console." Click the terminal-like icon on the bottom left to open the console. Send a request, and you can inspect the request from within Postman's console.

In the modern version, it currently it looks like:

Answer 2

Update 2018-12-12 - Chrome App v Chrome Plugin - Most recent updates at top

With the deprecation of the Postman Chrome App, assuming that you are now using the Postman Native App, the options are now:

1. Hover over variables with mouse
2. Generate "Code" button/link
3. Postman Console

See below for full details on each option.

Personally, I still go for 2) Generate "Code" button/link as it allows me to see the variables without actually having to send.

Demo Request

Demo Environment

1) Hover over variables with mouse

2) Generate "Code" button/link

3) Postman Console

Update: 2016-06-03

Whilst the method described above does work, in practice, I now normally use the "Generate Code" link on the Postman Request screen. The generated code, no matter what code language you choose, contains the substituted variables. Hitting the "Generate Code" link is just faster, additionally, you can see the substituted variables without actually making the request.

Original Answer below

To see the substituted variables in the Headers and Body, you need to use Chrome Developer tools. To enable Chrome Developer Tools from within Postman do the following, as per http://blog.getpostman.com/2015/06/13/debugging-postman-requests/.

I have copied the instructions from the link above in case the link gets broken in the future:

1. Type chrome://flags inside your Chrome URL window

2. Search for “packed” or try to find the “Enable debugging for packed apps”

3. Enable the setting

4. Restart Chrome

You can access the Developer Tools window by right clicking anywhere inside Postman and selecting “inspect element”. You can also go to chrome://inspect/#apps and then click “inspect” just below requester.html under the Postman heading.

Once enabled, you can use the Network Tools tab for even more information on your requests or the console while writing test scripts. If something goes wrong with your test scripts, it’ll show up here.

Answer 3

If, like me, you are still using the browser version (which will be deprecated soon), have you tried the "Code" button?

This should generate a snippet which contains the entire request Postman is firing. You can even choose the language for the snippet. I find it quite handy when I need to debug stuff.

Hope this helps.

Answer 4

I'd like to add complementary information: In postman app you may use the "request" object to see your subsituted input data. (refer to https://www.getpostman.com/docs/postman/scripts/postman_sandbox in paragraph "Request/response related properties", ie.

console.log("header : " + request.headers["Content-Type"]);
console.log("body : " + request.data);
console.log("url : " + request.url);

I didn't test for header substitution but it works for url and body.

Alex

Answer 5

You can easily check the content of requests and responses with help of the postman console.

Here is a nice short video explanation How to debug postman request explained.

You can see below the snippet of how the log will show data.

You can check above video for learning how to log custom information.

Answer 6

On web version, if you click code tab on the right, code snippet will appear with multiple language and format choices.

Answer 7

Even though they are separate windows but the request you send from Postman, it's details should be available in network tab of developer tools. Just make sure you are not sending any other http traffic during that time, just for clarity.

Answer 8

If you paste this code to the test of your request you should see a 'Copy to clipboard' button in the 'Visualize' tab that will copy the request with the substituted variables.

var request = pm.request.body.raw.replace(/\n/g,' ').replace(/\t/g,' ');
var html = '''<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
  </head>

  <body>
    <div>
      <h5>REQUEST</h5>
      <div>
        <textarea rows="20" cols="40" style="min-width:700px;min-height:300px" id="copyText">
          $$REQUEST$$
        </textarea>
      </div>
      <button class="copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyText"
        style="background:green;color:white;">
        Copy to clipboard
      </button>
    </div>
  </body>

</html>
<script>
  var clipboard = new ClipboardJS('.copyButton');
  clipboard.on('success', function (e) {
    e.clearSelection();
    e.trigger.textContent = 'Copiado!';
    window.setTimeout(function () { e.trigger.textContent = 'Copy to Clipboard'; }, 2000);
  });
  clipboard.on('error', function (e) {
    e.clearSelection();
    e.trigger.textContent = 'No copiado';
    window.setTimeout(function () {
      e.trigger.textContent = 'Copy to Clipboard';
    }, 2000);
  }); 
</script>'''

var html = html.replace("$$REQUEST$$", request);

pm.visualizer.set(html, pm.request)

You can also set the html as a variable to make the code cleaner.