An extension to modify the web server's response in place, for debugging possibly-not-your-own website.

1. Install DITM from Firefox Add-ons: https://addons.mozilla.org/en-US/firefox/addon/ditm/

1. Open the web page
2. Open Developer Tools
3. Choose "DITM" tab in the Developer Tools
4. Select the resource that you want to modify the response, by either:
   • Select from "Used" resource list
   • Type URL, and hit "Reload from URL" or Enter to load the content
5. modify the content shown in the text area
6. Hit "Save" (✓) button
7. Reload the web page

1. Open the web page
2. Open Developer Tools
3. Choose "DITM" tab in the Developer Tools
4. Select the resource that you want to replace the response, by either:
   • Select from "Used" resource list
   • Type URL, and hit "Reload from URL" or Enter to load the content
5. Select "URL" tab
6. Enter the URL that returns the replacement body
7. Hit "Save" (✓) button
8. Reload the web page

Unfortunately DITM cannot read local file, but you can run local web server and use the response.

The simple way is to use Python 3's http.server module.

$ cd {DIRECTORY_THAT_CONTAINS_THE_FILE}
$ python3 -m http.server 8000

And use http://localhost:8000/{FILENAME}.

Apply "replace the response with local file" for all files used in the page, with the following steps:

1. Open the web page
2. Open Developer Tools
3. Choose "DITM" tab in the Developer Tools
4. Select "Replicate" tab
5. Hit "Download script and start mapping URLs" button
6. Save ditm-replicate.py in temporary directory
7. Run python3 ditm-replicate.py to extract the files, and run the local server
8. Reload the web page

1. Run python3 ditm-replicate.py to extract the files, and run the local server
2. Open Developer Tools
3. Choose "DITM" tab in the Developer Tools
4. Drag and drop ditm-replicate/ditm-replicate.json file into DITM pane

1. Open the web page
2. Open Developer Tools
3. Choose "DITM" tab in the Developer Tools
4. Select "Log" tab

The following files are imported from https://hg.mozilla.org/mozilla-central/

• pretty-print-worker.js
• devtools-common.css
• devtools-splitters.css
• devtools-variables.css
• devtools-toolbars.css
• devtools-tooltips.css
• debugger-variables.css
• debugger-Tabs.css
• debugger-App.css
• devtools-theme.css (partially)
• prettyPrint-dark.svg
• prettyPrint-light.svg

The following icons are imported from Photon Icons

• check-dark.svg
• check-light.svg
• clear-dark.svg
• clear-light.svg
• more-dark.svg
• more-light.svg
• refresh-dark.svg
• refresh-light.svg