Chrome开发者工具默认内置，无需配置；需关闭缓存、禁用预加载、启用本地HTTP服务器（如python3 -m http.server），并确保缩放为100%以保障调试准确性。
Chrome 开发者工具默认就开着，不用“配置”
Chrome 浏览器本身不需额外安装或“配置”才能用于 HTML 开发——DevTools 是内置的，按 F12 或 Ctrl+Shift+I（Windows/Linux）/Cmd+Option+I（macOS）就能呼出。所谓“配置环境”，实际是调优几个关键设置，让开发更顺手、少踩坑。
必须关掉的两个默认选项：缓存和预加载
本地写 HTML 时，Chrome 默认会缓存资源、甚至预加载脚本，导致你改了 index.html 或 script.js 却看不到效果，误以为代码错了。
- 打开
DevTools→ 点右上角 ⋯ → Settings → 勾选Disable cache (while DevTools is open) - 在
Network标签页，勾选Disable cache（这个开关只在 DevTools 打开时生效） - 顺手关掉
Enable network request prefetching（在 Settings →Preferences底部），否则 Chrome 可能提前加载你还没保存的 JS 文件
本地文件打开时，fetch 和 XMLHttpRequest 会失败
直接双击打开 file:///path/to/index.html，所有跨源请求（包括读取本地 JSON、CSV）都会被拦截，报错：Failed to load resource: net::ERR_FAILED 或 Cross origin requests are only supported for protocol schemes。
- 这不是 bug，是 Chrome 的安全限制：
file://协议下无 origin，fetch被禁用 - 正确做法：起一个本地服务器。最轻量的是用
python3 -m http.server 8000（Python 3.7+ 自带），然后访问http://localhost:8000 - 别用
live-server之类 npm 工具——它底层也是起 HTTP 服务，但多一层依赖，出问题时排查路径更长
字体、缩放、设备模拟这些细节影响调试准确性
你在编辑器里写的像素值，可能因为系统缩放或 Chrome 字体渲染差异看起来“不准”，尤其做响应式或 CSS 动画时。
立即学习“前端免费学习笔记（深入）”；
- 确保 Chrome 缩放为
100%（右上角三个点 →Zoom→ 设为100%），否则devicePixelRatio和媒体查询可能误判 - 在
DevTools → Settings → Preferences中，关闭Emulate a low-end device（默认关着，但有人误开后发现性能突然变差） -
Rendering标签页（Cmd+Shift+P输入 “Rendering” 呼出）可临时开启Paint flashing，看哪些区域被重绘——对优化 CSS 动画很实用
Ctrl+R），而不是依赖自动重载——本地开发没热更新，这点得习惯。 
