How to Intercept and Mock a Request with Tweak

---

Introduction

The video kicks off with the host saying:

"Today I'm going to show you how you can mock a request with Tweak."

This sets the stage for a step-by-step tutorial on using the Tweak browser extension to intercept and mock HTTP requests in a web application. 🚀

---

Demo Application Overview

The host introduces the demo setup:

"Here is the application we use to demo the extension. On the left you have a simple UI that will display the data from our request once you click this button: Get Characters."

• Key Point: The application has a button labeled Get Characters. When clicked, it fetches and displays data from a server.

---

Choosing a Request to Mock

The host explains the plan:

"Let's try to mock one of the two requests. We're going to focus on the one with the name 583."

• Emphasis: The focus is on a specific request, identified by the property name: 583.

---

Copying the Response Data

Next, the host prepares for mocking:

"I'm going to copy the response data of this request."

• Key Step: Copy the JSON response from the network panel for the chosen request.

---

Setting Up Tweak

The host walks through the Tweak setup:

"We open Tweak and add a new rule."

• Action: Open the Tweak extension and create a new rule to intercept the request.

---

Configuring the Rule

The host details the configuration:

"We type part of the URL of the request that we want to mock, just enough so that we can identify the particular request."

• Tip: You only need to enter enough of the URL to uniquely identify the request you want to intercept.

"We can change the method accordingly, but in this example we're intercepting a GET request."

• Note: The method is set to GET since that's the type of request being mocked.

---

Editing the Mock Response

The host continues:

"We go over the JSON editor and paste the response payload that we've copied before."

• Action: Paste the copied JSON into Tweak's response editor.

"I'll duplicate this request so that we're able to compare them by the end of the video."

• Pro Tip: Duplicate the rule for comparison later.

---

Modifying the Response

The host demonstrates how to change the data:

"In the response payload, I'm going to change the property name to 'Tweak works.'"

• Key Learning: You can edit any part of the response. Here, the name property is changed to Tweak works.

---

Enabling the Extension

The host enables the rule:

"We enable the extension."

• Action: Turn on the Tweak rule to start intercepting requests.

---

Testing the Mock

The host tests the setup:

"We go back to the website and we click Get Characters data, which will trigger another request. The name changed to 'Tweak works' and the extension has now a badge with value one, which is the number of requests intercepted up until now."

• Result: When the button is clicked, the UI now shows Tweak works instead of the original value.
• Visual Cue: The Tweak extension icon displays a badge with the number 1, indicating one request intercepted. 🟢

---

Observing the Network Panel

The host points out an important effect:

"Notice that on the dev tools panel the original request is no longer listed. That's because the extension blocks it from going out, replacing your server completely."

• Key Insight: The original network request is blocked; the response comes entirely from Tweak.

---

Reviewing the Intercepted Requests

The host checks Tweak's dashboard:

"If you open Tweak again, you'll notice that in this rule we have exactly one request intercepted and other rules have zero requests intercepted."

• Observation: Tweak tracks the number of intercepted requests per rule, making it easy to monitor activity.

---

Wrapping Up

The host concludes:

"In the description you can find links to Tweak and other videos. Ciao!"

• Tip: Check the video description for useful links and further resources.

---

Key Takeaways

• Tweak lets you intercept and mock HTTP requests easily.
• You can target specific requests by URL and method.
• Edit the response payload to test different scenarios.
• The extension blocks the real request and serves your mock data.
• Track intercepted requests with Tweak's built-in counter.

---

"The name changed to 'Tweak works' and the extension has now a badge with value one, which is the number of requests intercepted up until now."

"Notice that on the dev tools panel the original request is no longer listed. That's because the extension blocks it from going out, replacing your server completely."

---

Now you know how to intercept and mock requests with Tweak! 🎉
Give it a try and supercharge your web development workflow