如何调试Node.js 代码 和 AnguarJS代码？

背景

在全栈开发之路上，掌握代码的调试技能是十分必要的。也许你会说，调试不就是看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 文件路径

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）如下：

chrome 上的console 输出的log

小结

学习全栈开发， 必须掌握基本的调试技能，包括终端窗口的log输出、chrome浏览器上的console 上的log输出。有了调试技能， 再复杂的bug，也可以通过调试来解决。

---

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

---

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