This tutorial explains how to debug a webpage remotely via Chrome DevTools.
We know Chrome provides its Developer tools (known as DevTools) feature to edit the webpage elements, design, and debug webpages. However, when you need to edit a remote webpage using this tool, it can’t be done natively. To make this possible, you can use a free Chrome extension, named DevTools Remote.
DevTools Remote Chrome extension generates a unique URL for the active tab or webpage. You just need to share that URL with the receiver (or say developer). After this, he/she can remotely control that webpage and use DevTools side by side. The receiver doesn’t have to install this extension, but he/she must be using Chrome browser, otherwise, the shared URL won’t work.
Above you can see a remote webpage and DevTools of Chrome browser, which was made possible by this extension.
Also, see some other important Chrome extensions: Web Developer, Chrome Remote Desktop, and Shove.
How To Debug A Webpage Remotely Via Chrome DevTools Using This Extension?
Step 1: Go to this link and install DevTools Remote extension on your Chrome browser. After installation, you can see its icon on the top right corner.
Step 2: Now open a webpage and click the extension icon. It will immediately generate a URL for that webpage and copy it to the clipboard. You will see ‘copied‘ text in Green color on the extension icon, which indicates that URL is generated and copied to the clipboard.
Step 3: When the receiver will open that URL, he/she can see that webpage and use DevTools together. Do not close the tab or switch to the other tab. Otherwise, the receiver won’t be able to debug it.
That’s it! Now let the receiver debug Chrome tab remotely and fix any errors that you might have been facing.
Conclusion:
Debugging a webpage remotely is made so easy by this Chrome extension. This is really useful for web developers to debug problems being faced by a specific user.
