4. JavaScript Debug Tips

最新推荐文章于 2025-05-23 20:42:37 发布

enlyhua

最新推荐文章于 2025-05-23 20:42:37 发布

阅读量405

点赞数

分类专栏： chrome 文章标签： javascript 调试

chrome 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了多种Chrome浏览器中的高效调试技巧，包括使用debugger设置断点、console.table展示复杂对象、console.trace追踪函数调用等。此外还介绍了如何利用console.log自定义样式、在Console中使用$查询元素等高级技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. debugger

除了console.log，debugger就是另一个我很喜欢的快速调试的工具，将debugger加入代码之后，
Chrome会自动在插入它的地方停止，很像C或者Java里面打断点。
你也可以在一些条件控制中插入该调试语句，譬如：

if (thisThing) {
    debugger;
}

这里写图片描述

2.将Objects以表格形式展示

有时候我们需要看一些复杂的对象的详细信息，最简单的方法就是用console.log然后展示成一个列表状，
上下滚动进行浏览。不过似乎用console.table展示成列表会更好呦，大概是介个样子：

这里写图片描述

3.获取某个函数的调用追踪记录

console.trace()


JavaScript框架极大方便了我们的开发，但是也会带来大量的预定义的函数，
譬如创建View的、绑定事件的等等，这样我们就不容易追踪我们自定义函数的调用过程了。虽然JavaScript不是一个非常严谨的语言，
有时候很难搞清楚到底发生了啥，特别是当你需要审阅其他人的代码的时候。这时候console.trace就要起作用咯，它可以帮你进行函数调用的追踪。
譬如下面的代码中我们要追踪出car对象中对于funcZ的调用过程：

var car;

var func1 = function() {
func2();
}

var func2 = function() {
func4();
}

var func3 = function() {

}

var func4 = function() {
car = new Car();
car.funcX();
}

var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;

this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}

this.funcZ = function() {
console.trace(‘trace car’)
}
}

func1();

4.格式化被压缩的代码
这里写图片描述

5.快速定位调试函数

当我们想在函数里加个断点的时候，一般会选择这么做：

在Inspector中找到指定行，然后添加一个断点
在脚本中添加一个debugger调用
不过这两种方法都存在一个小问题就是都要到对应的脚本文件中然后再找到对应的行，
这样会比较麻烦。这边介绍一个相对快捷点的方法，就是在console中使用debug(funcName)然后脚本会在指定到对应函数的地方自动停止。
这种方法有个缺陷就是无法在私有函数或者匿名函数处停止，所以还是要因时而异：

var func1 = function() {
func2();
};

var Car = function() {
this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}
}

var car = new Car();

这里写图片描述

1.先输入  debug(函数名)   //监视
2.在 调用函数  函数名()

这里写图片描述

6.在较复杂的调试情况下发现关键元素

在一些复杂的调试环境下我们可能要输出很多行的内容，这时候我们习惯性的会用console.log, 
console.debug, console.warn, console.info, console.error这些来进行区分，然后就可以在Inspector中进行过滤。
不过有时候我们还是希望能够自定义显示样式，你可以用CSS来定义个性化的信息样式：

console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}

console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}

console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

7.监测指定函数的调用与参数

在Chrome中可以监测指定函数的调用情况以及参数：

var func1 = function(x, y, z) {
};

这里写图片描述

8.Console中使用$进行元素查询

在Console中也可以使用来进行类似于querySelector那样基于CSS选择器的查询，
(‘css-selector’) 会返回满足匹配的第一个元素，而$$(‘css-selector’) 会返回全部匹配元素。
注意，如果你会多次使用到元素，那么别忘了将它们存入变量中。

这里写图片描述

9.Postman
这里写图片描述

10.节点变化的断点

如果你的任务是调试垃圾代码，你可能会有这样的问题：为什么DOM节点在执行过程中发生了改变。
Chrome开发者工具提供了一种方便的断点，可用来检测元素树中的节点变化。

在Elements视图中，右键点击一个元素，从右键菜单中选择“Break on…”。

这里写图片描述

当这个节点变化时，才触发调试

DOM断点的类型可能包括：

选定节点树状子目录（sub-tree）中的节点变化，
选定节点的属性发生变化，
节点被删除。

这里写图片描述

11.XHR断点

有时你可能会遇到错误的AJAX请求。如果你无法立刻确认提交请求的代码，XHR断点可以帮你节省时间。
当提交某一特殊类型的AJAX时，XHR断点将会终止代码的执行，并将提交请求的代码段呈现给用户。

在Chrome开发者工具的Sources标签页中，其中一个断点类型就是XHR断点。点击+图标，
你可以输入URL片段，当AJAX请求的URL中出现这个URL片段时，JavaScript代码将会中断。

这里写图片描述

12.异常时暂停

Chrome开发者工具可以在抛出异常时暂停执行JavaScript代码。
这可以让你在Error对象被创建时观察应用的状态。

这里写图片描述

13.代码片段

Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，
可用于保存代码片段，帮你调试代码。

如果你坚持使用控制台调试，反复写相同的代码，你应该将你的代码抽象成调试片段。
这样的话，甚至还可以把你的调试技巧教给你的同事。

Paul Irish发布过一些基本的调试代码片段，例如在函数执行前插入断点。
审查这些代码片段，并在网上搜索其他代码片段，这是很有价值的。

这里写图片描述

https://github.com/paulirish/devtools-addons/wiki/Snippets

14.DOM元素的控制台书签
这里写图片描述

15.性能审查

性能审查工具通常是很有用的。这些工具可以用于防止内存泄露，还可以检测到你的网站哪里需要优化。
由于这些工具并不了解你的产品，你可以忽略其某些建议。通常来说，性能分析工具能够有效范围，
可以使你的网站显著优化。

审查工具举例：

Chrome开发者工具的Audit标签页
YSlow

16.console

console.dir()可以显示一个对象所有的属性和方法。
console.dirxml() 用来显示网页的某个节点（node）所包含的html/xml代码。
console.log();
console.error();
console.warn();

https://segmentfault.com/a/1190000005624728

https://raygun.com/blog/2015/05/javascript-debugging-with-black-box/

http://web.jobbole.com/83913/

http://web.jobbole.com/86734/

http://www.zsoltnagy.eu/my-8-step-code-review-process/