当前位置：网站首页 > 技术文章 > 正文

JavaScript 调试如何调试js代码简单步骤

zhezhongyun 2024-12-19 17:50 72 浏览

JavaScript 调试

在没有调试器的情况下写 JavaScript 是有难度的。

您的代码中也许包含了语法错误，或者逻辑错误，这些都难以诊断。

通常，如果 JavaScript 代码包含错误，也不会发生任何事情。不会有错误消息，并且不会有任何可供查找错误的指示信息。

通常，每当你尝试编写新的 JavaScript 代码，就可能发生错误。

JavaScript 调试器

查找编程代码中的错误被称为代码调试。

调试并不简单。但幸运地是，所有现代浏览器都有内置的调试器。

内置的调试器可打开或关闭，强制将错误报告给用户。

通过调试器，您也可以设置断点（代码执行被中断的位置），并在代码执行时检查变量。

通常通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”。

console.log() 方法

如果您的浏览器支持调试，那么您可以使用 console.log() 在调试窗口中显示 JavaScript 的值：

实例

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

亲自试一试

提示：请访问我们的 JavaScript Console 参考手册，获取更多有关 console.log() 方法的信息。

设置断点

在调试窗口中，您可在 JavaScript 代码中设置断点。

在每个断点中，JavaScript 将停止执行，以使您能够检查 JavaScript 的值。

在检查值之后，您可以恢复代码执行。

debugger 关键词

debugger 关键词会停止 JavaScript 的执行，并调用（如果有）调试函数。

这与在调试器中设置断点的功能是一样的。

如果调试器不可用，debugger 语句没有效果。

如果调试器已打开，此代码会在执行第三行之前停止运行。

实例

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

亲自试一试

主流浏览器的调试工具

通常，您在浏览器中通过 F12 键启用调试，并在调试器菜单中选择“控制台”。

否则请按照以下步骤：

Chrome

打开浏览器
从菜单中选择工具
从工具中选择开发者工具
最后，选择控制台

Firefox Firebug

打开浏览器
前往网页：http://www.getfirebug.com
根据如下指令：如何安装 Firebug

Internet Explorer

打开浏览器
从菜单选择工具
从工具选择开发者工具
最后，选择控制台

Opera

打开浏览器
请前往网页：http://dev.opera.com
根据如下指令：如何安装 Firebug Lite

Safari Develop Menu

点击 Safari 菜单，偏好设置，高级
选中“在菜单栏中启用开发菜单”
当菜单中出现新选项“开发”时，选择“显示错误控制台”

您知道吗？

调试是测试、找到并减少计算机程序中 bug（错误）的过程。

历史上首个已知的计算机 bug 是一只卡在电子器件中的真实的虫子（一种昆虫）。

HTML 参考手册

上一篇：千锋HTML5视频教程(2):轻松进入HTML5异想世界
下一篇：33道前端开发理论面试题，附答案前端开发工程师面试题

JavaScript 调试如何调试js代码简单步骤