1、在浏览器中打开要调试的网页，然后点击”F12 Developer Tools“，也可以使用快捷键F12。
2、弹出的工具窗口中，默认选择是Dom Explorer功能，它会列出网页的源代码和CSS样式列表。
3、使用元素定位功能选择页面中的一个元素，也会定位到源代码中位置。
4、对定位到的文字修改CSS样式，添加inline style，比如把字体变为红色。
5、查看元素已经应用的CSS样式，点击"computed"菜单。
6、然后查看元素的布局信息，点击"Layout"菜单。
经过测试，可行！下面是改好的代码！
<html>
<head><title>导航树例子</title>
<script language="javascript" type="text/javascript" >
function dashu(e){
if(!document.getElementById) return
if(!e) var e=window.event
whicklink=(e.target)?e.target.id:e.srcElement.id
menu=document.getElementById(whicklink+"menu")
boolean=(menu.style.display=="none")
obj=document.getElementById(whicklink)
objname=obj.firstChild.nodeValue.substring(3)
if(boolean){
menu.style.display="block"
obj.firstChild.nodeValue="[-]"+objname
}
else{
menu.style.display="none"
obj.firstChild.nodeValue="[+]"+objname
}
}
function cheshi(){
document.write("wodeshijiebushimeng")
}
</script>
</head>
<body>
<ul>
<li><a id="yonghu" href="#">[+]用户管理</a><!--主菜单-->
<ul id="yonghumenu"><li><a href="#">修改密码</a></li>
<li><a href="#">注销账号</a></li>
<li><a href="#">查看密码</a></li>
</ul>
</li>
<li><a id="bumen" href="#">[+]部门管理</a>
<ul id="bumenmenu"><li><a href="#">修改密码</a></li>
<li><a href="#">注销账号</a></li>
<li><a href="#">查看密码</a></li>
</ul>
</li>
<li><a id="xinxi" href="#">[+]信息管理</a>
<ul id="xinximenu"><li><a href="#">修改密码</a></li>
<li><a href="#">注销账号</a></li>
<li><a href="#">查看密码</a></li>
</ul>
</li>
</ul>
<form name="myform">
<input type="button" name="mybutton" id="mybutton" >
</form>
</body>
</html>
<script>
document.getElementById("yonghu").onclick=dashu
document.getElementById("bumen").onclick=dashu
document.getElementById("xinxi").onclick=dashu
document.getElementById("mybutton").onclick=cheshi
</script>
