JavaScript 调试 -HTML教程 -css5.net


JavaScript 调试


好久没写 JavaScript 程序了,首先碰到的问题就是如何调式。假如 JavaScript 没有调试工具是一件非常麻烦的事情。


一、JavaScript 调试

JavaScript 没有调试工具, JavaScript 是很难编写的。

在编写 JavaScript 程序的时候,如果出现语法错误、逻辑错误,在没有调式工具的情况下,编程序还是比较困难。

通常你在编写 JavaScript 代码时,出现代码写错的情况下,代码是不会提示错误信息,这样你就很难找到错误代码位置。

平时,每当你编写新的 JavaScript 代码时就会出现写错情况。


二、JavaScript 代码调试工具

任何一个编程者都少不了要去调试代码,无论你是高手还是菜鸟,调试程序都是一项必不可少的工作。

控制台以及浏览器内置调式工具,给前端开发调试带来了极大的便利。

内置 JavaScript 调试工具可开始或关闭(F12),出现有错误信息会发送给你。

调试工具我们可设置断点 (代码中断停止执行的位置), 可在代码执行时检测变量。

浏览器F12(开发者调试工具),可以查看方法的具体详细执行情况 。


三、console.log() 方法

假如浏览器支撑调试,按F12你能够应用 console.log() 在调试窗口中呈现 JavaScript 的值:

示例代码

a = 5;

b = 6;

c = a + b;

console.log(c);


演示一下



四、设置断点

在调试窗口中,你可以在 JavaScript 代码中使用断点工具。

在每个断点,JavaScript 代码都会停止执行 ,方便我们能够检查 JavaScript 的值。

在检查值完成之后,你可恢复代码重新执行。


五、debugger 关键字

debugger 关键字会停止执行 JavaScript 的执行,会调试函数。

这和在浏览器中调试工具中设置的断点是一样的。

debugger 语句如果没有用。 说明浏览器调式工具不可用。

调试器的 debugger 如果已打开,代码会在第三行之前停止运行。

示例代码

var x = 15 * 5;

debugger;

document.getElementbyId("demo").innerHTML = x;


演示一下



六、主要浏览器的调试工具

浏览器支撑调试,按F12你能够应用 console.log() 在调试窗口中呈现 JavaScript 的值。

各个浏览器调式方法如下:

Chrome 浏览器

  • 打开浏览器。

  • 在菜单中找到 选择工具。

  • 在更多工具中找到开发者工具。

  • 最后选择Console确认。

Firefox 浏览器

  • 打开浏览器。

  • 找到查看元素。

Safari 浏览器

  • 打开浏览器。

  • 在页面中点击右键,找到检查元素。

  • 然后在窗口中找到控制台。

Internet Explorer 浏览器。

  • 打开浏览器。

  • 在菜单中找到选择工具。

  • 在工具中找到开发者工具。

  • 最后找到控制台。

Opera 浏览器

  • 打开浏览器。

  • 在菜单栏找到开发者工具,找到WEB检查器。

       右键鼠标,找到查看元素



相关参考文章

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved