背景
在全棧開(kāi)發(fā)之路上砍聊，掌握代碼的調(diào)試技能是十分必要的。也許你會(huì)說(shuō)贰军，調(diào)試不就是看log 信息嗎玻蝌？ 不錯(cuò)， 通過(guò)log 排查錯(cuò)誤词疼，省事又省力俯树。 問(wèn)題在于，我們有時(shí)在server.js 輸出log贰盗，有時(shí)在controller.js 文件中輸出log许饿；有時(shí)在終端窗口查看log，而有時(shí)舵盈，又需要在 chrome瀏覽器的 console中查看log陋率， 看上去好復(fù)雜，有什么規(guī)律可尋嗎秽晚？ 這就是本章的主要內(nèi)容瓦糟。
server.js 代碼在終端窗口查看
先來(lái)看一段代碼， 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");
});
});
如果程序正常運(yùn)行赴蝇，在電腦終端窗口, 會(huì)輸出以下log信息：
this is a post request
{ name: '1111', email: '111', number: '111' }
already insert
public 目錄下的 controller.js 代碼菩浙，需要在瀏覽器的console 中查看
究竟在哪里查看log信息，取決于log所在js文件處于哪個(gè)路徑下。 我們知道劲蜻， 在 server.js中有一個(gè)靜態(tài)資源的路徑設(shè)置陆淀，代碼如下：
app.use(express.static (__dirname + "/public"));
對(duì)應(yīng)于具體的工程路徑，在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);
我們?cè)賮?lái)瀏覽器上的log輸出信息 浸剩， mac下的組合鍵：（option + command + I）如下：
小結(jié)
學(xué)習(xí)全棧開(kāi)發(fā)， 必須掌握基本的調(diào)試技能鳄袍，包括終端窗口的log輸出绢要、chrome瀏覽器上的console 上的log輸出。有了調(diào)試技能拗小， 再?gòu)?fù)雜的bug重罪，也可以通過(guò)調(diào)試來(lái)解決。
參考書(shū)： 《 全棧開(kāi)發(fā)之道：MongoDB+Express+AngularJS+Node.js 》
更多全棧技術(shù)哀九，請(qǐng)關(guān)注微信公眾號(hào)： “全棧工程師的早讀課”剿配，每天早8:00 準(zhǔn)時(shí)推送技術(shù)文章。
