vscode 无法模拟网速和设备，需依赖浏览器 devtools：network 面板设节流（如 slow 3g），toggle device toolbar 模拟视口与触控；务必使用 localhost 而非 127.0.0.1，并确保 viewport meta 标签正确。
VSCode 里没法直接模拟网速和设备，得靠浏览器 DevTools
VSCode 本身不提供网络节流或设备模拟功能——它不是浏览器。所有「模拟弱网」「切 iPhone 视口」「触发触摸事件」的操作，必须在运行中的浏览器里完成，VSCode 只负责写代码、启动服务（比如 npm run dev）和打开对应地址。
常见错误现象：装了各种 VSCode 扩展（如 Network Throttling 类名字的插件），发现完全没反应；或者点开扩展面板看到「Throttle: 3G」按钮，但刷新页面后网速毫无变化。
- 真正起作用的是 Chrome / Edge / Safari 的开发者工具（DevTools）里的
Network和Toggle device toolbar面板 - VSCode 唯一能配合的，是确保你用它启动的服务支持
localhost访问，并开启热重载（否则改完代码还得手动切浏览器刷新） - 如果你用的是
vite或create-react-app，默认已支持，无需额外配置；但某些自定义 Webpack 服务可能禁用了host或https，导致 DevTools 无法连接本地服务
Chrome DevTools 怎么开 3G/2G 网速并保持稳定
Chrome 的网络节流选项藏得浅但容易误用：选了预设档位（如 Fast 3G）后，只对当前标签页后续发起的请求生效，不会影响已加载的资源，也不会自动应用到新打开的页面。
- 打开 DevTools →
Network标签页 → 左上角下拉菜单选Slow 3G或Offline；不要选Online下面那个灰色的「无限制」——它其实是「不限速」，不是「真实网速」 - 节流只作用于「发起的新请求」：比如你已经打开了
http://localhost:5173，再选节流，JS/CSS 图片等静态资源不会重新下载；要测首屏加载，得清空缓存（勾选Disable cache）再Cmd+R（Mac）或Ctrl+R（Win）硬刷新 -
Slow 3G实际是 450ms RTT + 750kbps 下行，比真实老旧 3G 还慢一点；如果想更贴近弱网场景，点下拉菜单底部的Custom，手动填Download: 300kbps、Upload: 100kbps、Latency: 800ms - 注意：节流对
fetch、XMLHttpRequest、图片、字体都生效，但对WebSocket连接建立阶段的握手延迟不模拟——这点常被忽略，导致测试长连接超时逻辑出错
怎么让响应式调试不卡在「桌面视口」
按 Ctrl+Shift+M（Win/Linux）或 Cmd+Shift+M（Mac）唤出设备模拟器后，经常发现宽度固定在 1280px、缩放异常、触摸事件不触发——根本原因是没正确设置 <meta name="viewport">。
- 检查 HTML 中是否写了：
<meta name="viewport" content="width=device-width, initial-scale=1.0">；漏掉这行，Chrome 就会以桌面模式渲染，哪怕你选了 iPhone 14 - 设备列表里选
iPhone SE或Nexus 5后，右上角有三个点 →More options→ 勾选Enable touch events，否则ontouchstart监听器压根不会触发 - 如果页面用了
rem或vw布局，但设计稿按 375px 宽度切图，而模拟器显示 414px（iPhone 8+），记得在 CSS 里加max-width: 100vw防止横向滚动条意外出现 - 别依赖模拟器的「DPR（devicePixelRatio）」显示值来判断高清屏：Chrome 模拟的是逻辑像素，
window.devicePixelRatio在模拟 iPhone 时会返回2或3，但实际图片是否被@2x加载，取决于<img srcset>或 CSSimage-set()写法，不是模拟器决定的
为什么 localhost 能测，但 127.0.0.1 就不触发节流
Chrome 对 localhost 和 127.0.0.1 的网络策略不同：从 Chrome 94 开始，127.0.0.1 默认被归类为「非安全上下文」，部分节流策略（尤其是涉及 Service Worker 和离线缓存的组合场景）会被绕过。
- 开发时一律用
http://localhost:端口号，不要替换成http://127.0.0.1:端口号；Vite 默认就是localhost，但 Webpack DevServer 有时会默认绑定127.0.0.1，需在vue.config.js或vite.config.ts里显式写host: 'localhost' - 如果必须用
127.0.0.1（比如某些代理工具限制），可在 Chrome 启动时加参数：chrome.exe --unsafely-treat-insecure-origin-as-secure="http://127.0.0.1:3000" --user-data-dir=/tmp/chrome-test，但仅限本地调试，别加到日常 Chrome - 另一个隐藏坑：某些公司内网 DNS 把
localhost解析到了别的 IP，导致你以为在访问本地，其实请求发到了测试服务器——用 DevTools 的Network面板看每个请求的Remote Address列，确认是127.0.0.1:端口而不是10.x.x.x
设备模拟和网速节流本质是浏览器行为，VSCode 只是你的编辑器。真正在意加载性能或触控交互，就得盯着 DevTools 的 Network 和 Rendering 面板看每一帧、每一个请求——而不是找 VSCode 插件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
