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，它们会教给您最有价值的编程知识……然后…… 哦！ 你要去的地方

翻译自:

javascript初学者