在桌面上，如何查看移动版网站的源代码

Question

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

在桌面版Chrome中，我可以轻松查看任何网站的桌面版源代码，只需在网站上右键单击，然后选择“查看页面源代码”。

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

- Leo Galleguillos

---

有些网站只使用CSS选择器来区分移动端和桌面端，即@media。请检查CSS样式表。 - Oisin

这是一个重复的问题，https://dev59.com/S2Af5IYBdhLWcg3wMwbX?rq=1 - mlegg

不，这不是一个重复的问题。你链接的那个问题是关于在移动浏览器中查看移动设备上的源代码。我正在询问如何在桌面上查看移动模拟器的源代码。 - Leo Galleguillos

Answer 1

查看移动版的原始源代码。从开发者工具窗口中，在网络选项卡上，选择检索感兴趣页面的请求。

在右侧窗格中，激活响应选项卡。原始源代码位于响应有效载荷窗口中。

- Zamrony P. Juhara

Answer 2

你可以查看https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en 基本上，你将手机连接到电脑或Mac上，然后可以使用桌面版Chrome检查你在手机上呈现的页面，甚至可以从那里控制它。

- Alex Ballas

Answer 3

我一直找不到可靠的解决方案，最后只能在终端中使用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" $1

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

- Brandon Hill