Skip to content

搞英语 → 看世界

翻译英文优质信息和名人推特

Menu
  • 首页
  • 作者列表
  • 独立博客
  • 专业媒体
  • 名人推特
  • 邮件列表
  • 关于本站
Menu

在 Javascript 中调试

Posted on 2022-05-30

egh5vewhs5t959pa93u1.png

程序员花费大量时间诊断和纠正代码中的错误和遗漏。调试会减慢 Javascript 的执行速度,并显示如何逐行修改数据。由于 Javascript 在运行时解释并在浏览器内部执行,因此使用浏览器内置的工具执行调试。

Javascript 中的错误

1️⃣ 语法错误

代码编写方式的错误会导致语法错误。当 Javascript 引擎在运行时解释代码时会发生此错误。

2️⃣ 类型错误

使用错误的数据类型时会发生此错误。例如,将 string.substring 方法应用于数字变量。

3️⃣ RangeError

当代码尝试使用超出可能值范围的数字时,Javascript 会检测到 RangeError

4️⃣ URI错误

某些字母数字字符不允许在 URL 中使用。当由于使用保留字符而对 URI 进行编码或解码时出现问题时,将引发 URlError。

5️⃣ 引用错误

当代码引用不存在或不在执行代码范围内的变量时,会发生此错误。

6️⃣ 评估错误

当 eval() 函数出现问题时会发生此错误。较新版本的 Javascript 不会引发此错误。

开发者工具

所有现代浏览器都包含一组开发人员工具,可帮助程序员使用 HTML、CSS 和 Javascript。开发人员工具包含调试 Javascript 和查看浏览器中 HTML 元素状态的功能。要打开 Google Chrome 浏览器的开发人员工具,请按 Command+Option+I (Mac) 和 Control+Shift+I(Windows、Linux)。

控制台

Web 开发人员可以将消息输出到控制台日志,以确保他们的代码按预期执行。 “控制台”选项卡包含两个区域:

1️⃣ 控制台输出日志:显示来自 Javascript 执行的系统和用户消息。

2️⃣ 控制台命令行界面:接受任何Javascript指令并立即执行。

Javascript 调试器

可以在 Sources 选项卡下找到 Javascript 调试器。调试器可以逐行单步执行代码,以查看代码执行时变量发生的情况。左侧是 HTML 文档使用的所有源文件的列表。从此列表中选择要调试的文件。

范围

在“源”选项卡中,右侧的窗口包含范围。其下的局部和全局部分显示了在当前作用域中定义的变量。范围窗格仅在调试脚本时填充变量。

断点

Javascript 引擎在遇到断点时会暂停代码的执行。这允许程序员检查它。执行可以按照以下方式进行。

1️⃣ 恢复脚本执行:恢复执行,直到程序遇到另一个断点或程序结束。

2️⃣ Step-Over:一步执行下一行代码,然后在下一行暂停。它跳过一个函数而不调试该函数的各个步骤。

3️⃣ Step into:执行下一行代码,然后在下一行暂停。它将逐行进入一个函数。

4️⃣ Step out:执行当前函数中剩余的代码,当runtime返回到函数调用后的代码行时暂停。

错误处理

在 Javascript 中,try…catch 语句允许程序员处理代码中的错误。通常,当 Javascript 引擎抛出错误时,程序执行会停止。但是,如果代码被包装在 try 块中,如果抛出异常,执行将跳转到 catch 块,并且程序将照常继续。也可以手动引发使用“throw”语句的错误。

Try…Catch 语句

try { noSuchCommand (); // This function does not exist } catch ( err ) { // The code jumps to the catch block instead of stopping the program execution console . error ( err . message ) } console . log ( " Script continues to run after the exception " ); // The error message displayed in the console

抛出语句

throw ( " Oops there was an error " ); // The throw operator generates an error

感谢您阅读

如果您喜欢这篇文章,请订阅我的时事通讯
永远不会错过我的博客、产品发布和科技新闻,并在Twitter 上关注我以获取有关 Web 开发资源的每日线程。

原文: https://dev.to/abhirajb/debugging-in-javascript-3de6

本站文章系自动翻译,站长会周期检查,如果有不当内容,请点此留言,非常感谢。
  • Abhinav
  • Abigail Pain
  • Adam Fortuna
  • Alberto Gallego
  • Alex Wlchan
  • Answer.AI
  • Arne Bahlo
  • Ben Carlson
  • Ben Kuhn
  • Bert Hubert
  • Bits about Money
  • Brian Krebs
  • ByteByteGo
  • Chip Huyen
  • Chips and Cheese
  • Christopher Butler
  • Cool Infographics
  • Dan Sinker
  • David Walsh
  • Dmitry Dolzhenko
  • Elad Gil
  • Ellie Huxtable
  • Ethan Marcotte
  • Exponential View
  • FAIL Blog
  • Founder Weekly
  • Geoffrey Huntley
  • Geoffrey Litt
  • Greg Mankiw
  • Henrique Dias
  • Hypercritical
  • IEEE Spectrum
  • Investment Talk
  • Jaz
  • Jeff Geerling
  • Jonas Hietala
  • Josh Comeau
  • Lenny Rachitsky
  • Lou Plummer
  • Luke Wroblewski
  • Matt Stoller
  • Mert Bulan
  • Mostly metrics
  • News Letter
  • NextDraft
  • Non_Interactive
  • Not Boring
  • One Useful Thing
  • Phil Eaton
  • Product Market Fit
  • Readwise
  • ReedyBear
  • Robert Heaton
  • Ruben Schade
  • Sage Economics
  • Sam Altman
  • Sam Rose
  • selfh.st
  • Shtetl-Optimized
  • Simon schreibt
  • Slashdot
  • Small Good Things
  • Taylor Troesh
  • Telegram Blog
  • The Macro Compass
  • The Pomp Letter
  • thesephist
  • Thinking Deep & Wide
  • Tim Kellogg
  • 英文媒体
  • 英文推特
  • 英文独立博客
©2025 搞英语 → 看世界 | Design: Newspaperly WordPress Theme