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:
- Click on the Network tab.
- Locate the request you would like to re-run.
- Right click on the request Copy -> Copy as fetch.
- Paste the request into the console and edit if required i.e changing parameters id submitting details to an api etc.
- 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:
- With Google Chrome open, press F12 on your keyboard to open Dev Tools.
- Click on the menu at the top right – (Customize and Control DevTools).
- Select More Tools -> Rendering this will open the rending window.
- Scroll down to the Emulate CSS media type option and Select Print from the emulation dropdown.
Who Knew!! “¯\_(ツ)_/¯“