How To Debug A Web Page Remotely With Chrome Dev Tools


Chrome’s Dev tools support remote debugging but not how we would like them to. The ‘remote’ means on a device that you have right next to you and that you can connect to your development machine. It doesn’t mean you can debug a Chrome tab that your friend who is currently sitting in a different coffee shop has open. So, what to do if the two of you are working on something together and you need to perhaps access, maybe even debug, the other’s tab. DevTools Remote is a Chrome extension that lets you share a remote session for a selected tab with anyone via a link. The link opens inside the Chrome Dev Tools and gives the recipient control over the tab. They see your dev console and can make changes to it among other things.

Install DevTools Remote and open a web page in a new tab. Click the DevTools Remote icon next to the URL bar and wait until the tiny little progress bars read ‘Copied’. The remote session link has been copied to your clipboard. Send the link to whoever you need to debug your tab.

DevTools Remote-link-session

On the recipient side, the page complete with the URL will appear and a fully functional chrome dev console will open. You’re recipient is free to mess around with it as much as they want and it’s smart enough to tell them when the tab you shared isn’t active on your screen.

DevTools Remote

The extension is pretty awesome and it’s beyond easy to set up. You’re the only who needs to have it installed on your system. Your recipient isn’t bound by any such restrictions. If on the recipient side the page doesn’t load immediately, simply resize the window a bit and it will appear.

Install DevTools Remote From The Chrome Web Store