谷歌调试器调试的js

Lazar Nikolov 拉扎尔·尼科洛夫(Lazar Nikolov) Follow 跟随 Sep 20 九月20

Originally published at nikolovlazar.com

最初发布于nikolovlazar.com

什么是Next.JS (What is Next.JS)

Next.JS is an amazing React framework created by Vercel. It allows the developers to create Server-side, Client-side or Static websites. Unlike the other frameworks, the rendering in Next JS is per page. That means, the “about” page can be static, while the “home” page can be server-side. Next JS is on the rise, loved by the developers, and my favorite React framework so far.

Next.JS是由Vercel创建的惊人的React框架。 它允许开发人员创建服务器端，客户端或静态网站。 与其他框架不同，Next JS中的呈现是按页面进行的。 也就是说，“关于”页面可以是静态的，而“主页”页面可以是服务器端的。 到目前为止，开发人员和我最喜欢的React框架都非常喜欢Next JS。

If you want to learn more about website rendering, read my other post here.

如果您想了解有关网站渲染的更多信息，请在此处阅读我的其他文章。

环境 (Environment)

This article covers the debugging process using Visual Studio Code. You can use the same commands in other IDEs, but you need to write them in the specific format.

本文介绍了使用Visual Studio Code进行调试的过程。 您可以在其他IDE中使用相同的命令，但是需要以特定的格式编写它们。

For simplicity, we will use this repo to show the debugging process. So, go ahead and clone it on your computer, execute yarn install and open it in Visual Studio Code.

为简单起见，我们将使用此仓库显示调试过程。 因此，继续将其克隆到您的计算机上，执行yarn install并在Visual Studio Code中将其打开。

调试Next.JS (Debugging Next.JS)

A Next.JS page has two parts: a server-side part and a client-side part. To debug both parts you will need two VSCode launch tasks. Let’s dive in.

Next.JS页面分为两部分：服务器端部分和客户端部分。 要调试这两个部分，您将需要两个VSCode启动任务。 让我们潜入。

调试服务器端 (Debugging the Server-side)

The server-side code lives in the getServerSideProps method. It executes every time there's a request. To debug the server-side code we will need to add a new VSCode launch task. First, create a .vscode folder in the root of the project, and then inside that folder create a launch.json file. We will add our launch tasks here.

服务器端代码位于getServerSideProps方法中。 它在每次有请求时执行。 为了调试服务器端代码，我们将需要添加一个新的VSCode启动任务。 首先，创建一个.vscode在项目的根文件夹，然后将该文件夹中创建一个launch.json文件。 我们将在此处添加启动任务。

Inside the launch.json file add a new "Node: Launch Program" configuration. Then, you will need to add the following changes:

在launch.json文件中，添加新的“节点：启动程序”配置。 然后，您将需要添加以下更改：

Remove the skipFiles property

删除skipFiles属性

Remove the program property

删除program属性

Add a new property runtimeExecutable with value ${workspaceFolder}/node_modules/.bin/next

添加一个新属性runtimeExecutable ，其值为${workspaceFolder}/node_modules/.bin/next

Your launch.json file should look something like this:

您的launch.json文件应如下所示：

{ "configurations": [ { "type": "pwa-node", "request": "launch", "name": "Next: Node", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next" } ]}

That’s it! Now open the /pages/[owner]/[repo].tsx file, add a breakpoint on line 32 and hit F5. When the Next.JS server starts navigate to http://localhost:3000 and click on one of the repos in the list. After clicking it, you should hit the breakpoint. Now you have the ability to inspect the ctx argument and the data received from GitHub's API.

而已！ 现在打开/pages/[owner]/[repo].tsx文件，在第32行添加一个断点，然后按F5键。 当Next.JS服务器启动时，导航到http：// localhost：3000并单击列表中的存储库之一。 单击它之后，您应该点击断点。 现在，您可以检查ctx参数和从GitHub API接收的数据。

调试客户端 (Debugging the Client-side)

To debug the Client-side first you need to install the Debugger for Chrome extension. Open the link and click on the Install button. It will ask you to open the link in Visual Studio Code, so click on the “Open Visual Studio Code” button.

首先要调试客户端，您需要安装Debugger for Chrome扩展程序。 打开链接，然后单击“安装”按钮。 它将要求您在Visual Studio Code中打开链接，因此单击“打开Visual Studio Code”按钮。

As I mentioned above, you will need two launch tasks, so let’s create the client-side one. Head to launch.json and add a new "Chrome: Launch" task. Then, you will only need to make one change:

如前所述，您将需要两个启动任务，因此让我们创建一个客户端任务。 前往launch.json并添加一个新的“ Chrome：启动”任务。 然后，您只需要进行以下更改：

Change the url value to http://localhost:3000

将url值更改为http://localhost:3000

Your complete launch.json file should look something like this:

您完整的launch.json文件应如下所示：

{ "configurations": [ { "name": "Launch Chrome", "request": "launch", "type": "pwa-chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" }, { "type": "pwa-node", "request": "launch", "name": "Next: Node", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next" } ]}

And that’s it! Now, open the /pages/index.tsx file and add a breakpoint on line 9. You can now launch the Launch Chrome task from the debug panel. The Launch Chrome task should open a new Chrome window on the home page. Start typing into the input on the screen and you will hit the breakpoint in the index.tsx file. Now you have the ability to inspect the client-side properties, like the repo variable. Click continue and type another letter. You will hit the breakpoint every time you type something in the input. Hover on the repo variable to see the value changing. You're now debugging the client-side code!

就是这样！ 现在，打开/pages/index.tsx文件并在第9行添加一个断点。现在，您可以从调试面板启动“启动Chrome”任务。 启动Chrome任务应在主页上打开一个新的Chrome窗口。 开始在屏幕上输入内容，您将在index.tsx文件中找到断点。 现在，您可以检查客户端属性，例如repo变量。 单击继续，然后键入另一个字母。 每次在输入中输入内容时，您都会遇到断点。 将鼠标悬停在repo变量上以查看值更改。 您现在正在调试客户端代码！

结论 (Conclusion)

Now you know how to debug both sides in a Next.JS app. The server side code is node, so you need a Node debug task for it. The client side is Chrome, so you need a Chrome debug task for it.

现在您知道了如何在Next.JS应用程序中调试双方。 服务器端代码是节点，因此您需要一个节点调试任务。 客户端是Chrome，因此您需要执行Chrome调试任务。

Also, debugging is a vital process in software engineering, so use it everywhere you can! Don’t use only console.log for debugging.

另外，调试是软件工程中至关重要的过程，因此请尽可能使用它！ 不要仅使用console.log进行调试。

翻译自: https://medium.com/codechem/debugging-next-js-ec5a6c889f7b

谷歌调试器调试的js