VSCode运行html在不同分辨率下的调试方法-VSCode-PHP中文网

能，live server 本身不控制分辨率，但提供可被浏览器设备模拟器识别的本地服务；在 chrome 中按 f12 → ctrl+shift+m 切换设备模拟器，可手动输入分辨率、选预设机型或拖动缩放，真机预览需将 host 改为 0.0.0.0 并用局域网 ip 访问。

vscode运行html在不同分辨率下的调试方法

Live Server 默认只开一个本地地址（如 http://127.0.0.1:5500/index.html），它本身不控制分辨率，但提供了可被浏览器设备模拟器识别的本地服务——这是多分辨率调试的前提。

关键在于：必须用浏览器打开这个 http:// 地址，而不是 file:// 协议；否则 Chrome/Firefox 的设备模拟器会禁用或行为异常。

确保 HTML 文件里有正确的 <meta name="viewport" content="width=device-width, initial-scale=1">，否则模拟器缩放失效
在 Live Server 启动的页面中，按 F12 打开开发者工具 → 点击左上角的「切换设备模拟器」图标（Ctrl+Shift+M）
可手动输入分辨率（如 375x812）、选择预设机型（iPhone 14、Pixel 5），或拖动窗口边缘实时缩放
注意：某些 CSS 单位（如 vmin、vw）在模拟器中表现和真机一致，但 device-pixel-ratio 相关媒体查询需额外验证

Live Server 默认只监听 127.0.0.1，手机无法直连。需要改绑定地址并确认网络通路，否则输入 IP 后显示 “无法连接”。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

右键 VSCode 右下角 Go Live 按钮 → 选择 Open Settings → 搜索 liveServer.settings.host，改为 0.0.0.0
搜索 liveServer.settings.port，可固定为常用端口（如 5500），避免每次变
在电脑终端运行 ipconfig（Windows）或 ifconfig（macOS/Linux），找到局域网 IPv4 地址（不是 127.0.0.1 或 169.254.x.x）
手机浏览器访问 http://[你的IP]:5500/your-file.html，例如 http://192.168.1.105:5500/index.html
防火墙可能拦截：Windows 用户需在「高级安全 Windows 防火墙」中允许该端口入站

这不是代码问题，而是模拟器渲染机制差异导致的常见假阳性。Chrome 的设备模拟器会强制应用 UA 字符串和 DPR 值，但不会真实触发移动端的排版引擎路径（比如 iOS Safari 的 flex 行为、Android WebView 的字体度量）。

模拟器中 1px 边框可能被缩放成模糊线，真机是清晰物理像素 —— 用 transform: scaleY(0.5) + transform-origin 替代更稳妥
某些 @media (hover: hover) 查询在模拟器里恒为 true，真机触屏设备为 false
滚动粘性（position: sticky）在模拟器中可能不触发，建议用真机快速验证关键交互点
如果必须用模拟器比对，统一用 Chrome 最新版，并关闭「Throttling」和「Network condition」，避免干扰渲染

用 Live Server 启动页面后，再配 Debugger for Chrome/Edge 调试 JS，但断点常失效——多数是因为脚本未被正确映射到源码，或加载时机不对。

确保 launch.json 中配置了 "url": "http://localhost:5500/index.html"（不是 file:// 路径）
检查 HTML 中 script 标签是否含 type="module" 或 defer，这类脚本执行时机晚于 DOM 加载，断点需设在函数内部而非顶层
在开发者工具的「Sources」面板中，展开左侧 localhost:5500 → 找到你的 .js 文件，手动加断点，比 VSCode 自动映射更可靠
若使用动态插入 script（如 document.createElement('script')），需在插入前先用 debugger 语句暂停，再追加断点