小菜的前端編程散談（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，說完了代碼調試，我建議仍是本身試一把，一邊執行代碼一邊看代碼是如何運行的，而後看看那些變量的值是如何變化的。仍是能夠好好折騰一番的，這也算是基本功了，好好練一下！

最後，我把上一篇的題目的答案放到附件裏，我今天抽空寫的，能夠參考一下。看看你的實現方式和我有什麼不同的地方。其實斐波那契數列那個可使用遞歸來作的，本身能夠嘗試用遞歸作一下

提示一下：編程是個長期活，不要急躁慢慢來，我要講的編程概念已通過了一半了。是否是以爲東西很少？其實真的很少，剩下的就是熟悉特定語言的特定特性，熟悉某些庫某些接口某些內置的函數了，代碼看得多了寫得多了，一切瓜熟蒂落！

編程題目實現代碼下載