對有經驗的開發人員第一次嘗試Javascript的建議

Question

我對C/C++/Objective-C非常有經驗，過去幾天一直在嘗試我的手在html/css/JS，我發現它非常令人沮喪。

時間和一次又一次我被抓出來，因爲我有一個語法錯誤或未聲明的變量，由於複製/粘貼等，結果是代碼突然停止工作，然後我必須撓我的頭並找出原因。

最痛苦的事情是訴諸灑水警報代碼中的一切東西失敗，以追查原因。我知道有用於記錄的新控制檯對象，但它似乎不適用於Komodoedit或jsFiddle？這是我一直在使用的。

有沒有使用這些工具或替代工具的方法，我可以在調試器中逐行執行代碼，就像我可以使用其他語言一樣？或者除了jslint之外，還可以在執行代碼之前輕鬆檢測代碼問題？我不想使用任何可能內置支持日誌等的庫，因爲我發現它們（以及JQuery/JQuery移動版）正在大大減緩iPhone上的加載時間，所以想要專注於純JS]

[我的目標瀏覽器只是iOS的，但現在用Komodoedit與Chrome的大部分時間，每隔幾個小時嘗試在iPhone上]

感謝

Answer 1

您需要幾個工具。

第一個，讓自己一個真正的調試器。我使用Chrome中內置的一個。 Safari和Firebug中內置了一個類似的插件，可作爲Firefox的附件。這將允許您設置斷點並逐步執行代碼並查看到底發生了什麼。

秒，非常習慣通過jsLint來運行你的代碼。這會告訴你很多明顯的拼寫錯誤，並鼓勵你從第一天開始編寫健壯的代碼。

第三，開始寫在strict模式。這將再次防止一些明顯的錯別字，並迫使你開始一些良好的習慣。

第四，在需要時使用console.log()。一旦你有一個調試器，它的輸出將顯示在調試器的調試控制檯中，用於瀏覽器中的任何頁面，包括jsFiddle頁面。你將不得不調用jsFiddle中的右邊框的調試器，然後它會正常工作。我同時使用jsFiddle和一個普通的調試器，並且使用了這個調試器和console.log()。它需要在jsFiddle和調試器中查找一下，找到你自己的代碼設置斷點的位置，但一旦找到它，就很容易使用。

第五，JavaScript是根本不是C++。雖然語法看起來很熟悉，但您使用匿名函數和閉包以及對象和原型進行操作的方式卻非常不同。作爲使用C++編程多年，然後學習javascript的人，我非常感謝我現在可以在JavaScript中做什麼，這是C++中的更多工作，但花了一段時間才讓我的大腦進入一種新的思維模式。我花了太多時間在我開始嘗試模仿C++技術的第一年javascript開發中，而不是僅僅學習在javascript中完成目標的更好方法。

第六個，你將不得不改變你編寫和測試代碼的方式，因爲缺少一個編譯器來爲你找到錯誤。我記得在C++的時代，當我需要重構某些東西時，我可以做出一系列更改，然後讓編譯器找到我需要修復語法的所有其他位置。你不能用javascript做到這一點。當你進行大規模改變時，你可以通過jsLint來查找一些問題，然後你需要執行每條路徑以確保一切正常。這有點痛苦。

第七，找到一個單元測試的策略/工具。一旦一個項目獲得了超過幾個功能，您將從構建單元測試中受益匪淺，您可以隨時進行重大更改。他們都會在沒有單元測試的情況下爲您找到問題的時間要少很多，當您看到需要的時候，他們會給你勇氣來重構和清理代碼，因爲你知道單元測試會告訴你是否所有東西都是再次工作。前面的額外工作是在路上多次支付股息。

Answer 2

Firefox有一個名爲FireBug的附加組件，對調試CSS/javascript非常有用，是的，它有能力在我們將其作爲命令行，您可以嘗試各種javascript表達式。我很確定Chrome有一個類似的功能。

Answer 3

這裏是你得到的工具列表調試JavaScript的 advance-javascript-debugging-techniques

Answer 4

由於您使用Chrome的文章中，你只需要打開開發者控制檯（扳手 - >工具 - > JavaScript控制檯，或Ctrl + Alt + J（猜測））。您可以使用console.log，console.error和console.info進行打印，而不是使用警報噴灑代碼。所有這些都是可變的，所以你可以根據需要傳遞給一個電話。

除此之外，您可以使用控制檯即時測試和修改代碼的某些部分，或僅嘗試一些片段以查看它們是否有效。這是一個功能齊全的REPL，它也適用於當前文檔。

在開發者控制檯的來源選項卡中，您可以設置斷點並逐步執行代碼，分析每個點的狀態。本頁面進入一些細節吧：http://chromedevtools.googlecode.com/svn-history/r421/trunk/tutorials/breapoints/index.html

在元素選項卡，您可以在變化的DOM元素，包括更改的屬性和子節點設置斷點。右鍵點擊一個節點並選擇你想要的選項。當調試異步代碼並且處理文檔時（例如AJAX調用插入新內容），這將會派上用場。

除此之外，您可以滾動到右側樣式窗格的底部，並打開事件監聽器部分。在這裏，您可以檢查綁定到所選DOM節點的所有事件。

您可以在您的代碼中輸入debugger（不帶分號），並在該位置打開sources選項卡，以便您可以進一步檢查代碼。我認爲這可能是Chrome特定的。

最後，像JSlint這樣的工具將幫助您在編碼時發現未聲明的變量，以及代碼的格式化會導致意外錯誤的情況，有些甚至可能會使用語法突出顯示來使您注意到變量未定義。

這也只是刮表面。你的編輯器和JSlint可以讓你的代碼看起來正確無誤並且解析，但是瀏覽器和它的控制檯是你花費大部分時間的地方。