背景
在全栈开发之路上，掌握代码的调试技能是十分必要的。也许你会说，调试不就是看log 信息吗？ 不错， 通过log 排查错误，省事又省力。 问题在于，我们有时在server.js 输出log，有时在controller.js 文件中输出log；有时在终端窗口查看log，而有时，又需要在 chrome浏览器的 console中查看log， 看上去好复杂，有什么规律可寻吗？ 这就是本章的主要内容。
server.js 代码在终端窗口查看
先来看一段代码， server.js 下：
app.post('/contactlist',function(req,res)
{
console.log("this is a post request");
console.log(req.body);
db.contactList.insert(req.body,function(err,doc)
{
res.json(doc);
console.log("already insert");
});
});
如果程序正常运行，在电脑终端窗口, 会输出以下log信息：
this is a post request
{ name: '1111', email: '111', number: '111' }
already insert
public 目录下的 controller.js 代码，需要在浏览器的console 中查看
究竟在哪里查看log信息，取决于log所在js文件处于哪个路径下。 我们知道， 在 server.js中有一个静态资源的路径设置，代码如下：
app.use(express.static (__dirname + "/public"));
对应于具体的工程路径，在public 文件夹下的js文件中的log，都需要在浏览器的console中查看log信息， public 路径如下：
public -> controllers-> controller.js 代码如下:
var myApp=angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http)
{
var refresh=function()
{
$http.get('/contactlist').success(function(response)
{
console.log("I get the data from I request");
$scope.contactList=response;
$scope.contact='';
});
};
refresh();
$scope.addContact=function()
{
console.log("contact button is clicked");
console.log($scope.contact);
$http.post('/contactlist',$scope.contact).success(
function(response){
console.log(response);
refresh();});
};
}]);
这里面的log信息，需要在浏览器查看。 代码：
console.log("contact button is clicked");
console.log($scope.contact);
我们再来浏览器上的log输出信息 ， mac下的组合键：（option + command + I）如下：
小结
学习全栈开发， 必须掌握基本的调试技能，包括终端窗口的log输出、chrome浏览器上的console 上的log输出。有了调试技能， 再复杂的bug，也可以通过调试来解决。
参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》
更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。
