小菜的前端编程散谈（5）

代码编辑和调试

光说不练假把式，上篇已经给出了一些初级的编程题目。那么本篇就来讲一说代码编辑和调试
关于Javascript代码的编辑，有如下几种方式，这里列一下

1. 使用编辑器，好比Sublime Text等编辑器，编辑完html文件，而后保存为html文件，而后使用浏览器打开，看效果。若是文件从新编辑保存，那么在浏览器中刷新一下就能看到更改以后的效果
   
2. 使用编辑器和插件，好比Sublime Text等编辑器，配合一些插件，直接快速打开浏览器进行浏览，好比我安装了一个叫View in Browser插件，能够很方便的快速浏览查看效果 （随便选择）

以上是针对HTML或者是Javascript中包含DOM操做的代码的测试方式，那么若是是纯粹的Javascript代码编程，应该如何编写和查看运行呢？

1. 使用Node的REPL命令行进行测试，固然这个须要安装Node，安装完了以后，在cmd命令行中敲node，而后就进入交互式环境，能够运行javascript代码了。能够试试 [这个知道一下，暂时不用]
2. 使用Chrome或者Firefox控制台进行Javascript交互，能够网上搜一下chrome控制台和firefox控制台。很方便的
3. 直接在网页中使用console.log(...)打印javascript消息和结果，个人做业答案中的最后一道题的答案中就是这样的方式，使用浏览器打开以后，而后打开浏览器控制台（Chrome和Firefox中快捷键都是Ctrl+Shift+J，而后点击控制台，或者是Console），这个控制台有啥用呢？一方面能够输出网页中执行的Javascript消息结果（使用console.log打印的一些消息，或者错误也会打印出来）,另外一方面，本身在控制台中运行代码，能够直接打印出结果，能够试一下
4. Firefox中的代码草稿纸（快捷键是Shift+F4）也不失为一种不错的选择，能够编写javascript代码，而后选中代码（或者变量等），而后“运行”、“查看”、或者“显示”，能够试试看，仍是不错的

OK，上面说了Javascript代码的编写和运行，那么Javascript代码的调试呢？调试的话，最好就是使用Chrome或者Firefox中的开发者工具了，通常的作法是打开开发者工具（Ctrl+Shift+J），而后切到“脚本”（在Chrome中应该是Source），找到你的Javascript代码，而后在代码的左侧边栏单击一下（就是行号的左边一点的地方），而后会出现一个红点，这个就叫断点，Javascript代码运行到这里会停下来，试一下，进断点以后，你能够查看当前做用域中各个变量的值，通常右侧有一个监控窗口，能够看到各个变量的值，不信你试试，这是很是实用的技巧。固然具体调试过程当中通常还有几个调试指令，通常都有小按钮的，我这里说明一下

1. 继续（快捷键F8），表示程序从当前断点一直日后跑，若是后面没有断点会一直往下跑，不然会进入断点
2. 单步跳过（快捷键F10），表示程序越过当前这一步，跳到下一步。好比有两行代码，断点在第一行，那么按F10，会执行到下一行
3. 单步进入（快捷键F11），表示断点从当前代码进入到代码内部，这个只针对有子函数或者子调用有效。好比当前代码是调用一个函数 var f = fib();那么单步进入以后，断点会进入到fib函数的内部去
4. 单步跳出（快捷键Shift+F11），表示断点从当前函数中跳出到上一级调用，和单步进入互相配合使用，固然若是一直F10到最后，其实也会跳到上一级调用的

OK，说完了代码调试，我建议仍是本身试一把，一边执行代码一边看代码是如何运行的，而后看看那些变量的值是如何变化的。仍是能够好好折腾一番的，这也算是基本功了，好好练一下！

最后，我把上一篇的题目的答案放到附件里，我今天抽空写的，能够参考一下。看看你的实现方式和我有什么不同的地方。其实斐波那契数列那个可使用递归来作的，本身能够尝试用递归作一下

提示一下：编程是个长期活，不要急躁慢慢来，我要讲的编程概念已通过了一半了。是否是以为东西很少？其实真的很少，剩下的就是熟悉特定语言的特定特性，熟悉某些库某些接口某些内置的函数了，代码看得多了写得多了，一切瓜熟蒂落！

编程题目实现代码下载