Enabling Chrome Developer Tools inside Postman

Avatar

Chrome’s Developer Tools are an indispensable part of the modern web development workflow. However, accessing them inside the Postman packaged app takes a few steps. To enable them:

  1. Type chrome://flags inside your Chrome URL window
  2. Search for “packed” or try to find the “Enable debugging for packed apps” setting
  3. Enable the setting
  4. Restart Chrome

chrome___flags

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.

Developer Tools inside Chrome are really powerful and now with the ability to write test scripts inside Postman, you can use them for debugging and logging. For more information on Chrome Developer Tools, check out these tutorials.

Tags:

Comment

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.

22 thoughts on “Enabling Chrome Developer Tools inside Postman

    Avatar

    How can we see the log/dev tools from the packaged version of postman? Or is this possible.

      Avatar

      It’s available in the packaged app too as indicated in the article above.

        Avatar

        The blog requires and email address to view, no thank you, anyway Postman can do a blog post on how to log more info about the collection runner test results

    Avatar

    I have written a guide to help you all.
    Let me know if you find it useful:

    http://blog.vanamco.com/chrome-devtools-features-making-web-dev-efficient/

    Thanks

    Avatar

    Seems like a good idea but can’t get it to work. Specifically I can’t open the context menu in Postman to inspect the DOM. I’m working on a Mac. Don’t know if this is a general problem.

      Avatar

      Seems to be working fine for me. Are you able to follow the steps in the blog?

    Avatar

    I’ve come here to find a way to see tv4’s validation errors when validating the JSON payload being returned. The above helped to see the errors in the console. I wanted to see them in the test results and managed to do so via

    var data = JSON.parse(responseBody);

    var result = tv4.validateResult(data, schema);

    var isValid = result.valid

    if (!isValid) {

    tests[“Invalid Schema: ” + result.error + ” at ” + result.error.dataPath + ” (” + result.error.schemaPath + “)”] = isValid;

    }

    else {

    tests[“Valid Schema”] = isValid;

    }

    to circumvent the limitation of outputting validation results.

    Might be useful to somebody passing by.

    Avatar

    How do you make this work for the other version of postman? How do you call that? The unpackaged version?

    I also tried this on the packaged version and I think I’m missing something here. I’m getting a “Defining mode” output instead of the expected output of “console.log(‘test’)”.

    What am I doing wrong?

    Avatar

    This does not show the original XHR request headers, it’s only showing the contents of the response.html file and a GET request to it.

    Avatar

    It would be great if you can attach the snapshots for using it.

    Avatar

    postman can’t sent any request

    extensions::platformApp:17 window.localStorage is not available in packaged apps. Use chrome.storage.local instead.(anonymous function) @ extensions::platformApp:17

    extensions::platformApp:17 beforeunload is not available in packaged apps.(anonymous function) @ extensions::platformApp:17

    Avatar

    I go to chrome://inspect/#apps and I don’t see Postman there. Is is possible it’s not really a Chrome app?

      Avatar

      You probably are using the Postman new App.
      Go to View -> Show Dev Tools
      or
      Go to View -> Show Postman Console

      It should work for you.

        Avatar

        Could you please specify where I can find “View” menu?

        Have the same issue – can’t find a console for Postman 🙁

        I”m using the newest app – 4.9.2 for now.

        Avatar

        Could you please specify where I can find “View” menu?

        Have the same issue – can’t find a console for Postman 🙁

        I”m using the newest app – 4.9.2 for now.

          Avatar

          I’m on MAC, I believe you are on Windows.
          I’m sorry I can’t help you, but try find on the top menus.

    Avatar

    > 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.

    Looks like this isn’t possible in the latest version of Postman 5.5.0. I followed these steps in Chrome 63 on Windows 10, enabled the flag, re-opened Postman ensuring I have the latest version installed and right clicking isn’t possible at all. No context menu and thus no “inspect” option.

    Avatar

    This is excellent for bandwith throttling in Postman

    Avatar

    Doesn’t work for me after step 4. Putting “chrome://inspect/#apps” shows a blank page after restarting chrome.

    Using macos 10.13.5 with chrome version 67.0.3396.99 (Official Build) (64-bit)

    Avatar

    the postman developer tools network tab shows everything but the request to the API. not useful.

    Avatar

    Blog is deprecated. See the postman console instead: https://blog.postman.com/the-postman-console/

    Avatar

    This appears to be out of date now.