How to edit or remove cookies in Firefox DevTools?

Editing or deleting cookies in Firefox DevTools is an intuitive and straightforward process. Here are the detailed steps:

Open Firefox DevTools

1. Open Firefox Browser: First, ensure Firefox is installed and ready to use.
2. Access the Website: Enter the URL of the website you want to inspect in the address bar and visit it.
3. Open Developer Tools:
   • Click the menu button in the top-right corner (three horizontal lines), select "Web Developer", then click "Toggle Toolbox", or
   • Use the keyboard shortcut Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).

View and Edit Cookies

1. Navigate to the 'Storage' Tab: In the DevTools top menu, select "Storage".
2. Select Cookies: In the left panel, locate the Cookies option and click on it for your website domain. This will display all relevant cookies in the right panel.
3. Edit Cookies:
   • Modify Existing Cookies: Double-click any field (e.g., value or expires) of the cookie you want to change, then edit directly. After making changes, simply click elsewhere or press Enter to save automatically.
   • Add New Cookies: Click the "Add" button to create a new cookie. Manually enter the cookie's name, value, domain, path, and other required details.

Delete Cookies

1. Delete Individually: Select a cookie, right-click, and choose "Delete", or press the Delete key after selection.
2. Delete All: To remove all cookies, click the "Clear All" button.

Example

Suppose I am developing an online shopping website and need to test the shopping cart feature. Shopping cart data is stored in cookies. I discover that some users report incorrect saving of cart information. To debug this, I might view and modify cookies to identify issues or delete erroneous cookies to verify if the website generates new data correctly.

By following these steps, I can easily view, edit, and delete cookies in Firefox DevTools, which is essential for front-end development and debugging.