在桌面端，如何查看手机版网站的源代码

Question

我创建了一个网站，根据用户使用的是台式机还是移动设备显示不同的源代码。

在桌面版Chrome中，我可以轻松查看任何网站桌面版的源代码，只需右键单击网站上的任意位置，然后选择"View Page Source"。

在Chrome桌面端，有没有办法可以查看手机版网站的源代码？我知道在开发人员工具中，我可以使用移动模拟器查看网站，并且可以检查呈现给移动浏览器的元素。但是，我还没有想出如何查看呈现给移动浏览器的原始源代码。

Answer 1

你可以查看https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en

基本上，您将手机连接到您 pc/mac，然后您可以使用桌面 chrome 检查您使用手机呈现的页面，甚至可以从那里控制它。

Answer 2

我一直无法找到可靠的解决方案，所以最终在终端中使用 curl：

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

为了方便可以保存为一个简单的bash脚本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"

例如./fetch-mob-src.sh https://url/to/inspect

Answer 3

查看手机版原始源码。在开发人员工具 window 的“网络”选项卡上，select 请求检索感兴趣的页面。

在右窗格中，激活响应选项卡。原始来源在 Response payload window.

在桌面端，如何查看手机版网站的源代码

on desktop, how to view the source code of the mobile version of a website

html

mobile

google-chrome

view-source

google-chrome-devtools