浏览器控制台是执行js、查看报错和网络请求的唯一场所，非编辑器功能；打开方式：f12（win/linux）或cmd+option+i（macos），右键“检查”后切至console标签页。
HTML 编辑器本身（比如 VSCode、Sublime、Notepad++）没有控制台——console.log 不会在这里输出，也不会报错。真正能看报错、执行 JS、查网络请求的，是浏览器的开发者工具，不是编辑器。
怎么打开浏览器控制台？快捷键和入口最常用这三种
别在编辑器里找“控制台”按钮，直接切到浏览器操作：
- Chrome / Edge / Firefox：页面聚焦状态下按
F12（Windows/Linux）或Cmd+Option+I（macOS） - 右键网页任意空白处 → 选择「检查」→ 切到顶部的「控制台」标签页
- 地址栏输入
edge://inspect（Edge）或chrome://inspect（Chrome），适用于远程调试场景
注意：如果按 F12 没反应，先确认焦点在浏览器窗口内，而不是编辑器或系统其他应用中。
为什么改了 HTML/JS 却看不到 console.log 输出？
常见原因不是控制台没开，而是代码根本没运行：
-
script标签写在里，但 DOM 还没加载完，JS 就执行了（导致document.getElementById返回null） - 文件路径写错，比如
<script src="js/main.js"></script>中js/main.js实际不存在，Network 面板会显示 404 - 用了 ES6 语法（如
const、箭头函数），但浏览器版本太老（IE11 不支持） - VSCode 直接双击打开
.html文件，地址是file://协议，部分 API（如fetch）会被浏览器拒绝，控制台报DOMException: Failed to execute 'fetch'
Uncaught TypeError 和 Uncaught ReferenceError 怎么快速定位？
这类错误绝大多数发生在你写的 JS 代码里，关键看控制台第一行红字后的文件名和行号：
- 如果报错是
Uncaught TypeError: Cannot read property 'xxx' of undefined，大概率是对象没取到就直接访问属性，比如user.name前没判断user是否为null或undefined - 如果报错是
Uncaught ReferenceError: xxx is not defined，先搜整个文件，看xxx是不是拼错了（userNmaevsuserName），或者声明位置在使用之后（let/const的暂时性死区） - 堆栈里出现
at Array.map或at Promise.then，说明错误来自异步或高阶函数内部，得顺着调用链往回看上一层的源码行号
本地开发时控制台一直报 CORS，真是后端问题吗？
不一定。80% 的所谓 “CORS 报错” 其实是前端低级错误伪装的：
- axios 配置写成
methods: 'post'（多了一个s），实际应为method: 'post'，请求发不出去，浏览器 fallback 显示 CORS 错误 - URL 写成相对路径
/api/user，但你在本地双击打开 HTML，协议是file://，根本没走 HTTP，自然触发跨域限制 - Vue CLI 或 Vite 项目没启用代理，却把请求地址硬写成
http://localhost:3000/api，而开发服务器实际监听的是http://localhost:5173
真正该先做的，是点开 Network 面板，看这个请求有没有发出、状态码是多少、Headers 里有没有 Access-Control-Allow-Origin —— 如果请求压根没出现在 Network 里，就别急着改后端配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
