必须用http服务（如npx serve）替代双击打开本地html文件，否则file://协议限制导致network空白、console报错、elements修改无效；访问http://localhost:8000后f12调试才可真实验证资源加载与dom变更。
想在百度浏览器里调试双击打开的本地HTML文件，必须先让开发者工具能正常加载资源、执行脚本并显示真实DOM结构，否则Network面板空白、console报错、Elements修改无响应。
确认本地文件协议限制已知
双击打开的HTML文件地址栏显示为file:///D:/xxx/index.html，此时浏览器默认禁用fetch、XMLHttpRequest、ES模块导入和部分localStorage操作——【这不是bug，而是file://协议的同源策略强制行为】。直接按F12打开的开发者工具会显示Elements，但Network标签页始终为空，Console可能报“Access to script at 'file://' is denied”。
这一步不做判断就动手调试，90%的问题会误判为代码错误。
用HTTP服务替代双击打开
第一步：确保电脑已安装Node.js → 打开命令行（Windows用CMD或PowerShell，macOS/Linux用终端）→ 进入你的HTML文件所在目录 → 执行：npx serve -p 8000。
第二步：等待命令行输出http://localhost:8000 → 在百度浏览器中访问该地址，而不是双击文件。
第三步：此时地址栏变为http://localhost:8000/index.html → 按F12打开开发者工具 → 切换到Network标签页，刷新页面，所有CSS/JS/图片请求都会正常显示，404路径一目了然。
不走这一步，Elements里改了HTML、Styles里调了颜色，都只是内存临时效果，无法验证资源是否真能加载成功。
快速唤起开发者工具的三种方式
方法一：焦点落在网页内容区（不要在地址栏或标签页上）→ 直接按F12。
方法二：在页面任意可见文字、按钮或图片上右键 → 选择【检查】→ 自动高亮对应HTML节点并定位到Elements面板。
方法三：点击浏览器右上角“≡”菜单 → 将鼠标悬停在“更多工具” → 点击【开发者工具】。
注意：如果F12没反应，先点一下页面空白处再试；部分笔记本需同时按Fn+F12。
调试时必须盯住的三个面板
Elements：双击文本或属性值可直接编辑，改完回车即生效；右侧Styles区域可实时增删CSS规则，勾选/取消复选框立刻看到样式变化。
Console：输入document.body.innerHTML回车，输出的是当前真实渲染后的HTML结构，不是你原始文件的内容——这是验证JS是否动态改过DOM的最简方式。
Network：刷新后看第一个document请求的状态码和时间，若显示failed或pending，说明HTML文件本身未正确返回；点击其他JS/CSS条目，看Preview或Response标签页是否显示预期内容，【空Preview=路径错误或404，乱码Response=文件编码非UTF-8】。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
