javascript初學者

by Priyanka Garg

由Priyanka Garg

My intended audience for this tutorial is beginner programmers. You’ll learn about frustration-free debugging with chrome dev tools.

本教程的目標讀者是初學者。 您將學習使用chrome開發工具進行無挫折的調試。

Dear Beginner, a while ago, I was where you are! After a lot of struggles, I feel like I have come far in my learning journey. I am currently in the senior phase of an immersive bootcamp where I am building full stack applications.

親愛的初學者，前一陣子，我在你身邊！ 經過很多努力，我覺得自己在學習過程中走了很遠。 我目前處于沉浸式訓練營的高級階段，在那里我將構建完整的堆棧應用程序。

Every day, I learn and stumble upon so many things, which I wished I knew before. This article is an attempt to share one such idea that will make your life easier.

每天，我學習并偶然發現了很多我以前希望知道的東西。 本文試圖分享一種這樣的想法，使您的生活更輕松。

As you must have learned, the best way to learn programming is by doing. Now, as you start practicing coding, sometimes (or most of the times) your code will not work; in other words, there will be a BUG in your code. And you may have already tried and learned some approaches to debugging. This article is not about any one debugging approach, but rather a setup to debug your code for programming practice.

正如您必須了解的那樣，學習編程的最佳方法是邊做邊學。 現在，當您開始練習編碼時，有時(或大部分時間)您的代碼將無法工作； 換句話說，您的代碼中將存在一個BUG。 您可能已經嘗試并學習了一些調試方法。 本文不涉及任何一種調試方法，而是一種用于調試代碼以進行編程實踐的設置。

If you are practicing on an online development environment, most probably you have a setup where you have an editor, a problem and a test suite that tests your program.

如果您在在線開發環境中進行練習，則很可能您會在安裝程序中擁有一個編輯器，一個問題和一個測試程序的測試套件。

You have written code, and there are some bugs, and at some point, the errors thrown up by the test suite are not really helpful.

您已經編寫了代碼，并且存在一些錯誤，并且在某些時候，測試套件引發的錯誤并沒有真正的幫助。

I won’t elaborate on how tedious debugging can become here — rather let me jump straight to some tips for beginners.

我不會詳細說明調試會變得多么繁瑣，而是讓我直接跳入門的一些技巧。

問題 (The problem)

As an example, I am writing a palindrome checker in FreeCodeCamp’s editor. My solution fails. In this case, we could use the test suite results to debug.

例如，我正在FreeCodeCamp的編輯器中編寫回文檢查器。 我的解決方案失敗。 在這種情況下，我們可以使用測試套件的結果進行調試。

But let’s assume this test suite doesn’t give me great pointers to the exact error. (This may not be the ideal example in terms of a logical error. The point is you will come across problems where the test suite will not directly point to a logical error.)

但是，讓我們假設這個測試套件沒有給我很好的指示確切錯誤的指針。 (就邏輯錯誤而言，這可能不是理想的例子。問題是您會遇到測試套件不會直接指向邏輯錯誤的問題。)

提示： 使用開發人員工具的控制臺。 (Tip: Use the console of developer tools.)

I run the same code in the console with the failing test case, and I see it returns ‘undefined’. That means the code did not return any value. I can quickly see that I forgot to return ‘true ’ if the string was found to be a palindrome.

我在測試用例失敗的情況下在控制臺中運行相同的代碼，并且看到它返回“未定義”。 這意味著代碼沒有返回任何值。 我可以很快看到，如果發現該字符串是回文，我忘記返回'true'。

This was a very simple error. Most of the times you would have bugs that need you to examine your variables. One approach to check variables is to console.log(<variables>) in the program.

這是一個非常簡單的錯誤。 在大多數情況下，您會遇到需要檢查變量的錯誤。 一種檢查變量的方法是在程序中使用console.log(<variable s>)。

However, I would suggest you use the dev tools debugger instead. In your program, you can specify the point where you want to start getting help from the debugger.

但是，我建議您改用開發工具調試器 。 在程序中，您可以指定要從調試器開始獲得幫助的位置。

The debugger will show you all the variables in the call stack and let you step through function calls, which you will find very useful.

調試器將向您顯示調用堆棧中的所有變量，并逐步執行函數調用，您會發現它們非常有用。

You will get the hang of using the debugger once you have used it a few times. Notice the arrows in the lower left box? These will let you control the program flow and show you the variables as they change.

一旦使用了幾次調試器，您將無所適從。 注意左下方的箭頭了嗎？ 這些將使您可以控制程序流程并向您顯示變量的變化。

Now let’s head for a trick.

現在讓我們來個技巧。

技巧：進行個人調試設置 (Trick: Make a Personal Debugging Setup)

As seen above, with debugger and console, we can identify the problems easily. However, if I want to run the corrected program again on the console with just one line of change, I would have to re-type it.

如上所示，使用調試器和控制臺，我們可以輕松識別問題。 但是，如果只想更改一行就可以在控制臺上再次運行更正的程序，則必須重新輸入它。

Even after that, I get an error:

即使在那之后，我仍然得到一個錯誤：

This error is because I have used an arrow function, and cannot re-declare a const. This means that I would have to open a new tab and new console every time I change my code. Extra overhead, right?

此錯誤是因為我使用了箭頭功能，并且無法重新聲明const。 這意味著我每次更改代碼時都必須打開一個新的選項卡和新的控制臺。 額外的開銷，對不對？

Let's find a workaround. On your system, create a directory and cd into that directory.

讓我們找到一種解決方法。 在您的系統上，創建目錄并cd進入該目錄。

Now create two files: index.js and index.html. Type the following HTML in index.html:

現在創建兩個文件：index.js和index.html。 在index.html中輸入以下HTML：

Now move your code from the console to index.js. Notice I have started the debugger on line 2 in the code.

現在，將代碼從控制臺移至index.js。 注意，我已經在代碼的第2行啟動了調試器。

Now run the index.html file in the browser. Open the developer tools or console (you may have to refresh to see the debugger). You can debug your code here.

現在，在瀏覽器中運行index.html文件。 打開開發人員工具或控制臺(您可能必須刷新才能看到調試器)。 您可以在此處調試代碼。

Now every time you make a change to index.js you just hit refresh on this tab and the code reruns. No need to close and open tabs, no re-typing whole programs.

現在，每次對index.js進行更改時，只需在此選項卡上單擊“刷新”，然后代碼就會重新運行。 無需關閉和打開選項卡，無需重新鍵入整個程序。

Keep the folder you just created handy. Whenever you need to try or debug a piece of code, pop that into index.js and experiment!!

將剛剛創建的文件夾放在手邊。 每當您需要嘗試或調試一段代碼時，請將其彈出到index.js中并進行實驗！

總結思想 (Closing thoughts)

If you already knew this, congratulations you wasted a valuable 4 minutes ;)

如果您已經知道這一點，那么恭喜您浪費了寶貴的4分鐘;)

Finally, remember to err is human! Don’t worry about bugs — they will teach you the most valuable lessons of programming… and then ... Oh! the places you’ll go…

最后，記得犯錯是人類！ 不用擔心bug，它們會教給您最有價值的編程知識……然后…… 哦！ 你要去的地方

翻譯自: https://www.freecodecamp.org/news/debugging-javascript-for-beginners-5d4ac15dd1cd/

javascript初學者