JS开发利器——chrome调试器使用浅析(一)

看到有些新入门的朋友在为了JS的调试而发愁。所以有了写这么一篇博客的动力,能帮助别人就好。我会慢慢修改,直到看着比较满意为止。

1. 要求: 对JavaScript基础有一定掌握,个人认为,在学习了JS基础1-3个月就可以了。

2. Chrome下载地址: 建议,在百度之中搜索关键字“Chrome 中文版”,然后随便选择一家下载站即可。目前比较好的是 新浪下载、pconline、还有天空。至于版本,下载最新版即可,再此不多说,版本帝更新换代太快了。

3. Chrome内置了调试器,不像Firefox一样,需要自己搜索下载FireBug插件。 我只能说,Firefox适合高手,我只是个菜鸟。

4. 言归正传,怎么进入调试器呢? 最简单的方法: 打开一个网页,然后在页面之中的某处单击鼠标右键、在弹出的菜单之中选择“审查元素(N)”.即可进入调试器。但是此处进入的是HTML元素文档结构,这个暂时不讲。 不要捉急,在下方弹出框顶部的右边,有一个"Console"。这个就是控制台了。

5. 把光标移到控制台内部,试着输入 window ,也就是标准的JS全局对象,然后回车,看到什么了?下方输出了一行,点击左边的那个歪三角形,将会看到window的属性和方法。没错,这就是标准的调试信息了。

6. 如果你在html页面的JS里面输出 console.dir(window); 结果将会和刚才在控制台的输出是一模一样的。console 代表的是控制台对象,属于环境对象,在chrome和firefox下面存在。常用的方法有: console.info(xxx),和console.dir(xxx);没错,dir就表示列出对象的结构树。而info就是标准输出。

7. 既然可以再控制台得到对象信息,那么,还要console对象干什么呢? 原因是,控制台只可以输出全局变量以及其子对象。也就是说,匿名对象和临时变量在控制台手工是查找不到的。所以,在代码内部,可以通过这两个方法来打印出调试信息。

8. 这种方法被称为 暴力调试。也就是暴力的系统输出。另外的是断点调试,暂时不讲。

9. 在控制台里面输入 console.dir(xxx)也是可以执行的,一般来说,句末没有分号无所谓。

10. 如果要输出多行的文本肿么办? CTRL+ 回车试试,你会有惊喜的。

11. 今天暂时到这里吧,程序员找女朋友不容易,你们懂的。

原文地址:https://www.cnblogs.com/lanzhi/p/6467139.html