Handy Chrome Dev Tools, I never knew existed!

1. Capture and Replay HTTP API Requests

Using the Network tab in Chrome Dev tools you can capture a request paste it into the console, modifying as required, and then run it, here are the steps:

  1. Click on the Network tab.
  2. Locate the request you would like to re-run.
  3. Right click on the request Copy -> Copy as fetch.
  4. Paste the request into the console and edit if required i.e changing parameters id submitting details to an api etc.
  5. Simply run the modified request.

2. Emulate CSS print media type

While working on a site requiring specific printed media styling you need to be able to easily view the styled markup during development. Thankfully chrome, ff, safari, and edge have built-in dev tools to support this. Here is how to achieve this with Chrome:

  1. With Google Chrome open, press F12 on your keyboard to open Dev Tools.
  2. Click on the menu at the top right – (Customize and Control DevTools).
  3. Select More Tools -> Rendering this will open the rending window.
  4. Scroll down to the Emulate CSS media type option and Select Print from the emulation dropdown.

Who Knew!! “¯\_(ツ)_/¯“