4.5 KiB
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并搜索文件名。添加断点,调试远离并享受!