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

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. Flow入门初识

    Flow是facebook出品的JavaScript静态类型检查工具. 由于JavaScript是动态类型语言,它的灵活性也会造成一些代码隐患,使用Flow可以在编译期尽早发现由类型错误引起的bug, ...

  2. enable_shared_from_this用法分析

    一.背景 在为什么需要异步编程文章末尾提到,"为了使socket和缓冲区(read或write)在整个异步操作的生命周期一直保持活动,我们需要采取特殊的保护措施.你的连接类需要继承自enab ...

  3. [题解]洛谷P1094——纪念品分组

    原题链接: https://www.luogu.org/problem/P1094 题目简述: 有NNN件纪念品,每个纪念品都有特定的价格,要求将他们分组,每组纪念品之和不得超过MMM,并且每组最多只 ...

  4. python接口设计中的__all__和del

    最近在实现python接口中遇到了一些小问题,解决后总结如下. 目的:在设计接口时,只暴露某个文件的特定方法. 例如: t.py import os import sys def a(): pass ...

  5. CCNA 之 七 路由协议 三 OSPF

    OSPF协议 OSPF开放式最短路径优先 全称:Open Shortest Path First 是目前使用最为广泛的路由协议,主要因为OSPF是开放式协议,和IGRP.EIGRP思科的私有协议不同. ...

  6. js对象的浅拷贝与深拷贝

    浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用(堆和栈的关系,原始(基本)类型Undefined,Null,Boolean,Number和String是存入堆,直接引用,ob ...

  7. 挑战10个最难的Java面试题(附答案)【上】

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),验证通过后,输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动&quo ...

  8. 工作流Activity组件值数据传递获取问题

    如图:先简单说一下大致过程 通过具体的菜单节点,加载具体的指令组件.本着低耦合的原件,需要将核查组件从指令组件重拆分出来,作为单独的组件根据业务需要拖拽到指令组件中.但是具体业务方面核查组件一方面需要 ...

  9. DRF Django REST framework 之 解析器(二)

    引入 Django Rest framework帮助我们实现了处理application/json协议请求的数据,如果不使用DRF,直接从 request.body 里面拿到原始的客户端请求的字节数据 ...

  10. 【权限管理系统】Spring security(三)---认证过程(原理解析,demo)

      在前面两节Spring security (一)架构框架-Component.Service.Filter分析和Spring Security(二)--WebSecurityConfigurer配 ...