一个小错误的debug过程

实例代码：

HTML:

<div id="messageArea"></div>

CSS:

div#messsageArea {
position:absolute;
top:0px;
left:0px;
color:rgb(83,175,19);
} 

JAVASCRIPT:

var view = {
displayMessage:function(msg) {
var messageArea = document.getElementById("messageArea");
messageArea.innerHTML = msg;
},
displayHit:function(location) {
var cell = document.getElementById(location);
cell.setAttribute("class","hit");
},
displayMiss:function(location) {
var cell = document.getElementById(location);
cell.setAttribute("class","miss");
}
};

view.displayMiss("00");
view.displayHit("34");
view.displayMiss("55");
view.displayHit("12");
view.displayMiss("25");
view.displayHit("26");

view.displayMessage("Hello");

bug:最后一句代码view.displayMessage("Hello");不起效果。

troubleshoot过程：

1、更换浏览器（不行）

2、怀疑JS拼写错误，将method，id复制粘贴（不行）

3、使用google浏览器查看html，发现div中正常输出Hello。

4、又花了很长时间看html,js

5、偶然看到css，发现id错误，恍然大悟。

总结：

在第3步的时候就应该知道是CSS出问题了，思考问题时思路还不够清晰。