关键词：
调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。
而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。
下面小编就分享一些实用且聪明的JavaScript调试技巧，希望能让大家调试自己代码的时候更加从容自信。
1、不要使用 alert
首先， alert只能打印出字符串，如果打印的对象不是 String，则会调用 toString()方法将该对象转成字符串（比如转成 [object Object]这种），所以除非你打印 String类型的对象，其他什么信息都获取不到。其次， alert会阻塞UI和javascript的执行，必须点击‘OK‘按钮才能继续，非常低效。所以，喜欢使用 alert的同学可以改改这个习惯了。
2、学会使用 console.time
有时候我们想知道一段代码的性能或者一个异步方法需要运行多久，这时候需要用到定时器，JavaScript提供了现成的 console.time方法，例如：
3、使用 debugger打断点
有时候我们需要打断点进行单步调试，一般会选择在浏览器控制台直接打断点，但这样还需要先去Sources里面找到源码，然后再找到需要打断点的那行代码，比较费时间。使用 debugger关键词，我们可以直接在源码中定义断点，方便很多，比如：
4、把 objects 输出成表格
有时候你可能有一堆对象需要查看。你可以用 console.log 把每一个对象都输出出来，你也可以用 console.table 语句把它们直接输出为一个表格！
输出结果:
5、如何快速定位 DOM 元素
在元素面板上标记一个 DOM 元素并在 concole 中使用它。Chrome Inspector 的历史记录保存最近的五个元素，最后被标记的元素记为 $0，倒数第二个被标记的记为 $1，以此类推。
如果你像下面那样把元素按顺序标记为 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ，你就可以在 concole 中获取到 DOM 节点:
6、节点变化时中断
DOM 是个有趣的东西。有时候它发生了变化，但你却并不知道为什么会这样。不过，如果你需要调试 JavaScript，Chrome 可以在 DOM 元素发生变化的时候暂停处理。你甚至可以监控它的属性。在 Chrome 探查器上，右键点击某个元素，并选择中断（Break on）选项来使用：
7、在控制台中快速访问元素
在控制台中执行 querySelector 一种更快的方法是使用美元符。$(‘css-selector’) 将会返回第一个匹配的 CSS 选择器。$$(‘css-selector’) 将会返回所有。如果你使用一个元素超过一次，它就值得被作为一个变量。
8、查看具体的函数调用和它的参数
在 Chrome 浏览器的控制台（Console）中，你会把你的注意力集中在具体的函数上。每次这个函数被调用，它的值就会被记录下来。
然后输出：
9、格式化代码使调试 JavaScript 变得容易
有时候你发现产品有一个问题，而 source map 并没有部署到服务器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 即可。
10、用 console.time() 和 console.timeEnd() 测试循环耗时
当你想知道某些代码的执行时间的时候这个工具将会非常有用，特别是当你定位很耗时的循环的时候。你甚至可以通过标签来设置多个 timer 。demo 如下:
运行结果:
调试，是在项目开发中非常重要的环节，熟练掌握各种调试手段，定当为你的职业发展带来诸多利益。但是，在如此多的调试手段中，如何选择一个适合自己当前应用场景的，这需要经验，需要不断尝试积累。
javascript调试技巧
1.打印输出信息console.log用于通常的打印信息console.table打印对象信息；console.trace(‘tracecar’)查看函数的调用栈，特别地有效。3.断点调试有三个方法，一、直接找出代码行加个断点；二、在代码中添加debugger，浏览器会自动在debu... 查看详情
20个chromedevtools调试技巧(代码片段)
译者按： ChromeDevTools很强大，甚至可以替代IDE了！原文: ArtofdebuggingwithChromeDevTools为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。谷歌开发者工具提供了一系列的功能来帮助开... 查看详情
29个要点帮你更好的完成java代码优化
...面我们就来具体地分析一下这方面的问题。 29个要点帮你更好的完成java代码优化 1、尽量指定类的final修饰符带有final修饰符的类是不可派生 查看详情
更快地编写更好的代码：5分钟阅读
...分钟阅读关于如何在不影响质量的情况下更快地编码的小技巧最近，我阅读了DavidFarley的“现代软件工程”，它详细阐述了现代软件开发核心的持久性原则。我认为这本书对于经验丰富的工程师和初级工程师来说都是一个... 查看详情
前端调试效率低？试试这10个“chrome开发者工具”使用技巧
...分享一些使用“Chrome开发者工具”的小技巧。包括调试，优化页面渲染速度等。希望能提升Web开发人员的工作效率。 1，打开ShadowDOM显示浏览器对例如Video、Password等组件进行了封装，无法查看到组件的详细代码，不利... 查看详情
更好/更快地循环遍历集合或列表？
】更好/更快地循环遍历集合或列表？【英文标题】：Better/FastertoLoopthroughsetorlist?【发布时间】：2013-02-1216:01:13【问题描述】：如果我有一个包含许多重复项的python列表，并且我想遍历每个项目，而不是重复项，最好使用一个集... 查看详情
更好地理解 javascript 预编译
】更好地理解javascript预编译【英文标题】：Abetterunderstandingofjavascriptprecompile【发布时间】：2015-04-2111:36:12【问题描述】：varfoo=1;functionbar()foo=10;return;functionfoo()bar();alert(foo);我目前正在学习javascript是如何在机器中实际运行的，这... 查看详情
js调试必备的5个debug技巧
1.debugger; debugger语句用于停止执行JavaScript，并调用(如果可用)调试函数。使用debugger语句类似于在代码中设置断点。通常，你可以通过按下F12开启调试工具，并在调试菜单中选择"Console"。进入断点后,可以双击下面的某行代码,... 查看详情
javascript的工作原理：解析抽象语法树（ast）+提升编译速度5个技巧(代码片段)
这是专门探索JavaScript及其所构建的组件的系列文章的第14篇。如果你错过了前面的章节，可以在这里找到它们：JavaScript是如何工作的：引擎，运行时和调用堆栈的概述！JavaScript是如何工作的：深入V8引擎&编写优化代码的5个... 查看详情
程序员必备的10个unity小技巧！！！
游戏技巧游戏优化是游戏成功的必要条件。即使这个游戏设计的很好，但它仍可能存在性能问题。要确保用户的Unity游戏经过优化，请尝试以下提示。1、性能问题的来源在开始优化游戏之前，用户需要找出性能问题的... 查看详情
更好地理解 JavaScript 中的回调函数
】更好地理解JavaScript中的回调函数【英文标题】：GettingabetterunderstandingofcallbackfunctionsinJavaScript【发布时间】：2010-10-0317:48:00【问题描述】：我了解将一个函数作为回调传递给另一个函数并让它执行，但我不了解执行此操作的最... 查看详情
PHP 如何更快地执行这些检查/或更快地加载页面？
...:37:13【问题描述】：我是PHP新手，我想知道执行此操作的更好方法是什么？PHP使用own3d.tv和justin.tv提供的2个API来检查流的状态是否在线/离线。我实现它的方式很糟糕，因为如果你加载页面，它会单独检查PHP 查看详情
javascript调试技巧
1.‘debugger;’除了console.log,debugger;是我们最喜欢、快速且肮脏的调试工具。一旦执行到这行代码，Chrome会在执行时自动停止。你甚至可以使用条件语句加上判断，这样可以只在你需要的时候运行。愚人码头注：本人实在觉得这种... 查看详情
javascript调试技巧(代码片段)
...meEnd()测试循环console.log()和console.dir()的区别阐述我们调试Javascript一般会用到Chrome和Firefox的控制台作为调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们 查看详情
javascript调试技巧(代码片段)
...meEnd()测试循环console.log()和console.dir()的区别阐述我们调试Javascript一般会用到Chrome和Firefox的控制台作为调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们 查看详情
掌握这4个word常用技巧，帮你轻松快捷完成工作！
今天给大家分享4个Word高效率技巧，可以在日常工作中帮你节省时间提高效率，建议收藏哦！快速生成文本目录点击菜单栏的"引用"---"目录"---"手动目录"，就可以快速生成目录。如果内容调整了，需要更新... 查看详情
5个excel实用技巧，帮你大大提高工作效率！
今天给大家分享5个Excel实用的小技巧，学会了可以帮助我们在日常工作中快速提高工作效率！1.快速隐藏单元格数据若是想对单元格中的某些数据隐藏，使用单元格自定义即可。选中单元格数据，点击鼠标右键选择"设置单元... 查看详情
20个实用而专业的javascript技巧
我为你收集了一系列有用的JavaScript技巧，让你的代码看起来更优雅和专业。我希望你会喜欢它！1、单线If-Else在JavaScript中，你可以使用三元条件运算符来压缩if-else语句。例如：constage=10;letgroup;//LONGVERSIONif(age>=18){group="Adult";}els... 查看详情