2.6 常见错误与定位方法

原创声明。未经许可，不得转载，作者：小步教程。

本教程的常见错误会以正确代码为基础，故意制造错误进行说明，方便快速理解。错误讲解包括4个部分：（1）错误动作（即错误原因）、（2）问题现象、（3）问题分析与定位、（4）解决方法。解决方法通常省略，因为故意制造、天然就明确解决方法。

关键在于问题分析与定位，将介绍分析工具、分析方法来进行问题的定位，以及说明背后的原理。

2.6.1 DevError001 修改代码但不保存文件

如果设置VSCode自动保存文件，先取消自动保存。

DevError001错误原因：修改代码但不保存文件。

修改代码如下

<body>
  即将开发小步教程企业简介小项目。
</body>

问题现象。浏览器页面内容没有刷新。

问题分析。检查代码是否保存，检查浏览器运行的页面代码。

定位方法1。VSCode查看文件状态。

选项卡的白色圆圈表示已修改但没保存，成功定位问题。

定位方法2。Chrome查看源文件。

“右键”—“查看网页源代码”。

查看当前请求页面代码。

下方script节点是Live Server插件自动添加代码，实现自动刷新。HTML代码并没有同步修改。再借助第1种方法定位问题。解决方法：略。

定位方法3：开发者工具查看“元素”面板的DOM结构。后续具体介绍。

DevError002错误原因： “Stop Live Server”停止服务。

问题现象。修改代码保存文件，页面不刷新。

问题分析。VSCode已经保存代码，查看浏览器的网页源代码不一致，说明Live Server服务器可能出现问题，是否已经停止Live Server。

定位方法1。查看Live Server的运行状态。

“Go Live”表示当前未运行，单击它运行Live Server；运行后显示“Port：端口”，单击它能停止Live Server。

定位方法2：F5刷新页面，提示“无法访问此网站”，说明Live Server服务已停止。

DevError003错误原因：Windows资源管理器双击html文件打开页面。

错误现象。修改保存代码，无法自动刷新，需要F5才能刷新。

定位方法1。检查地址栏。

正错的访问形式 http://127.0.0.1:12345/hello.html ，以ip+端口开头。

定位方法2：“查看网页源代码”。

body元素结尾没有Live Server的script代码，说明不是通过Live Server运行网页，不会自动刷新。