JavaScript 基础教程JavaScript 简介JavaScript 用法JavaScript 输出JavaScript 语法JavaScript 语句JavaScript 注释JavaScript 变量JavaScript 数据类型JavaScript 对象JavaScript 函数JavaScript 作用域JavaScript 事件JavaScript 字符串JavaScript 运算符JavaScript 比较和逻辑运算符JavaScript if...else 语句JavaScript switch 语句JavaScript for 循环JavaScript while 循环JavaScript break 和 continue 语句JavaScript typeof, null, undefinedJavaScript 类型转换JavaScript 正则表达式JavaScript 错误throw try catchJavaScript 调试JavaScript 变量提升JavaScript 严格模式 (use strict)JavaScript 使用误区JavaScript 表单JavaScript 表单验证JavaScript 验证 APIJavaScript 保留关键字JavaScript JSONjavascript :void(0) 含义JavaScript 代码规范JavaScript 函数定义JavaScript 函数参数JavaScript 函数调用JavaScript 闭包JavaScript HTML DOMJavaScript DOM- 改变 HTMLJavaScript DOM - 改变 CSSJavaScript HTML DOM 事件JavaScript DOM EventListenerJavaScript DOM 元素(节点)JavaScript 对象类型JavaScript Number 对象JavaScript 字符串(String)对象JavaScript Date 对象JavaScript Array 对象JavaScript Boolean 对象JavaScript Math 对象JavaScript RegExp 对象JavaScript window 对象JavaScript window.screen 对象JavaScript window.location 对象JavaScript window.history 对象JavaScript window.navigator 对象JavaScript 弹窗JavaScript 计时事件JavaScript CookieJS中的if和switch该如何选择?JS优化多分支结构JS中的while和for循环该如何选择?JS优化循环结构JS输出杨辉三角JS定义字符串(3种方式)JS获取字符串长度JS字符串拼接/连接(3种方式)JS字符串查找(6种方法)JS截取字符串JS字符串替换replace()JS字符串大写小写转换JS字符串比较大小JS字符串和数组之间的转换JS给字符串添加HTML标签JS去除字符串前后空格JS Unicode编码和解码JS Base64编码和解码JS在接收表单数据时过滤特殊字符JS自定义编码和解码方案

JavaScript 调试

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

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

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


JavaScript 调试工具

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

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

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

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

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


console.log() 方法

如果浏览器支持调试,我们就可以使用 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"

各浏览器的步骤如下:

Chrome 浏览器

  1. 打开浏览器
  2. 在菜单中选择 "视图"
  3. 在 "视图" 中选择 "开发者"
  4. 然后在 "开发者" 中选择 "JavaScript 控制台"

Firefox 浏览器

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

Internet Explorer 浏览器

  1. 打开浏览器
  2. 在菜单中选择工具
  3. 在工具中选择开发者工具
  4. 最后,选择 Console

Opera

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

Safari

  1. 打开浏览器
  2. 右击鼠标,选择检查元素
  3. 在底部弹出的窗口中选择"控制台"

链接: https://www.fly63.com/course/7_492