全栈开发调试技巧——实例讲解（报500错误）

背景

在学习全栈框架时，需要掌握一些常用的技巧。 其实，这些技巧也是前端调试的技巧。 主要包括： 网络请求、数据库的操作，数据绑定等。

因为 JS 没有编译器环境，一切调试都要在浏览器中进行， 而且报错有时诡异，需要在实战中不断记录。

这里以 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》第10章——应用实例 2 ——记事本为例。 模拟初学者遇到的“坑”。

---

1. 报错信息 —— 报 500错误

排查原因： 报错500 是内部服务程序出了问题，报错500 比404 难以排查。
推理： 在访问 /todos 路由时，报错了。

顺藤摸瓜， 打开 routes -> todos.js 文件：

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Todo = require('../models/Todo.js');

router.get('/',function(req,res,next){
   Todos.find(function(err,todos){   
        if(err) return next(err);
        res.json(todos);
    });
});
.....

可以推断，问题肯定出在这个方法中：

router.get(‘/’,function(req,res,next) { } )

在仔细看这行代码：

Todos.find(function(err,todos)
这里是不该出现 Todos的，应该为 Todo.find

总结： 看似是笔误，实则是因为命名不规范造成的。 在这个实例中， Todos 是一个 factory 方法，而 Todo 是一个model， 只有model 才能操作mongodb 数据库， 所以，应改为：

> Todo.find(function(err,todos)

退出应用 （CTRL + C）， 再次启动（ npm start ），刷新页面，出现下面的报错：

报错 scope is not defined

点击 create 按钮， 出现以下错误：

ReferenceError: scope is not defined

这说明，所用到的 scope 没有定义， 这个容易排查，点击

at n.$scope.save ((index):65)

这说明， index.ejs 的65行出了问题：

if(! scope.newTodo || $scope.newTodo.length < 1) return;

排查： 一眼就能看出来， scope 前面应加上 $ 符号。 即：

if(! $scope.newTodo ||$scope.newTodo.length < 1) return;

总结: 需要牢记 AngularJS中几个常用的服务，service (服务) 前面一定要加上$， 比如：$htttp, $scope,$service。 尤其是 $scope .

---

退出应用 （CTRL + C）， 再次启动（ npm start ），刷新页面，出现下面的报错：

3 报错 —— Todo is not defined

出现这种 not defined （未定义）：

ReferenceError: Todo is not defined
at n.$scope.save ((index):70)

这类错误并不可怕。 顺藤摸瓜，点击 （index）:70 所在行，展开，看到源码：

排查： Todo 本来是一个 model， 这里所引用的是工厂方法 Todos, 如下：

app.controller('TodoController',['$scope','Todos',function($scope,Todos) { } ]);

这里的 Todo 应改为： Todos, 代码如下：

 var todo = new Todos({ name: $scope.newTodo, completed: false});

---

退出应用 （CTRL + C）， 再次启动（ npm start ），刷新页面。
终于调试成功， 页面如下：

小结

前端调试，并不可怕。 Chrome 浏览器足够强大， 只要不断积累，定能驾轻就熟！

---

参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》

---

更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。