错误总会发生,每当您写一些新的计算机代码时。

JavaScript 调试

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

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

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

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

JavaScript 调试器

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

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

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

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

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

console.log() 方法

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

实例

<!DOCTYPE html>
<html>
<body> <h1>My First Web Page</h1> <script>
a = ;
b = ;
c = a + b;
console.log(c);
</script> </body>
</html>

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

设置断点

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

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

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

debugger 关键词

debugger 关键词会停止 JavaScript 的执行,并调用(如果有)调试函数。

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

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

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

实例

var x =  * ;
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 是一只卡在电子器件中的真实的虫子(一种昆虫)。

松软科技Web课堂:重要->JavaScript 调试的更多相关文章

  1. 松软科技Web课堂:JavaScript JSON

    JSON 是存储和传输数据的格式. JSON 经常在数据从服务器发送到网页时使用. 什么是 JSON? JSON 指的是 JavaScript Object Notation JSON 是轻量级的数据 ...

  2. 松软科技Web课堂:JavaScript this 关键词

    实例 var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : fu ...

  3. 松软科技Web课堂:JavaScript 异常

    JavaScript 错误 - Throw 和 Try to Catch try 语句使您能够测试代码块中的错误. catch 语句允许您处理错误. throw 语句允许您创建自定义错误. final ...

  4. 松软科技Web课堂:JavaScript 正则表达式

    正则表达式是构成搜索模式的字符序列. 该搜索模式可用于文本搜索和文本替换操作. 什么是正则表达式? 正则表达式是构成搜索模式(search pattern)的字符序列. 当您搜索文本中的数据时,您可使 ...

  5. 松软科技Web课堂:JavaScript 类型转换

    Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...

  6. 松软科技Web课堂:JavaScript Break 和 Continue

    break 语句“跳出”循环. continue 语句“跳过”循环中的一个迭代. Break 语句 在本教程稍早的章节中,您已见到了 break 语句.它被用于“跳出” switch 语句. brea ...

  7. 松软科技Web课堂:JavaScript For 循环

    循环可多次执行代码块. JavaScript 循环 假如您需要运行代码多次,且每次使用不同的值,那么循环(loop)相当方便使用. 通常我们会遇到使用数组的例子: 不需要这样写: text += ca ...

  8. 松软科技web课堂:JavaScript If...Else 语句

    条件语句用于基于不同条件执行不同的动作. 条件语句 在您写代码时,经常会需要基于不同判断执行不同的动作. 您可以在代码中使用条件语句来实现这一点. 在 JavaScript 中,我们可使用如下条件语句 ...

  9. 松软科技web课堂:JavaScript 比较和逻辑运算符

    JavaScript 比较和逻辑运算符 比较和逻辑运算符用于测试 true 或 false. 比较运算符 比较运算符在逻辑语句中使用,以判定变量或值是否相等. 我们给定 x = 5,下表中解释了比较运 ...

随机推荐

  1. 【译】为什么永远都不要使用MongoDB Why You Should Never Use MongoDB

    背景 最近在学习DDIA(Designing Data-Intensive Applications)这本分布式领域非常急经典的入门书籍,里面第二章<数据模型与查询语言>,强调了对一对多. ...

  2. python数据分析三个重要方法之:numpy和pandas

    关于数据分析的组件之一:numpy ndarray的属性     4个必记参数:ndim:维度shape:形状(各维度的长度)size:总长度dtype:元素类型   一:np.array()产生n维 ...

  3. Gitlab用户信息批量导出

    前言 因运维体系中涉及到用户权限管理及统计,需将Gitlab用户数据提取出来并录入到公司内部自建的权限统计平台. 本文将对Gitlab的用户信息数据批量导出进行操作说明! 思路 A)要对数据进行批量的 ...

  4. MySQL 库、表、记录、相关操作(3)

    MySQL 库.表.记录.相关操作(3) 单表查询 """ 增: insert [into] [数据库名.]表名[(字段1[, ..., 字段n])] values (数 ...

  5. window.open()打开新窗口 及参数

    在jsp页面中需要使用到弹出窗口,想到js的window对象有一个open方法可以弹出窗口,于是对open方法进行记录. 首先是open方法的语法及定义: 定义: open() 方法用于打开一个新的浏 ...

  6. VLAN实验5(在ensp上利用三层交换机实现VLAN间路由)

    原理概述: VLAN将一个物理的LAN在逻辑上划分成多个广播域.VLAN内的主机间可以直接通信,而VLAN间不能直接互通. 在现实网络中,经常会遇到需耍跨VLAN相互访问的情况,工程师通常会选择一些方 ...

  7. Xcode 7中http通信出现如下错误

    Xcode 7中http通信出现如下错误:Application Transport Security has blocked a cleartext HTTP (http://) resource ...

  8. 十、Spring boot 简单优雅的整合 Swagger2

    前言 swagger2 是什么,我这里就不说了,就是一个简单的接口文档,方便前后端联调. 其实之前没有想要到要使用swagger 的.因为我之前用的是YAPI ,不过这个是一个单独的工具.并且是开源的 ...

  9. Spring Securtiy 认证流程(源码分析)

    当用 Spring Security 框架进行认证时,你可能会遇到这样的问题: 你输入的用户名或密码不管是空还是错误,它的错误信息都是 Bad credentials. 那么如果你想根据不同的情况给出 ...

  10. CSS3 斑马条纹.html

    hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo <!DOCTYPE html> <html> ...