11

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?

1
  • 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
8

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.

5
  • 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
  • Where is this so called "print" located, and how do I review the real website with my edits in place?
    – Tom
    Jan 14 at 15:26
  • @Tom In the [...] menu of Chrome May 2 at 7:47
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
  • 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

1
  • 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

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