14 个你可能不知道的 JavaScript 调试技巧_前端大全的博客-程序员秘密

(点击上方公众号,可快速关注)

英文: raygun   译文:oschina

https://www.oschina.net/translate/javascript-debugging-tips

如果好文章投稿,点击 → 了解详情


了解你的工具可以极大的帮助你完成任务。尽管 JavaScript 的调试非常麻烦,但在掌握了技巧 (tricks) 的情况下,你依然可以用尽量少的的时间解决这些错误 (errors) 和问题 (bugs) 。


我们会列出14个你可能不知道的调试技巧, 但是一旦知道了,你就会迫不及待的想在下次需要调试 JavaScript 代码的时候使用它们!


现在开始。


虽然许多技巧也可以用在别的检查工具上,但大部分的技巧是用在 Chrome Inspector 和 Firefox 上的。


1. ‘debugger;’


‘debugger’ 是 console.log 之外我最喜欢的调试工具,简单暴力。只要把它写到代码里,Chrome 运行的时候就会自动自动停在那。你甚至可以用条件语句把它包裹起来,这样就可以在需要的时候才执行它。


if (thisThing) {

    debugger;

}

2. 把 objects 输出成表格


有时候你可能有一堆对象需要查看。你可以用 console.log 把每一个对象都输出出来,你也可以用 console.table 语句把它们直接输出为一个表格!


var animals = [

    { animal: 'Horse', name: 'Henry', age: 43 },

    { animal: 'Dog', name: 'Fred', age: 13 },

    { animal: 'Cat', name: 'Frodo', age: 18 }

];

 

console.table(animals);


输出结果:



3. 试遍所有的尺寸


虽然把各种各样的手机都摆在桌子上看起来很酷,但这却很不现实。为什么不选择直接调整界面大小呢? Chrome 浏览器提供了你所需要的一切。 进入检查面板点击 ‘切换设备模式’ 按钮,这样你就可以调整视窗的大小了!



4. 如何快速定位 DOM 元素


在元素面板上标记一个 DOM 元素并在 concole 中使用它。Chrome Inspector 的历史记录保存最近的五个元素,最后被标记的元素记为 $0,倒数第二个被标记的记为 $1,以此类推。


如果你像下面那样把元素按顺序标记为 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ,你就可以在 concole 中获取到 DOM 节点:



5. 用 console.time() 和 console.timeEnd() 测试循环耗时


当你想知道某些代码的执行时间的时候这个工具将会非常有用,特别是当你定位很耗时的循环的时候。你甚至可以通过标签来设置多个 timer 。demo 如下:

console.time('Timer1');

 

var items = [];

 

for(var i = 0; i < 100000; i++){

   items.push({index: i});

}

 

console.timeEnd('Timer1');


运行结果:



6.获取函数的堆栈轨迹信息


你可能知道 JavaScript 框架会产生很多的代码--迅速的。


它创建视图触发事件而且你最终会想知道函数调用是怎么发生的。


因为 JavaScript 不是一个很结构化的语言,有时候很难完整的了解到底发生了什么以及什么时候发生的。 这个时候就轮到 console.trace(在终端的话就只有 trace )出场来调试 JavaScript了 。


假设你现在想看 car 实例在第33行调用 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();

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();


第33行会输出:



你可以看到func1调用了func2, func2又调用了func4。Func4 创建了Car的实例,然后调用了方法car.funcX,等等。


尽管你感觉你对自己的脚本代码非常了解,这种分析依然是有用的。 比如你想优化你的代码。 获取到堆栈轨迹信息和一个所有相关函数的列表。每一行都是可点击的,你可以在他们中间前后穿梭。 这感觉就像特地为你准备的菜单。


7. 格式化代码使调试 JavaScript 变得容易


有时候你发现产品有一个问题,而 source map 并没有部署到服务器。不要害怕。Chrome 可以格式化 JavaScript 文件,使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 {} 即可。



8. 快速找到调试函数


来看看怎么在函数中设置断点。


通常情况下有两种方法:


1. 在查看器中找到某行代码并在此添加断点
2. 在脚本中添加 debugger


这两种方法都必须在文件中找到需要调试的那一行。


使用控制台是不太常见的方法。在控制台中使用 debug(funcName),代码会在停止在进入这里指定的函数时。


这个操作很快,但它不能用于局部函数或匿名函数。不过如果不是这两种情况下,这可能是调试函数最快的方法。(注意:这里并不是在调用 console.debug 函数)。

var func1 = function() {

func2();

};

 

var Car = function() {

this.funcX = function() {

this.funcY();

}

 

this.funcY = function() {

this.funcZ();

}

}

 

var car = new Car();


在控制台中输入 debug(car.funcY),脚本会在调试模式下,进入 car.funcY 的时候停止运行:



9.  屏蔽不相关代码


如今,经常在应用中引入多个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是,调试器仍然会进入与此调试任务无关的文件。解决方案是将不需要调试的脚本屏蔽掉。当然这也可以包括你自己的脚本。 点此阅读更多关于调试不相关代码(http://raygun.com/blog/javascript-debugging-with-black-box/)。



10. 在复杂的调试过程中寻找重点


在更复杂的调试中,我们有时需要输出很多行。你可以做的事情就是保持良好的输出结构,使用更多控制台函数,例如 Console.log,console.debug,console.warn,console.info,console.error 等等。然后,你可以在控制台中快速浏览。但有时候,某些JavaScrip调试信息并不是你需要的。


现在,可以自己美化调试信息了。在调试JavaScript时,可以使用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’);


输出:



例如:


在console.log()中, 可以用%s设置字符串,%i设置数字,%c设置自定义样式等等,还有很多更好的console.log()使用方法。 如果使用的是单页应用框架,可以为视图(view)消息创建一个样式,为模型(models),集合(collections),控制器(controllers)等创建另一个样式。也许还可以像 wlog,clog 和 mlog 一样发挥你的想象力!


11. 查看具体的函数调用和它的参数


在 Chrome 浏览器的控制台(Console)中,你会把你的注意力集中在具体的函数上。每次这个函数被调用,它的值就会被记录下来。

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

//....

};


然后输出:




这是查看将哪些参数传递到函数的一种很好的方法。但我必须说,如果控制台能够告诉我们需要多少参数,那就好了。在上面的例子中,函数1期望3个参数,但是只有2个参数被传入。如果代码没有在代码中处理,它可能会导致一个 bug 。


12. 在控制台中快速访问元素


在控制台中执行 querySelector 一种更快的方法是使用美元符。$(‘css-selector’)  将会返回第一个匹配的 CSS 选择器。$$(‘css-selector’) 将会返回所有。如果你使用一个元素超过一次,它就值得被作为一个变量。



13. Postman 很棒(但 Firefox 更快)


很多开发人员都使用 Postman 来处理 Ajax 请求。Postman 真不错,但每次都需要打开新的浏览器窗口,新写一个请求对象来测试。这确实有点儿烦人。


有时候直接使用在用的浏览器会更容易。


这样的话,如果你想请求一个通过密码保证安全的页面时,就不再需要担心验证 Cookie 的问题。这就是 Firefox 中编辑并重新发送请求的方式。


打开探查器并进入网络页面,右键单击要处理的请求,选择编辑并重新发送。现在你想怎么改就怎么改。可以修改头信息,也可以编辑参数,然后点击重新发送即可。


现在我发送了两次同一个请求,但使用了不同的参数:



14. 节点变化时中断


DOM 是个有趣的东西。有时候它发生了变化,但你却并不知道为什么会这样。不过,如果你需要调试 JavaScript,Chrome 可以在 DOM 元素发生变化的时候暂停处理。你甚至可以监控它的属性。在 Chrome 探查器上,右键点击某个元素,并选择中断(Break on)选项来使用:




觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能


淘口令复制以下红色内容,再打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/VhWfR2u02Q/article/details/78566607

智能推荐

【深度学习】BatchSize设置_littlemichelle的博客-程序员秘密_batch_size

Batch_size的使用意义及大小的选择Batch_size不宜选的太小,太小了容易不收敛,或者需要经过很大的epoch才能收敛;也没必要选的太大,太大的话首先显存受不了,其次可能会因为迭代次数的减少而造成参数修正变的缓慢。Batch_size有时候明明已经很小了,可显存还是很紧张,还有就是同样的图片大小,同样的Batch_size,为啥有时候显存够用有时候就不够用呢,目前我所知道...

【光学】基于matlab介电常数计算【含Matlab源码 1926期】_海神之光的博客-程序员秘密_matlab介电

1] 门云阁.MATLAB物理计算与可视化[M].清华大学出版社,2013.,扫描上面二维码,付费29.9元订阅海神之光博客。简介此部分摘自互联网,仅供参考,若侵权,联系删除。点击上面蓝色字体,直接付费下载,即可。,凭支付凭证,私信博主,可免费获得。份本博客上传CSDN资源代码(为订阅日起,三天内有效);

iOS输入框自适应键盘高度,避免遮挡_编织人生_程就未来的博客-程序员秘密_ios popup输入框自适应高度

//注册通知- (void)regNotification{    [[NSNotificationCenterdefaultCenter]addObserver:selfselector:@selector(keyboardWillChangeFrame:)name:UIKeyboardWillChangeFrameNotificationobject:nil

压缩感知重构算法之基追踪(Basis Pursuit, BP)_Aruen24的博客-程序员秘密_基追踪算法

题目:压缩感知重构算法之基追踪(Basis Pursuit, BP)        除匹配追踪类贪婪迭代算法之外,压缩感知重构算法另一大类就是凸优化算法或最优化逼近方法,这类方法通过将非凸问题转化为凸问题求解找到信号的逼近,其中最常用的方法就是基追踪(Basis Pursuit, BP),该方法提出使用l1范数替代l0范数来解决最优化问题,以便使用线性规划方法来求解[1]。本篇我们

BFC实现简单的2栏布局_mufengs16的博客-程序员秘密_bfc实现两栏布局

BFC实现简单的2栏布局&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;BFC实现简单的2栏布局&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width initial-scale=1.0"&gt; &lt;style type="text/css"&gt;

随便推点

html京东快速购物导航,基于React Native构建的仿京东客户端(五)如何实现首页 分类 发现 购物车 我的 Tab导航页面..._小兔usako的博客-程序员秘密

新建4个用红色方框标识的文件,如下图所示: myths-Mac:JdApp myth$ yarn add react-native-tab-navigatorCartPage.js文件完整的代码如下:import React, { Component } from 'react';import {StyleSheet,Text,View} from 'react-native';export de...

LQB:历届试题 核桃的数量_yunxiaoMr的博客-程序员秘密_核桃 lqb是什么意思

问题描述小张是软件项目经理,他带领3个开发组。工期紧,今天都在加班呢。为鼓舞士气,小张打算给每个组发一袋核桃(据传言能补脑)。他的要求是:1. 各组的核桃数量必须相同2. 各组内必须能平分核桃(当然是不能打碎的)3. 尽量提供满足1,2条件的最小数量(节约闹革命嘛)输入格式输入包含三个正整数a, b, c,表示每个组正在加班的人数,用空格分开(a,b,c&lt;30)输出格...

工业建模和游戏建模有什么区别?哪个发展前景更好?_旺仔带你学建模的博客-程序员秘密

首先3D建模一般分为工业建模和游戏建模两种,工业建模分为室内设计和室外设计,以及机械建模。在制作模型时,会相比于游戏建模更注重尺寸的标注和制作标准。而后者则不同,游戏建模主要是负责游戏里模型的制作,游戏建模对技能要求也更高,游戏里需要考虑到优化的问题,不能用高模,需要把模型优化成低模另外,工业建模都是通过材质球来表现材质,很多材质球都是自带,但是游戏建模是自己绘制贴图,划分uv,相对于工业建模技术要求更高。其实这两者我还是有偏向性的,个人觉得游戏建模的发展前景是非常好的。虽然说工业建模起步高

【基于zynq的卷积神经网络加速器设计】(一)熟悉vivado和fpga开发流程:使用Vivado硬件调试烧写hello-world led闪烁程序实现及vivado软件仿真_别出BUG求求了的博客-程序员秘密_zynq卷积

HIGHLIGHT:vivado设计流程:note:分析与综合 和 约束输入 可以调换顺序【基于zynq的卷积神经网络加速器设计】(一)熟悉vivado和fpga开发流程:使用Vivado硬件调试烧写hello-world led闪烁程序实现及vivado软件仿真一、硬件调试(一)新建工程(二)设计输入(三)分析(四)约束输入(五)综合、实现、生成比特流二、软件仿真(一)步骤(二)仿真界面指导一、硬件调试(一)新建工程new projectnext编辑,然后next勾选创建

优化LibreOffice如此简单_流風餘韻的博客-程序员秘密_libre office 取消单元格更改记录

对于开源软件的支持者和粉丝来说,LibreOffice 无疑是 Microsoft Office 的最佳替代品,而且它已在过去的许多版本迭代中迎来了许多巨大改进。然而,通过用户的手动配置,我们还是有办法来提高 LibreOffice 的启动时间和整体性能,下面我们就 LibreOffice 加载时间和性能改进的 4 个实际步骤进行一些介绍。

推荐文章

热门文章

相关标签