前端调试devtools_如何使用浏览器的Devtools调试JavaScript

前端调试devtools

As a developer you will often want to debug code. You might have already used console.log in some of the challenges, which is the simplest way to debug.

作为开发人员，您通常会希望调试代码。 您可能已经在一些挑战中使用了console.log ，这是最简单的调试方法。

In this article we will tell you some of the coolest tricks, to debug using the native debug-tools of the browsers.

在本文中，我们将告诉您一些最酷的技巧，以便使用浏览器的本机调试工具进行调试。

对FreeCodeCamp代码编辑器的简要了解： (A brief insight into the FreeCodeCamp Code Editor:)

Before jumping into debugging lets leak out some secret facts about that awesome code checking engine at FCC.

在进入调试之前，让我们泄漏一些有关FCC出色的代码检查引擎的秘密事实。

We use a customized CodeMirror, as the code editor. A eval() function is used to evaluate the JavaScript code represented as a string from the editor. When eval() is called, browsers will natively execute your code. We will learn more why this secret is important in later sections of this article.

我们使用自定义的CodeMirror作为代码编辑器。 eval()函数用于从编辑器中评估以字符串形式表示JavaScript代码。 调用eval() ，浏览器将本机执行您的代码。 我们将在本文的后面部分中了解更多有关此秘密为何如此重要的原因。

现在继续讲解技巧： (Now moving on to the tricks:)

Google Chrome开发者工具 (Google Chrome DevTools)

Google Chrome is one of the most popular browsers with a built-in JavaScript engine called V8, and offers a great toolset for developers called Chrome DevTools. Visiting their Complete JavaScript debugging guide is highly recommended.

谷歌浏览器是使用内置JavaScript引擎V8的最受欢迎的浏览器之一，并且为开发人员提供了一个很棒的工具集，称为Chrome DevTools 。 强烈建议访问其完整JavaScript调试指南 。

1：DevTools基础 (1 : Basics of DevTools)

启动Chrome DevTools (Launching the Chrome DevTools)

Hit F12

击中F12

. Alternatively you can press

。 或者，您可以按

Ctrl + Shift + I

Ctrl + Shift + I

on Windows and Linux or

在Windows和Linux上，或

Cmd + Shift + I

Cmd + Shift + I

on Mac, or If you just love your mouse go to Menu > More Tools > Developer Tools.

在Mac上，或者如果您只喜欢鼠标，请转到Menu > More Tools > Developer Tools 。

了解“ Sources和“ console选项卡。 (Getting to know the Sources and the console tabs.)

These two tabs are the perhaps going to be your best friends while debugging. The Sources tab can be used to visualize all the scripts that’s on the webpage you are visiting. This tab has sections for the code window, file tree, call stack & watch windows, etc.

这两个选项卡可能是调试时最好的朋友。 Sources选项卡可用于可视化您正在访问的网页上的所有脚本。 此选项卡包含代码窗口，文件树，调用堆栈和监视窗口等部分。

The console tab is where all of the log output goes. Additionally you can use the console tab’s prompt to execute JavaScript code. Its kind of synonymous to the command prompt on Windows, or terminal on Linux.

console选项卡是所有日志输出所在的位置。 另外，您可以使用“控制台”选项卡的提示来执行JavaScript代码。 它与Windows或Linux上的命令提示符同义。

Tip : Toggle the console anytime in the DevTools using Esc key.

提示：随时可以使用Esc键在DevTools中切换控制台。

2：常见的快捷方式和功能 (2 : Common Shortcuts and features)

While you can visit the complete list of shortcuts, below are a few that are most used:

您可以访问快捷方式的完整列表 ，以下是一些最常用的快捷方式 ：

Feature Windows, Linux MacSearch for a keyword, regex is supported. Ctrl+F``Cmd+FSearch and Open a file Ctrl+P``Cmd+PJump to line Ctrl+G+:line_no``Cmd+G+:line_noAdd a breakpoint Ctrl+B, or click on the line no.Cmd+B, or click on the line no.Pause / resume script execution F8 F8Step over next function call F10 F10Step into next function call F11 F11

功能Windows，Linux Mac支持搜索关键字regex。 Ctrl + F``Cmd + F搜索并打开文件Ctrl + P``Cmd + P跳转至行Ctrl + G + :line_no``Cmd + G + :line_no添加断点Ctrl + B或单击该行没有。 Cmd + B或单击行号暂停/恢复脚本执行F8 F8越过下一个功能调用F10 F10越过下一个功能调用F11 F11

3：将源映射用于我们的代码 (3 : Using a Source Map for our Code)

One of the coolest feature that you will love is debugging Dynamic Script, on the fly, via Source Maps.

您将喜欢的最酷的功能之一是通过Source Maps 动态调试Dynamic Sc​​ript 。

Every script can be visualized in the Source tab of the DevTools. The source tab has all the JavaScript source files. But the code from the code editor is executed via eval()in a container simply called a virtual machine(VM) within the browser process.

每个脚本都可以在DevTools的Source选项卡中显示。 “源”选项卡包含所有JavaScript源文件。 但是，来自代码编辑器的代码是通过eval()在浏览器进程内的容器(简称为虚拟机(VM))中执行的。

As you might have guessed by now is that our code is actually a script that doesn’t have a file name. So we don’t see that in the Source tab.

您可能现在已经猜到了，我们的代码实际上是一个没有文件名的脚本。 因此，我们在“源”选项卡中看不到它。

Here comes the hack!

骇客来了！

We must leverage Source Maps to assign a name to the JavaScript from our editor. Its pretty simple:

我们必须利用Source Maps从我们的编辑器为JavaScript分配名称。 它非常简单：

Lets say we are on the Factorialize challenge, and our code looks like this:

可以说我们正面临着阶乘挑战，我们的代码如下所示：

function factorialize(num) {
  if(num <= 1){
  ...
}
factorialize(5);

All we need to do is add //# sourceURL=factorialize.js to the top of the code, i.e the first line:

我们要做的就是在代码顶部(即第一行)添加//# sourceURL=factorialize.js 。

//# sourceURL=factorialize.js

function factorialize(num) {
  if(num <= 1){
  ...

And Eureka that’s it!

和尤里卡就是这样！

Now open up the DevTools and search for the file name. Add break points, Debug away and enjoy!

现在打开DevTools并搜索文件名。 添加断点，调试即可享受！

有关调试的更多信息： (More info on debugging:)

• Beginner's guide to bug squashing

  壁球压缩入门指南

• Debugging tips and tricks for beginners

  初学者的调试技巧和窍门

• How to get the most out of your browser's debugging console

  如何充分利用浏览器的调试控制台

翻译自: https://www.freecodecamp.org/news/how-to-debug-javascript-with-your-browsers-devtools/

前端调试devtools