姓名：田皓明
学号：14310116025
转载自公众号CSDN技术头条
【嵌牛导读】：本文介绍了如何Debug JavaScript代码的方法和技巧
【嵌牛鼻子】：JavaScript,Debug
【嵌牛提问】：作为Java初学者，如何Debug JavaScript代码，需要注意什么？
译者按：从alert到debugger;看看你属于哪个段位。为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。
作者 | Julie Pagano
翻译 | Fundebug
我常常看到不少开发者不懂如何Debug JavaScript代码，因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。我尝试在本文讲述很多内容，所以有些部分并没有讲得很细。
在开始之前，做一些基本的准备：
这是针对浏览器运行的JavaScript，而不是Node.js；
你需要有一定的编写JavaScript的基础；
你需要在概念上知道Debug是什么；
你最好动起手来，边看边操作。
注意：1. 你最好打开两个窗口，一边看一边操作来学习；2. 本文的主要目的是教会你debug，文中的JavaScript代码并不规范，不要学坏啦。
警告(alert)
使用警告(alert)会弹出一个对话框显示特定的警告信息，并且有一个OK按钮。如果你点击OK，该对话框消失。
alert("Hello! I am an alert.");
这一招蛮有用的，你可以将想要查看的值通过alert显示出来。
// 通过alert来确认代码执行的位置
alert("I am here!");
// 显示foo的值
alert("Foo: " + foo);
但如果你不小心将alert放在了for循环中，那就惨了。我曾经就遇到过，不得不强行将浏览器关闭。
// 除非你喜欢alert, 不要这样做！
for (i = 0; i < 100; i++) {
alert(i);
}
好在，如今的谷歌浏览器已经帮你考虑到这一点。如果你不小心弄出了很多alert，谷歌浏览器会识别出来并建议你将它们都阻止。
曾经，alert是大家非常常用的debug工具。不过，使用alert局限性太大，它只能显示字符串。
// 显示所有的h2标签内容
alert($('h2'));
然而，并不会显示出来：
既然这么不好用，为什么你还要讲呢？因为我们可能有时候不得不使用这样旧式的技巧。我最近一次使用alert是我在debug一个移动设备的时候现有的技巧无法正常工作，我只好用alert。
开发者工具
欢迎来到未来！哈哈，并不是这样。开发者工具已经使用了好些年了。不过呢，很多新的特性被加进去，相信不少人都不知道或则不清楚怎么使用。对于JavaScript debug来说，开发者工具真的非常有用。接下来我来介绍如何使用它。
首先，你需要知道如何打开它。你可以使用快捷键：
Window/Linux: ctrl + shift + I;
OSX: cmd + opt + I
你也可以从谷歌浏览器的菜单栏选择开发者工具选项来打开：
你还可以直接右键，选择检查来打开：
打开后，如下所示：
控制台（Console）
在使用JavaScript做开发的时候，控制台非常有用。当使用C, C++, Java开发的时候，我们可以使用终端(terminal)来debug，控制台拥有和终端相似的功能。
错误
控制台显示JavaScript错误。
同时，也显示了错误在源代码中的位置。点击(index):150就可以跳转到源代码去。
<input type="button"onclick="alert(THE SPICE MUST FLOW);"value"="click to creat an error">
这行代码有错误，你知道哪里出问题了吗？
命令行
控制台拥有的交互式命令行可以用来debug。下面是一些例子：
你可以做一些基础的JavaScript编程
// 数学加法
2 + 2
// 字符串拼接
"the golden " + "path"
// 调用alert
alert("Muad'Dib!");
你也可以执行复杂的JavaScript代码
// 创建变量
var arr = [1, 2, 3];
// 使用shitf+enter键来换行
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i] * 2;
}
arr;
控制台本身也提供了很多有用的函数，详情参考api文档（https://developer.chrome.com/devtools/docs/commandline-api）。
// 通过css选择器获取元素
$$('h2');
// 甚至XPath
$x('//h2');
你可以访问本页面加载的所有库。比如，jQuery：
// 页面背景色变红
$('body').css('background-color', 'red');
// 改回去
$('body').css('background-color', '');
你可以获取当前环境下的变量。
// 当前的this
this;
console.log
console.log在控制台打印信息。
console.log("I am logging to the console.");
我们可以使用它做到之前alert可以实现的功能：
// 确认代码当前执行位置
console.log("I am here!");
// 打印变量值
console.log("Foo: " + foo);
而且，我们可以用for循环将所有的值打印出来：
for (i = 0; i < 100; i++) {
console.log(i);
}
alert只能显示字符串，console.log就强大多了：
// 可以输出DOM元素
console.log($('h2'));
// 可以显示对象
console.log({
book: "Dune",
characters: ["Paul", "Leto", "Jessica", "Chani", "sandworms"]
});
这仅仅是个开始。使用console.log你可以做很多事情，请参考api文档（https://developer.chrome.com/devtools/docs/console-api）。
控制台打印日志已经基本上可以应付日常debug需求了，所以很多开发者止步于此。其实，我们还有更加高级、更加方便的方法。
交互式Debugger
谷歌开发者工具提供了一个交互式debugger。我发现对于复杂的JavaScript代码，特别是自己编写的代码和其它库有交互的时候，特别有用。
你可以再代码中通过调用debugger来开启debug。
// 从这里开始debug
debugger;
只有在打开开发者工具的时候，debugger才会起作用。如果你将开发者工具面板关闭，将不会收到任何影响。
如果你点击继续按钮(右侧蓝色的类似于播放的按钮)，代码会继续执行直到下一个断点。
如果你点击跳过按钮(继续按钮的右侧，第二个)，它会直接执行当前函数，而不是进入函数内部。
如果你想知道makeItColor函数具体如何执行，点击进入按钮(第三个)，就会跳入函数内部。如果你想跳出来，那么点击第跳出按钮(第四个)。
如果想查看变量的值，可以选中并把鼠标放在上面：
你可以敲击ESC键来快速打开控制台，再次敲击ESC，控制台消失。
你可以手动在代码的某一行添加断点来暂停执行。在第31行的左侧鼠标单击，会出现一个断点符号。
库和压缩代码
有时候，为了debug，你可能需要查看库函数的源代码。但是，一般线上的代码都是经过压缩的，很难看懂。比如jQuery：
如果你点击下方的{}按钮，可以将代码适当格式化，但是依然很难看懂。
压缩代码在生产环境十分有必要，但是却十分为难debug。好在，大多数库都提供非压缩版本的代码。所以，你可以在开发中引用非压缩版，线上引用压缩版。
<!--线上-->
<script
src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"type="text/javascript"></script>
<!--开发-->
<script
src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"type="text/javascript"></script>
在线上环境中，如果用户遇到bug如何才能知道呢？推荐你使用fundebug监控服务（https://fundebug.com/）。
Ajax请求
开发者工具的网络部分对于解决网络请求相关问题非常有用。
我用Twitter来举例。
到@horse_js(或则其它页面)
打开开发者工具
点击Network标签
点击filter图标
选中XHR(XMLHttpRequest), 将所有网络请求筛选出来
往下滑动触发网络请求。Headers标签显示该请求的一些基本信息：
Preview显示的是经过浏览器格式化的返回结果(Response)。
Response是原始的返回数据。
Cookies显示请求相关的cookies信息。
Timing显示请求的时间信息。
性能
Debug JavaScript的性能需要很多篇幅去介绍。在这里，给出一些参考资料：
jsPerf（http://jsperf.com/）
Evaluating network performance（https://developer.chrome.com/devtools/docs/network）
Performance profiling with the Timeline（https://developer.chrome.com/devtools/docs/timeline）
Profiling JavaScript Performance（https://developer.chrome.com/devtools/docs/cpu-profiling）
JavaScript Memory Profiling（https://developer.chrome.com/devtools/docs/javascript-memory-profiling）
移动端
你可以使用开发者工具来模拟移动交互，这样就可以直接在桌面浏览器debug。如果想了解更多，查看文档（https://developer.chrome.com/devtools/docs/mobile-emulation）。
当然，你很可能需要真机调试，可以参考下面的文章：
Remote Debugging Chrome on Android（https://developer.chrome.com/devtools/docs/remote-debugging）
Quick Tip: Using Web Inspector to Debug Mobile Safari（http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787）
来源：https://blog.fundebug.com/2017/12/04/javascript-debugging-for-beginners/
