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

为什么你只会“alert”

浏览器调试简述

  

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

  

blob.png

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

  

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

  

blob.png

图 2 启用Safari调试工具

  

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

  

blob.png

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

  

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

  

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

  

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

  

  l.元素查看、监控

  2.源文件及所需资源

  3.HTTP网络

  4.脚本文件查看及调试

  5.性能分析

  6.代码和内存统计

  

  

调试器入门使用

  

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

  

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

  

blob.png

图4 设置断点行

  

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

  function debuggerTest(){
      //代码略
      debugger
  }

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

  

blob.png

图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);
  }

  

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

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

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

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

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

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

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

  

blob.png

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

  

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

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

  

blob.png

图7 Chrome Network面板

  

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


 

blob.png

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

  

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

  console.profile();
  //要统计的代码
  //……
  console.profileEnd();

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


  

blob.png

图9 Chrome的一条Profile1信息

  

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

  console.time("times");
  //代码段略
  console.timeEnd("timesEnd");

提示:以上只是对当前的调试工具做一个简单介绍,如果您对此感兴趣,可以深入参考官方文档。另外,vx的编辑器对代码不友好,还请谅解。


回不去昨天