freeCodeCamp

4.5 KiB

Raw Blame History

title	localeTitle
Debugging JavaScript with Browser Devtools	使用浏览器Devtools调试JavaScript

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

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

简要了解FreeCodeCamp代码编辑器：

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

我们使用自定义的CodeMirror作为代码编辑器。 eval()函数用于评估编辑器中表示为字符串的JavaScript代码。调用eval() ，浏览器将本机执行您的代码。我们将在本文后面的部分中了解更多为什么这个秘密很重要。

现在转向技巧：

谷歌Chrome DevTools

谷歌浏览器是最流行的浏览器之一，内置JavaScript引擎V8 ，为开发人员提供了一个很棒的工具集，名为Chrome DevTools 。强烈建议您访问他们的完整JavaScript调试指南。

1：DevTools的基础知识

启动Chrome DevTools

点击F12

。或者你可以按

Ctrl + Shift + I

在Windows和Linux或

Cmd + Shift + I

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

了解`Sources`和`console`选项卡。

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

console选项卡是所有日志输出的位置。此外，您可以使用控制台选项卡的提示来执行JavaScript代码。它类似于Windows上的命令提示符或Linux上的终端。

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

2：常用快捷方式和功能

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

功能Windows，Linux Mac
搜索关键字，支持正则表达式。 Ctrl + F``Cmd + F
搜索并打开文件Ctrl + P``Cmd + P
跳转到Ctrl + G +行:line_no``Cmd + G + :line_no
添加断点Ctrl + B ，或单击行号。 Cmd + B ，或点击第no行。
暂停/恢复脚本执行F8 F8
跳过下一个函数调用F10 F10
进入下一个函数调用F11 F11

3：为我们的代码使用源映射

您最喜欢的功能之一是通过源映射动态调试动态脚本。

每个脚本都可以在DevTools的Source选项卡中可视化。源选项卡包含所有JavaScript源文件。但代码编辑器中的代码通过eval()在浏览器进程中简称为虚拟机（VM）的容器中执行。

您可能已经猜到，我们的代码实际上是一个没有文件名的脚本。所以我们在Source选项卡中没有看到。

黑客来了！

我们必须利用Source Maps从编辑器中为JavaScript指定一个名称。它非常简单：

让我们说我们正在使用Factorialize挑战，我们的代码如下所示：

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

我们需要做的就是将//# sourceURL=factorialize.js添加到代码的顶部，即第一行：

//# sourceURL=factorialize.js 
 
 function factorialize(num) { 
  if(num <= 1){ 
  ...

而尤里卡就是这样！

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

4.5 KiB Raw Blame History Unescape Escape