误注释一行HTML代码,要用半天的时间去消除bug

  今天,在用织梦dedecms开发网站的时候,遇到一个问题,即:导航菜单在电脑端可以正常显示,但是,自适合至移动端各种介质时,导航菜单却自动消失了。处理过程梳理记录下,算是一个经验吧,避免将来的工作中再在这个小门槛上花时间研究。
 
  首先,需要说明的是,出现这个问题之前,对CSS进行了局部调整,因此,根据以往经验与前面的操作动作,导航菜单没有在移动端显示,可能是CSS出问题,按照这个思路,各种审核元素,菜单显示出来了,但是排版是乱了,顺藤摸瓜,对这个出现的、错乱的菜单进行CSS控制,仍然无法达到想要的效果。
 
  调试过程中,意外的发现,PC端导航在移动端是隐藏,当然,通过媒介查询实现的。而真正没有出现的在移动端出现的导航,是额外单独写的。所以,到这儿,思路要改变了,既然显示的这个菜单是隐藏的,那就是在对应的位置display:none了。
 
  网站制作过程中,有个习惯,那就是阶段性的备份数据库、保存源码。所以,把之前可以正常显示移动菜单的CSS/JS覆盖已上线网站的CSS/JS,更新网站后,发现问题依然没有解决。那么,至此,可以断定,移动端菜单没有出现的原因,不是CSS/JS调试错误导致。
 
  上述试错的过程说明,CSS、JS没有问题,那问题可能出在HTML上,即前端框架内容的布局上。检查移动端导航对应的HTML代码,发现,注释了一行代码,解决注释,更新网站,刷新,移动端菜单正常显示了。
 
  这个时候,突然想起,整理代码的过程中,感觉有一行代码没有什么用,就下意识的把它注释掉了,而注释掉的这行代码刚好是移动端独立的导航。至此,问题是解决了,但是由于自己的大意,导致在这个问题上浪费了太多的时候,实在是不值得。
 
  以后在制作网站的过程中,从网上拿的代码,在功能实现的情况下,尽量不要删除局部你认为没有用的代码,或者在删除前后检查下整个模板相关功能是否受损,如果正常,则可以先注释掉,以备不时之需;反之,则删除。此外,要学会使用审核元素的功能,来定位CSS、JS、HTML、媒介查询等等可能出现的bug。