随着前端技术的发展,css,html,javascript不断的改进和发展,前端代码复杂化也需要很好的调试工具,每个浏览器机会都有开发者工具,可以用来调试代码,按F12就能进入调试界面。本文主要探讨的是火狐的firbug和谷歌的开发者工具。
火狐:
谷歌:
相同的调试功能:
1、HTML和Elements都是查看dom树结构,
2、都可以通过左上边的箭头定义到任意元素上,然后右边的框中出现元素的css,可以临时修改里面的css样式
3、脚本和source可以打开js脚本文件通过设置断点调试js。
4、网络和Network可以查看http通信情况,调试ajax连接等
谷歌有优势的调试功能:
console的强大功能,打开console,可在里面输入命令帮助调试js,通常用的alert,会阻塞线程运行,不点击弹出框的确定按钮不会往下运行,所以借助console达到同样的调试效果但避免阻塞程序运行。
在调试js代码时我们可以在js里利用console里的方法,在console里输出信息;下面介绍console常用的方法:
console.log("开始了");打印出普通信息;
console.info();打印出提示信息;
console.warn() 警告信息 ;
console.error() 错误信息
console.assert(arg1,arg2);当arg1为false时才输出信息arg2;
console.count() ;统计函数执行了多少次;
console.time() ;console.timeEnd() ;计时开始到计时结束耗费的时间,根据耗时可以优化算法;
(注:括号里的参数必须是一样的;)