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

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. ehcache同步原理

    最近研究ehcache同步时发现一个问题: 现有A.B两个服务器,由A服务器向B服务器同步信息,采用RMI方式手动方式进行同步 配置信息如下: <?xml version="1.0&q ...

  2. day 25 方法和函数 反射

    特殊成员的补充: # __str__ class Foo(object): def __init__(self): pass def func(self): pass def __str__(self ...

  3. expect脚本同步文件、expect脚本指定host和要同步的文件、构建文件分发系统、批量远程执行命令

    7月20日任务 20.31 expect脚本同步文件20.32 expect脚本指定host和要同步的文件20.33 构建文件分发系统20.34 批量远程执行命令扩展:shell多线程 http:// ...

  4. 虚拟化--思杰citrix

    目前虚拟化主要有vmware,微软,思杰 一:从硬件搭建开始 硬件需要问的几个问题: a.负载均衡.防火墙.路由器怎么配置? b.新增一块存储的话,怎么新增? 二:安装citrix xen serve ...

  5. 充满含金量的一场云原生Meetup,入场券免费发送中……

    在武汉,你离这场云原生盛会,只有一步之遥 华为云.百度.斗鱼.海云基因,五位重量级专家 K8s调度.深度学习平台.斗鱼实战.基因大数据-五个干货议题 日,与您相约Cloud Native Days C ...

  6. #华为云·寻找黑马程序员# 如何实现一个优雅的Python的Json序列化库

    在Python的世界里,将一个对象以json格式进行序列化或反序列化一直是一个问题.Python标准库里面提供了json序列化的工具,我们可以简单的用json.dumps来将一个对象序列化.但是这种序 ...

  7. 机器学习算法在用户行为检测(UBA)领域的应用

    [摘要]最近看到越来越多的安全圈的同学开始关注UBA或者UEBA的相关产品和技术,恰好这一段时也一直在跟进UBA产品的状况,正如Gartner报告所述,最具创新能力的UBA供应商往往都是一些初创公司, ...

  8. 基于webpack实现多html页面开发框架四 自动写入多入口,自动插入多个htmlWebpackPlugin插件

    一.解决什么问题      1.手写页面多入口,一个一个输入太麻烦,通过代码实现      2.手写多个htmlWebpackPlugin插件太麻烦,通过代码实现 二.多入口代码实现 //读取所有.j ...

  9. React、React Native面试题

    1.React Native相对于原生的ios和Android有哪些优势. react native一套代码可以开发出跨平台app, 减少了人力.节省了时间.避免了 iOS 与 Android 版本发 ...

  10. CF 1130A 1130B 1130C1129A1 1129A2 1129B(Round542A B C D1 D2 E)题解

    A : Be Positive 题目地址:https://codeforces.com/problemset/problem/1130/A 题解:让你求是否满足一个d使得数列长为n的a数组的每个数除以 ...