全栈技术调试技巧 —— 实例讲解
背景
在学习全栈框架时，需要掌握一些常用的技巧。 其实，这些技巧也是前端调试的技巧。 主要包括： 网络请求、数据库的操作，数据绑定等。
因为 JS 没有编译器环境，一切调试都要在浏览器中进行， 而且报错有时诡异，需要在实战中不断记录。
这里以 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》第10章——应用实例 2 ——记事本为例。 模拟初学者遇到的“坑”。
1. 报错信息 —— 报 500错误
image.png
排查原因： 报错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 按钮， 出现以下错误：
image.png
ReferenceError: scope is not defined
这说明，所用到的 scope 没有定义， 这个容易排查，点击
at n.$scope.save ((index):65)
image.png
这说明， 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
image.png
出现这种 not defined （未定义）：
ReferenceError: Todo is not defined
at n.$scope.save ((index):70)
这类错误并不可怕。 顺藤摸瓜，点击 （index）:70 所在行，展开，看到源码：
image.png
排查： 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 ），刷新页面。
终于调试成功， 页面如下：
image.png
小结
前端调试，并不可怕。 Chrome 浏览器足够强大， 只要不断积累，定能驾轻就熟！
参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》
更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。
