10

I want to temporarily edit the webpage displayed in Chrome on my phone, something similar to Chrome desktop's Inspect element feature. I understand this is temporary, but I want to do some tests.

I don't see that option in the application itself, do I need an extension, another app, or is it impossible?

  • Chrome web store (extensions) isn't available on Chrome for Android, and I haven't encountered any extension on the web too. – Firelord May 1 '15 at 14:21
7

Running the following snippet in the URL bar works in both Chrome for desktop and Android:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

One important note: after copying & pasting the code into the address bar, Chrome automatically strips the javascript: part of it out. You must add that back in or it won't work!

It's to prevent malicious code being run by dumb users who think they'll win an iPad or get +1,000 Facebook friends if they copy some dodgy JS into the address bar.

It has the affect that the whole page becomes editable.

You could then do Print > Save as PDF if you needed to save the edited webpage.


I'm a professional web developer so this definitely has its uses for me. Needless to say, I am not liable if you do something underhanded with this, e.g. falsifying a company's 'thanks, your order is confirmed ' page to defraud products from them with a faked screenshot/print out.

I originally got the code from Stack Overflow, where there are 28 such questions.

  • 2
    It works! At least you can edit the page text and delete objects from the page. – Jerry101 May 3 '15 at 0:51
  • 1
    I'm not sure how you got it to work, when I copy it to the adress bar it does a search for those terms in Chrome (both desktop and mobile versions). – Bibz May 3 '15 at 17:33
  • Yes, you're right, I missed the stripping part since the URL was too long. – Bibz May 3 '15 at 17:38
4

You may want to look at this official guide: Remote Debugging on Android with Chrome. It involves connecting your phone to a PC, and debugging the page using Chrome DevTools.

  • 1
    That is very interesting, but my hopes were to have an option using only the phone. If all else fails I'll try your method. Thanks. – Bibz May 1 '15 at 17:40
1

To stop editing the page, you can use this:

javascript:document.body.contentEditable = 'false'; document.designMode='off'; void 0

0

First add "view-source:" before "http://" Then type this in the address bar javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

  • user218255 This works great. Thank you. But how to go back, after edditing the code? To see the changes. Stefan – Stefan Jun 27 '17 at 9:33

protected by Community Jun 7 '18 at 10:29

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.