What "Link" does in browser developer tools

Link in browser developer tools creates a live connection between the code you see on your screen and the files stored on your computer or server. When you use Link, changes you make in the developer tools when ready show up in your actual website files — and changes you make in your code editor show up in the browser without refreshing the page.

This matters because it collapses the gap between writing code and seeing what it does. Without Link, you edit a file, save it, switch to the browser, refresh the page, and wait. With Link, you edit in one place and watch the result appear in the other, which means you catch mistakes faster and test variations without losing your place.

Different browsers call this feature by different names. Chrome and Edge call it Local Overrides or Overrides. Firefox calls it Persistent Storage or uses its Inspector with file watching. Safari's Web Inspector has Local Overrides as well. The core idea is the same across all of them: map a folder on your computer to a URL in the browser so edits sync both directions.

Key Takeaways

  • Link creates a two-way connection between files on your computer and code running in the browser, so edits in either place show up when ready in the other.
  • Chrome and Edge use Local Overrides; Firefox uses file watching in the Inspector; Safari uses Local Overrides — all do the same job with slightly different steps.
  • You need a code editor (VS Code, Sublime Text, or similar) open at the same time as your browser for Link to work.
  • Link is most useful when you are testing CSS, HTML, or JavaScript changes on a live website without touching the actual server files.

Setting up Link in Chrome or Edge

Open the website you want to test in Chrome or Edge. Right-click anywhere on the page and select Inspect to open the developer tools. Click the Sources tab at the top of the developer tools panel.

On the left side of the Sources tab, you will see a list of folders and files. Click the Overrides tab (it may be labeled as a folder icon or text, depending on your browser version). Click + Select folder for overrides and choose an empty folder on your computer where you want to store the test files. The browser will ask permission to access that folder — click Allow.

Now navigate to the file you want to edit in the Sources tab. Right-click the file name and select Override contents. The browser copies that file into your override folder and creates a link between them. Any change you make in the developer tools will now save to that folder automatically, and the page will update without a refresh.

Setting up Link in Firefox

Open Firefox and navigate to the website you want to test. Press F12 or right-click and select Inspect to open the developer tools. Click the Inspector tab.

In the Inspector, find the file or element you want to edit. Click the file name or path shown at the top of the Inspector panel. Firefox will open the file in the editor view. Make your changes directly in the Inspector's code view. Firefox does not automatically sync these changes back to a folder on your computer the way Chrome does, but it will keep your edits in memory for the current session.

If you want persistent storage across sessions, you can use Firefox's Storage tab to inspect what is saved locally, but for true two-way file linking, many Firefox users pair the browser with a code editor that watches for file changes and reloads the page automatically (using tools like Live Server or similar extensions).

Setting up Link in Safari

Open Safari and enable the developer tools by pressing Command + Option + I (on Mac) or F12 (on Windows). Click the Storage tab, then look for Local Storage or Session Storage to see what data the page has stored.

For file-level linking similar to Chrome's Overrides, Safari's approach is less direct. Instead, many Safari users use a code editor with a live reload extension or run a local development server (like Python's built-in server or Node.js) that watches for file changes and refreshes the browser automatically. This achieves the same effect as Link: edit a file, see the change when ready in the browser.

What you can and cannot change with Link

Link works best for CSS, HTML, and JavaScript files that are loaded directly by the page. You can edit stylesheets, change HTML structure, and modify scripts without touching the server. Changes appear when ready, and you can test variations quickly.

Link does not work for files that are generated on the server (like PHP, Python, or Node.js backend code) or for assets that are compiled or bundled before being sent to the browser. If a website uses a build tool like Webpack or Vite, Link will show you the compiled output, not the source code you actually want to edit. In those cases, you need to run the build tool locally and use its own hot-reload feature instead.

Link also does not change what the server sends to other users. Your overrides are local only — they affect only your browser on your computer. Once you close the override or clear your browser cache, the changes disappear.

Common reasons Link does not work

If you set up Link but changes are not appearing, check whether the browser has permission to access your override folder. On Windows, right-click the folder, select Properties, and make sure your user account has Full Control permissions. On Mac, open System Preferences > Security & Privacy > Files and Folders and grant the browser access to the folder.

Another common issue is that the file you are trying to override is not the one actually being loaded. Open the Network tab in developer tools, reload the page, and look at the actual URL of the file being requested. Make sure you are overriding the right file path. If the file is loaded from a CDN or a different domain, Link may not work because of browser security rules.

If you are using a local development server (like localhost:3000), make sure the server is still running. If the server stops, the page will not load, and Link cannot work. Restart the server and reload the page in the browser.

When to use Link instead of editing files directly

Use Link when you are testing changes on a live website or a staging server and you want to see the result when ready without deploying. It is also useful when you are debugging a problem that only appears in a specific browser or on a specific device — you can make changes in the developer tools and test them when ready.

Do not use Link as your main editing method. Always make your real changes in your code editor and commit them to version control. Link is a testing tool, not a development tool. Once you close the browser or clear your cache, your Link changes are gone. If you forget to copy your changes back to your actual code files, you will lose them.

If you are working on a local project (files on your computer, not a live server), it is usually faster to use a code editor with a built-in live reload feature or a tool like Live Server. These watch your files for changes and refresh the browser automatically, which gives you the same when ready feedback without the extra setup of Link.

Frequently Asked Questions

Can I use Link on a website I do not own?

Yes. Link creates changes only in your browser on your computer. Other people visiting the same website will see the original files, not your overrides. This makes Link useful for testing how a website might look with different CSS or for understanding how a third-party site works.

Do I need to know how to code to use Link?

You need to understand basic HTML, CSS, or JavaScript to make useful changes, but you do not need to be an informed. The developer tools show you the code that is already there, so you can edit it, test it, and see what breaks. That is how many people learn.

Will my Link changes affect the actual website for other users?

No. Link changes are stored only on your computer in the folder you selected. Other users see the original files from the server. Your changes disappear when you close the browser or clear your override folder.

What is the difference between Link and just editing the code in the developer tools directly?

Editing in the developer tools alone does not save your changes — they disappear when you refresh the page. Link saves your changes to a folder on your computer, so they persist across refreshes and browser sessions until you delete them.

Can I use Link with a local development server?

Yes, but it is usually unnecessary. If you are running a local server (like localhost:3000), your code editor and the server are already watching your files. Most local servers have built-in hot reload, which is faster and simpler than setting up Link.