12

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?

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

4 Answers 4

Reset to default
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.

Improve this answer
5
  • 2
    It works! At least you can edit the page text and delete objects from the page.
    – Jerry101
    Commented May 3, 2015 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
    Commented May 3, 2015 at 17:33
  • Yes, you're right, I missed the stripping part since the URL was too long.
    – Bibz
    Commented May 3, 2015 at 17:38
  • Where is this so called "print" located, and how do I review the real website with my edits in place?
    – Tom
    Commented Jan 14, 2021 at 15:26
  • @Tom In the [...] menu of Chrome
    – Danny Beckett
    Commented May 2, 2021 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.

Improve this answer
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
    Commented May 1, 2015 at 17:40
1

To stop editing the page, you can use this:

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

Improve this answer
0

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

Improve this answer
1
  • user218255 This works great. Thank you. But how to go back, after edditing the code? To see the changes. Stefan
    – Stefan
    Commented Jun 27, 2017 at 9:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .