席新亮'; ?>

首页 / 原生JS

为什么你只会“alert”

By 席新亮 •  2016-11-21 15:27:17 •  628次点击

荐语


看到很多前端朋友在写JavaScript代码的时候,经常使用“alert”,感觉有必要普及一下浏览器调试工具(Chrome、Firefox等)...

浏览器调试简述

当今最流行的浏览器Chrome和Safari,在调试时都用的WebInspector,当然还有其他浏览器。这些浏览器的调试界面外观稍有不同,本质还是一样的,如图1所示。

图1 启用Chrome的JavaScript调试器界面

Chrome开发工具可以按快捷键F12打开,Safari中的激活方式是,在右上角设置里面选择“Preferences...”,然后在“Advanced”面板中,选择“ShowDevelopmenuinmenubar”启动调试器,如图2所示。

图 2 启用Safari调试工具

Firebug是Firefox浏览器中的调试工具。只要我们在Firefox中安装了Firebug应用,就可以按F12键或右击鼠标开启调试,如图3所示。

图3 启用Firefox中的Firebug调试工具

另外FirebugLite也提供了强大的调试支持,尤其在IE中,调试非常方便。它不需要直接安装,只要引用一段JavaScript代码即可,如下:

<scripttype="text/JavaScript"src="https://getfirebug.com/firebug-lite.JavaScript"></script>

无论是WebInspector还是Firebug,大体功能都是类似的,下面简要概括一下。

l 元素查看、监控

l 源文件及所需资源

l HTTP网络

l 脚本文件查看及调试

l 性能分析

l 代码和内存统计

调试器入门使用

开发的过程中,调试器是必不可少的,也是最重要的。可以通过调试器来设置断点、监控变量、查看堆栈等。

设置断点很简单,只需要单击Sources选项,再在想要设置的行单击一下即可,如图4所示。

图4 设置断点行

还可以通过在代码中添加debugger来设置,如下:

function debuggerTest(){

      //代码略

      debugger

}

两种方法相比较,第一种方法更妥当,不会干扰代码环境。当代码执行到断点行时,就可以采取一定的操作,比如:在调试面板的右上角执行播放、下一步、进入、跳出。通过查看调用的堆栈CallStack,可以看到函数的执行过程,如图5所示。

图5 Chrome右边的断点调试区域

控制台可以查看变量的值,也可以执行JavaScript代码。只要异步调用console.log(),就可以输出想要的log,如下:

console.log("我是日志");

console.log(3,4,{1:"one"});

console.warn()和console.error()是警示级别,如下:

console.warn("一个警告");

console.error("一个错误");

//也可以这样写

try{

      //或许会报错的代码块

}catch(e){

      console.error("错误",e);

}

控制台还有一些其他比较有用的函数:

l 堆栈函数console.trace(),可以查看指定函数的调用关系。

l clear()函数,用来清除控制台中的log。

l dir()函数,输出对象中的所有属性,如:

dir({test:1,test2:2});

l values()函数,以数组的形式打印出对象中的所有属性值。

l keys()与values()相对,会以数组方式打印对象中所有键(名字),如图6所示。

图6 用keys()打印一个对象

注意:console.log()不是任何浏览器都支持,如IE的低版本就不支持。

如果想知道Web在执行什么网络请求,可以通过调试工具来查看,包括网络请求的时间、请求的方式、地址等,蓝色代表DOMContentLoaded触发的时间,即DOM加载完成的时间。橙色(红色)代表load事件触发的时间。另外还有一条绿线,是页面首次渲染的线,在Firebug与WebInspector看不见,可以使用其他更底层的工具进行捕获,如图7所示。

图7 Chrome Network面板

当单击某个请求时,会看到请求的详细信息,如图8所示。

图8 Chrome中一条Network的详细信息

大型的项目对性能的要求是很严格的,尤其是面对移动终端设备时。在调试工具中,Profile可以精确地检测程序的性能。写法很简单,只要在想统计的代码外层添加profile代码就可,如下:

console.profile();

//要统计的代码

//……

console.profileEnd();

当浏览器遇到profileEnd()时,就会将统计结果生成报表显示出来,或者在浏览器中使用Profile的record特性查看,如图9所示。

图9 Chrome的一条Profile1信息

使用控制台函数console.time()与console.timeEnd(),也可以实现同样的效果,当执行到console.timeEnd()时,后台把程序的执行时间(以毫秒为单位)发送到控制台,使用控制台的API,将结果加入到测试代码中,这样就可以在整体上把控代码的性能,如下:

console.time("times");

//代码段略

console.timeEnd("timesEnd");


版权归前端范所有,转载请注明来源链接


Vue.js  前端社区  前端技术  前端教程  FIS  nodejs  npm  北京前端学校  自学前端  前端学校  北京前端培训  前端培训  妙味课堂  JS函数节流 

3 回复 | 直到2017-03-23 22:12

回复

登录提问 or 还没有账号?去注册