Modify JS code in the browser
Have you ever needed to debug a production JavaScript issue but couldn't modify the source code directly? Chrome's Overrides feature is here to save the day! This powerful tool allows you to persist JavaScript changes between page reloads, even when you don't have direct access to the original source files.
Here are the steps:
- Open DevTools > Sources panel
- Click "Overrides" tab (>> if hidden)
- Select a local folder (grant permission when prompted)
- Edit any JS file in Sources > Page
- Save (Cmd+S) - a purple dot indicates override active
You can reload the page and your change will be persisted locally and executed in the browser.
Remember to delete your overrides once you're done.
Happy debugging! 🛠️