3

I have created a website that displays different source code depending on whether the user is using a desktop or mobile device.

In Chrome on desktop, I can easily view the source code of the desktop version of any website simply by right-clicking anywhere on the website and then choosing "View Page Source".

In Chrome on desktop, is there a way that I can view the source code of the mobile version of a website? I know that in developer tools I can view websites using the mobile emulator, and I can inspect elements as rendered to the mobile browser. However, I have not yet figured out how to view the raw source code rendered to the mobile browser.

Leo Galleguillos
  • 1,810
  • 3
  • 16
  • 38
  • Some sites only use CSS selectors to differentiate between mobile and desktop ie @media. Check the CSS stylisheets. – Oisin Sep 08 '16 at 22:26
  • this is a duplicate of this question http://stackoverflow.com/questions/24905940/how-to-check-view-source-in-mobile-browsers-both-android-feature-phone?rq=1 – mlegg Sep 08 '16 at 22:28
  • 1
    No, this is not a duplicate question. The question you linked to asks about viewing source code on mobile devices in mobile browsers. I am asking about viewing source on desktop for the mobile emulator. – Leo Galleguillos Sep 09 '16 at 17:51

3 Answers3

2

To view raw source of mobile version. From developer tools window, on Network tab, select request that retrieve page of interest.

On right pane, activate Response tab. The original source is in Response payload window.

Zamrony P. Juhara
  • 4,834
  • 2
  • 22
  • 37
1

You can check https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en

Basically you connect your mobile to you pc/mac and you can use your desktop chrome to inspect the pages you render with your mobile and even control it from there.

Alex Ballas
  • 41
  • 6
0

I haven't been able to find a reliable solution so just end up using curl in the terminal:

curl -H "user-agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1" https://url/to/inspect

For ease can save as a simple bash script fetch-mob-src.sh:

#!/bin/bash
user_agent="Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
curl -XGET -H "user-agent: $user_agent" $1

E.g. ./fetch-mob-src.sh https://url/to/inspect

Brandon Hill
  • 1,468
  • 12
  • 12