在编写 JavaScript 时,如果没有调试工具将是一件很痛苦的事情。


JavaScript 调试

没有调试工具是很难去编写 JavaScript 程序的。

你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。

通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置。

通常,你在编写一个新的 JavaScript 代码过程中都会发生错误。

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难,但幸运的是,很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭,严重的错误信息会发送给用户。

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

浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。


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 代码的断点。

在每个断点上,都会停止执行 JavaScript 代码,以便于我们检查 JavaScript 变量的值。

在检查完毕后,可以重新执行代码(如播放按钮)。


debugger 关键字

debugger 关键字用于停止执行 JavaScript,并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用,debugger 语句将无法工作。

开启 debugger ,代码在第三行前停止执行。

实例

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

尝试一下 »


主要浏览器的调试工具

通常,浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。

各浏览器的步骤如下:

Chrome 浏览器

  • 打开浏览器。
  • 在菜单中选择工具。
  • 在工具中选择开发者工具。
  • 最后,选择 Console。

Firefox 浏览器

  • 打开浏览器。
  • 访问页面:
    http://www.getfirebug.com。
  • 按照说明 :
    安装 Firebug。

Internet Explorer 浏览器。

  • 打开浏览器。
  • 在菜单中选择工具。
  • 在工具中选择开发者工具。
  • 最后,选择 Console。

Opera

  • 打开浏览器。
  • Opera 的内置调试工具为 Dragonfly,详细说明可访问页面:
    http://www.opera.com/dragonfly/。

Safari

    • 打开浏览器。
    • 访问页面:
      http://extentions.apple.com。
    • 按说明操作:
      install Firebug Lite。

JavaScript 调试的更多相关文章

  1. JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...

  2. 【转】HTML, CSS和Javascript调试入门

    转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...

  3. JavaScript 调试常见报错以及修复方法

    (看到一篇调试JS很有用的文章,收藏一下) JavaScript 调试是一场噩梦:首先给出的错误非常难以理解,其次给出的行号不总有帮助.有个查找错误含义,及修复措施的列表,是不是很有用? 以下是奇怪的 ...

  4. Javascript 调试利器 Firebug使用详解

    Javascript 调试利器 Firebug使用详解 有时候,为了更清楚方便的查看输出信息,我们可能需要将一些调试信息进行分组输出,那么可以使用console.group来对信息进行分组,在组信息输 ...

  5. IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...

  6. HTML/CSS/Javascript调试入门(转)

    推荐Chrome作为开发工具(FF可以使用FireBug,IE8和之后的版本也有自己的调试工具) 1.HTML的调试 将鼠标放在任意元素上,右键Inspect Element,即可查看该元素的HTML ...

  7. 使用WebStorm进行javascript调试

    曾经的选择是使用火狐浏览器的Firebug插件,具体的用法到时候在细说,这篇文章登场的是开发静态网页及javascript的利器--webstorm. 一.相关软件安装和配置 安装WebStorm  ...

  8. JavaScript 调试常见报错以及原因

    JavaScript 调试常见报错以及原因 测试环境 chrome 版本 66.0.3359.170(正式版本) (64 位) TypeError 类型错误 不是操作符所接受的数据类型. //---- ...

  9. selenium中javascript调试

    之前写了使用js输入长文件的文章,有同事在使用时,发现竟然无法输入,也不知道是什么原因,且用的还是id方式. 在参考网文后,才发现是js写的有问题,现总结一下 javascript调试,在firefo ...

随机推荐

  1. Qt自定义控件

    Qt创建自定义控件教程 一.新建Qt设计师控件 二.设置项目名称 三.选择kits 这里取消Debug选项,不需要这个选项都是编译为dll文件直接调用. 删除掉MyControl原有的.h和cpp文件 ...

  2. POJ-3253 Fence Repair---Huffman贪心

    题目链接: https://vjudge.net/problem/POJ-3253 题目大意: 有一个农夫要把一个木板钜成几块给定长度的小木板,每次锯都要收取一定费用,这个费用就是当前锯的这个木版的长 ...

  3. 菜鸟容易中的招__setattr__

    class Counter: def __init__(self): self.counter = 0 # 这里会触发 __setattr__ 调用 def __setattr__(self, nam ...

  4. 如何彻底解决MySQL更改默认字符集以及字符乱码问题!!!

    在我们使用MySQL数据库时,字符乱码,对我们来说是一个很头疼的问题.今天笔者就来教大家如何彻底解决更改默认字符集以及字符乱码问题. 当我们使用压缩包进行MySQL安装后,系统会使用默认的字符集,这时 ...

  5. 0316-关于js 注意事项

    js:脚本语言,控制网页的行为(特效,表单验证) /* 这是多行注释 *///这是单行注释 js问题及注意事项: JavaScript 对大小写是敏感的 多写注释.提示性文字要说明白 定义变量时最好加 ...

  6. springboot AOP全局拦截日志记录

    @Aspect@Component@Slf4jpublic class WebLogAspect { @Pointcut("execution(public * com.we.control ...

  7. ML笔记:Classification: Logistic Regression

  8. ●BZOJ 3527 [Zjoi2014]力

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=3527 题解: FFT求卷积. $$\begin{aligned}E_i&=\frac ...

  9. poj 2689 (素数二次筛选)

    Sample Input 2 17 14 17 Sample Output 2,3 are closest, 7,11 are most distant. There are no adjacent ...

  10. mysql免安装版下载及配置教程

    第一步:下载 下载地址:http://dev.mysql.com/downloads/mysql/ 滚动到下方就能看到了,根据自己的需求下载: 我的电脑为64为的所以下载的为 Windows (x86 ...