小菜的前端编程散谈（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，说完了代码调试，我建议还是自己试一把，一边执行代码一边看代码是如何运行的，然后看看那些变量的值是如何变化的。还是可以好好折腾一番的，这也算是基本功了，好好练一下！

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

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

编程题目实现代码下载