一、前言
准备写一个重温基础系列的文章，但是为什么选择第一篇是调试呢，而不是变量提升，作用域，闭包之类的呢，原因其实很简单，会了调试剩下的这些要懂要理解只是时间问题，而且会理解的更快懂得很深刻。我个人认为学习一门编程语言就应该从调试入手，可能前端程序员对于从入门就是开始学习html，css完全忽略了学习调试这个环节，很多前端程序员可能工作一年两年之后才开始慢慢学会调试，这一年两年内不会调试很多问题是会花掉很多不必要的时间，本来调试分分钟解决的问题，因为你不会而导致你去看代码花了很长的时间才找到问题，所以我个人认为前端最应该先学好的是浏览器，当然现在这个大前端如此火爆的年代，我们也不能仅仅只掌握浏览器的调试了，但是至少先掌握好浏览器的调试。
二、熟练运用调试工具的好处
我们现在主流的是几大浏览器都有调试工具，也就不一一去举例了，现在就用我个人最常用的chrome来做一些非常简单的演示，至于详细的各种用法我觉得还是去看官方文档比较靠谱，我写这篇文章目的并不是去展示chrome的每个调试技巧，而是让大家明白，调试在我们的学习工作中的重要性和带来的便利。
- 简单的css调试 code
大量的css我们在编辑器中去写了，但是很多css样式的微调，我们在脑海中去想象还不如在调试工具中去直观的查看来的快捷靠谱。
常见的鼠标移入显示一个元素，在工作学习中见的应该很多了，我们写的时候一般可能是把元素不隐藏，先把样式调好在隐藏显示，还有一种方式是利用调试工具的帮助了，我们在调试工具中可以给元素设置hover状态，这样我们可以在浏览器中去微调，至于喜欢那种方式就看个人喜好了。
我们选中span去:hov下设置hover状态就能看到页面已经呈现hover状态了。
我们可以查看元素盒模型。
我们可以去看元素生效的属性，可以去勾选show
all可以看到所有的css属性这样我们是不是多看几次就能记住很多属性呢。
- 简单的js调试 code
js的调试先对于来说我觉得会更重要一些，至少我自己很多问题都是通过调试解决的，而且调试解决的速度有时候会比你看代码去解决的速度快上很多。
这里简单的用一道面试题来演示一下简单的js调试。
let fullname = 'Global Name';
let obj = {
fullname: 'Obj Name',
prop: {
fullname: 'Prop Name',
getFullname: function () {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
let test = obj.prop.getFullname;
console.log(test());
不了解let的就会说是Prop Name和Global Name，而又有不少人根本不知道输出什么，而有的人不知道输出什么就会去网上各种大神问，然后可能告诉你一个答案，可能听懂了可能没听懂，遇到下一个问题还是一脸懵逼，所以学习效率就会很低，这并不是说谁笨谁聪明，而是好的学习方法和务实的态度比聪明重要。
究竟是脱口而出的这个答案对呢还是不是对呢我们可以去调试工具中求证一下。
我们去代码中打下一个断点，向下执行几步
可以看到我们执行test()的时候this是Window对吧，那按照道理说上面的答案就是对的了吧。去看一下答案就知道了，猜测都是徒劳的。
看到最后的答案可能会有些惊讶对吧，是不是this搞错了呢，我们再去瞧一瞧this是不是对的
可以看到this是Window没毛病，那问题出在哪里，去Window中搜索fullname
发现Window中没有，this是对的Window中没有fullname变量，那么只能认为是let和var的机制不一样咯，我们先去把let换成var试试
发现换成var和我们上面的答案一致了，我们还是再去看看this搜索一下fullname
可以看到我们在Window中找到了fullname
从这一个小小的调试就能得出let声明的变量不再试全局对象的属性了。虽然文档中可以找到相关的描述，但是自己动手一遍会记忆更加深刻。
看似很简单的代码，如果按照之前的经验是不是会说出上面的答案之后就不会再去深究不会去管是对还是错了呢，这样就会导致一年工作经验用五年了。
三、学习方法
对于前端程序员来说，自学的偏多，因为毕竟大学也没正式的开一个前端开发的专业的对吧，这里我们也就聊聊怎样的自学方式会很快速的掌握大部分知识点，让你面试和工作略胜一筹呢。
就拿上面的问题继续来说学习的一些问题，假如我们完全不了解let和var有什么区别，那就去搜去查。
一般的问题，看完google搜索的前十篇文章都能解决了，除非你搜索的关键词有很大的问题。
这样就即解决了遇到问题的疑惑，还能学到新的知识点，就像上面的除了掌握了this，还让自己在调试中去了解到了let和var的一个差别，然后再去搜资料了解了更多的let的知识点。一个点这样延伸出两个三点，只要坚持这样去发掘学习，就会形成一张你自己的知识网。为什么说是网而不是树呢，因为很多知识点之间是有联系的。
四、学习资料
有人会说我英文差看不懂很多官方文档，其实很多官方文档都是有中文版的，得感谢那些辛辛苦苦翻译文档的人。
chrome开发者工具英文文档
chrome开发者工具中文文档
ECMAScript 6 入门
如果你觉得这里能给你带来一点成长、那就star或者watch吧。