本文共 2259 字,大约阅读时间需要 7 分钟。
最原始也是最为简单的前端调试方式,使用浏览器的window对象的alert()方法,弹出对话框显示需要调试的变量的值。
var s = "Chrome调试"; window.alert(s); //调用window的alert()方法 alert(s);//省略window对象,直接调用方法
调试的效果如下:
使用alert()方法调试,如果通过调用多次alert()方法调式有多个变量,则需要手动关闭前面的窗口,后面的才能显示,对于多变量、复杂调试效率较低。
现在大多数浏览器都默认提供了开发工具,可以在浏览器中直接调试JS的代码。Chrome的开发工具应该是属于最好用的开发工具之一了。调出Chrome的开发工具的方法有以下几种:
在浏览器窗口中,右键单击,选择检查
使用快捷键: Ctrl+Shift+I
F12 (有些电脑不支持)
在JavaScript代码中加上debugger语句,在开发工具窗口开启的状况下, 代码执行到这句就会停下。
debugger;
效果如下:
这非常适合代码量较多的复杂项目中,快速定位需要调试的代码段。但需要注意, 如果是正式发布的时候, 需要将这些调试的代码移除。console是Chrome等浏览器提供的控制台对象,调用该对象的 console.log()方法可以在开发工具控制台中输出。类似后端的控制台输出和日志,该对象提供了不同级别的调试输出,包括:
在html中加入以下代码:
console.log("通用信息"); console.info("Info 级别信息"); console.debug("Debug 调试级别信息"); console.warn("Warn 警告级别信息"); console.error("Error错误级别信息");
在Chrome中打开开发工具,进入Console标签页,输出效果如下图:
JSONArray的数据通过console.table()可以以表格显示在控制台中,比如以下代码:
var generals = [{ "id": 101, "kingdomId": 1, "name": "刘备" }, { "id": 102, "kingdomId": 1, "name": "关羽" }]; console.table(generals);
在控制台显示如下:
console.time() 和console.timeEnd()成对出现用来测量代码段执行的时间。测试示例如下:
console.time('My Timer'); var items = []; for(var i = 0; i < 1000000; i++){ items.push({index: i}); } console.timeEnd('My Timer');
console.trace() 用来查看函数的调用堆栈。 示例代码和效果如下:
function func1(){ func2(); } function func2(){ func3(); } function func3(){ console.log("this is func3 call by func2, func2 call by func1"); console.trace("func3 trace"); } func1();
如果对控制台的信息输出有更高的要求,也可以自定义输出的样式,比如:
console.log('%c %s','color: red; background-color: black','My Message'); //黑底红字
出于性能的考虑,某些网站或是框架的JS文件会进行编译压缩。压缩后的文件没有了换行,基本无法调试,比如Ext JS框架的文件 ext-all.js 。在浏览器的控制台中点击源码按钮 {}可以重新格式化这个文件,比如:
点击后的效果如下: 基于格式化后的文件就可以正常的进行断点调试了。转载地址:http://kxsxf.baihongyu.com/