9种使用Chrome Firefox 自带调试工具调试javascript技巧

我们调试Javascript一般会用到Chrome或Firefox自带的调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们，让我们花更少的时间来解决错误和bug，从而提高开发效率。

1. debugger

除了console.log, debugger是我们最喜欢、快速的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。

if (thisThing) {
 debugger;
}

2. 用表格显示对象

有时， 有一组复杂的对象要查看。可以通过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. 使用 console.time() 和 console.timeEnd() 测试循环

要得知某些代码的执行时间，特别是调试缓慢循环时，非常有用。 甚至可以通过给方法传入不同参数，来设置多个定时器。来看看它是怎么运行的：

console.time('Timer1'); 

var items = []; 

for(var i = 0; i < 100000; i++){
 items.push({index: i});
} 

console.timeEnd('Timer1');

运行产生了一下结果：

5. 将代码格式化后再调试JavaScript

有时代码会在生产环境出问题，但是你的source maps没有部署在生产环境上。不要怕。Chrome可以将您的JavaScript文件格式化。格式化后的代码虽然不像真实代码那样有用，但至少可以看到发生了什么。点击 Chrome控制台中的源代码查看器中的{}按钮即可。

6. 观察特定函数的调用及参数
在Chrome控制台中，可以观察特定的函数。每次调用该函数，就会打印出传入的参数。

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

输出：

这是查看传入函数参数的好方法。但是，如果控制台提示我们形参的数目就更好了。在上面的例子中，func1期望3个参数，但是只有传入了2个参数。如果在代码中没有处理这个参数，就很可能出错。

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

控制台中比querySelector更快的方法是使用美元符号，$('css-selector')将返回CSS选择器的第一个匹配项。$$('css-selector')将返回所有匹配项。如果多次使用一个元素，可以把它保存为一个变量。

8. Postman 很棒（但Firefox更快）

许多开发人员使用Postman查看ajax请求。Postman真的很优秀。但打开一个新的窗口，写入请求对象，然后再来测试它们，显得很麻烦。

有时使用浏览器更容易。

当你使用浏览器查看时，如果请求一个密码验证页面，不需要担心身份验证的cookie。下面看，在Firefox中如何编辑并重新发送请求。

打开控制台并切换到network选项卡。右击所需的请求，然后选择编辑并重新发送。现在可以改变任何想要的改的。更改标题并编辑参数，然后点击重新发送。

下面我用不同的属性发起的两次请求：

9. 中断节点更改

DOM是一个有趣的东西。有时候它会改变，你并不知道为什么。 但是，当您调试JavaScript时，Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。在Chrome控制台中，右击该元素，然后在设置中选择中断：

Chrome和Firefox自带的网页调试工具功能非常强大，许多非常实用的小功能有待大家去发掘。

赞 (0)

相关推荐

  • 回顾Javascript React基础

    前言 React核心的单向数据流.一切皆数据的state.不会改变的props,以及状态提升等等经常使用便不多总结,需要的看官方文档. JSX JSX 本质只是为 React.createElement(component, props, ...children)提供的语法糖! 1.React DOM 在渲染之前都被转换成了字符串,它天生自带防止 XSS 攻击的属性. 2.Babel 转译器会把 JSX 转换成一个名为 React.createElement()的方法调用.在线babel编译 以

  • JavaScript调试之console.log调试的一个小技巧分享

    JavaScript调试之console.log调试的一个小技巧分享

    前言 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用: alert弹出框需要点击确认比较麻烦,而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑. 最重要的是alert只能输出字符串,不能输出对象里面的结构,console.log()可以接受任何字符串.数字和JavaScript对象,可以看到清楚的对象属性结构,在ajax返回jso

  • JavaScript的兼容性与调试技巧

    JavaScript的兼容性与调试技巧

    关于JavaSctipt的兼容性,最懒的办法就是用jQuery的工具函数.尽量不要用那些什么ECMAScript之类的函数,因为很多浏览器都会报找不到函数的错误.下面列出一些在开发过程中碰到过的javascript问题. 1.参数列表多个逗号. $.ajax({})方法,非常熟悉了吧,但是在IE中有个小地方要注意,如果你在拼接参数列表的时候最后一个也加了逗号,那么毫无疑问,IE下全部JS失效. 调试时报如下错误: 缺少标识符.字符串或数字 data: { S_Id: Subject_Id, le

  • js经验分享 JavaScript反调试技巧

    在此之前,我一直都在研究JavaScript相关的反调试技巧.但是当我在网上搜索相关资料时,我发现网上并没有多少关于这方面的文章,而且就算有也是非常不完整的那种.所以在这篇文章中,我打算跟大家总结一下关于JavaScript反调试技巧方面的内容.值得一提的是,其中有些方法已经被网络犯罪分子广泛应用到恶意软件之中了. 对于JavaScript来说,你只需要花一点时间进行调试和分析,你就能够了解到JavaScript代码段的功能逻辑.而我们所要讨论的内容,可以给那些想要分析你JavaScript代码

  • Chrome调试折腾记之JS断点调试技巧

    Chrome调试折腾记之JS断点调试技巧

    JS调试技巧技巧 一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置 技巧三:查看断点内部的作用范围[很实用] 右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等.. 技巧4:监听事件断点 右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘

  • 必备的JS调试技巧汇总

    必备的JS调试技巧汇总

    前言:任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度.不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,

  • 概述javascript在Google IE中的调试技巧

    概述javascript在Google IE中的调试技巧

    今天,发现了一个之前从未注意的角落,相信能够大大提高自己写JS的速度.能够迅速发现错误. 例如,今天的加班中调试一个js错误发现的一个例子. 1.Google浏览器报的错 以上是google浏览器报的错误,只报一个错误文件,相信是什么地方由null调用了length属性导致的.由于这是一个已经维护了几年的系统,人来人往,不知道经历了几个人之手.而且业务逻辑极其复杂,js文件都上千行.要一个length一个length的排除,显然是不切实际的. 2014.3.18 今天才知道,唉,原来google

  • Javascript调试之console对象——你不知道的一些小技巧

    Javascript调试之console对象——你不知道的一些小技巧

    前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志

  • 9种使用Chrome Firefox 自带调试工具调试javascript技巧

    我们调试Javascript一般会用到Chrome或Firefox自带的调试工具,本文列出了几条用于调试Javascript的技巧,掌握它们,让我们花更少的时间来解决错误和bug,从而提高开发效率. 1. debugger 除了console.log, debugger是我们最喜欢.快速的调试工具.执行代码后,Chrome会在执行时自动停止.你甚至可以把它封装成条件,只在需要时才运行. if (thisThing) { debugger; } 2. 用表格显示对象 有时, 有一组复杂的对象要查看

  • 带你了解JavaScript的运行原理

    带你了解JavaScript的运行原理

    目录 浏览器内核 JavaScript 引擎 V8 引擎 了解JavaScript 是如何运行的,以及的它的运行机制,首先,我们要了解浏览器的内核: 浏览器内核 了解过的都知道:不同的浏览器是由不同的内核组成,那么有哪些内核以及我们常用的浏览器都使用了那些内核: Gecko:早期被Netscape和Mozilla Firefox浏览器浏览器使用: Trident:微软开发,被IE4~IE11浏览器使用,但是Edge浏览器已经转向Blink: Webkit:苹果基于KHTML开发.开源的,用于Sa

  • 使用Chrome调试JavaScript的断点设置和调试技巧

    使用Chrome调试JavaScript的断点设置和调试技巧

    你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各

  • 在Chrome DevTools中调试JavaScript的实现

    由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript. 一.案发现场 为了方便理解,我写了一个小demo. 点击打开demo: 在num1中输入6: 在num2中输入9: 点击 num1+num2,按钮下方的标签显示 69,结果应为 15,这就是我们需要断点调试找出的 BUG . 二.熟悉一下 Sources 面板 DevTools 可为更改 CSS.分析页面加载性能和监控网络请求等不同的任务提供许多不同的工具. 我们就在 Sources 面板中调试 JavaSc

  • 一篇文章带你吃透JavaScript中的DOM知识及用法

    目录 一.前言 二.DOM框架 三.认识DOM节点 四.JS访问DOM 1.获取节点 2.改变 HTML 3.改变 CSS 4.检测节点类型 5.操作节点间的父子及兄弟关系 6.操作节点属性 7.创建和操作节点 总结 一.前言 DOM:Document Object Model(文档对象模型),定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新.它使得用户对HTML有了空前的访问能力,并使开发者将HTML作为XML文档来处理. 本文知识导图如下: 二.DO

  • 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript

    Javascript Debug Toolkit 是一个开源免费的eclipse插件,官方主页:http://code.google.com/p/jsdt 下图给出一个调试工具支持的浏览器对照表 工具\浏览器 Ie Firefox Safari Chrome Opera 其他 VS.net 支持 Microsoft Script Debugger 支持 Firebug 支持 venkman 支持 NebBeans 支持 支持 Aptana 支持 支持 Eclipose ATF 支持 MyEcli

  • 解决javascript:window.close()在chrome,Firefox下失效的问题

    解决javascript:window.close()在chrome,Firefox下失效的问题

    window.close(),一看就知道是用来关闭浏览器窗口的方法.W3CSchool对该方法的解释如下:方法 close() 将关闭有 window 指定的顶层浏览器窗口.某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身.只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭.这阻止了恶意的脚本终止用户的浏览器. 在IE中,window.close()能生效,在生效的时候,会弹出提示框,询问你是否关闭该窗口,如图: 点击"是

  • C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)

    C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)

    复制代码 代码如下: // FileName: BrowsHistory.h // ------------------------------------------------------------------------------------------------------------------------// Remarks://   BrowsHistory对象应该设置成全局,或者静态:防止还没有获取完网址,对象就析构了:// ------------------------

  • python使用selenium打开chrome浏览器时带用户登录信息实现过程详解

    python使用selenium打开chrome浏览器时带用户登录信息实现过程详解

    导读 我们在使用selenium打开google浏览器的时候,默认打开的是一个新的浏览器窗口,而且里面不带有任何的浏览器缓存信息.当我们想要爬取某个网站信息或者做某些操作的时候就需要自己再去模拟登陆 selenium操作浏览器 这里我们就以CSDN为例,来展示如何让selenium在打开chrome浏览器的时候带上用户的登录信息 打开chrome浏览器 from selenium import webdriver from selenium.webdriver import ChromeOpti

  • jquery实现图片渐变切换兼容ie6/Chrome/Firefox

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐