JavaScript程序设计之JS调试

2024-02-28 18:12:28

本文主要通过一个加法器，介绍JS如何调试。先上代码：
效果：

test.html：

<span style="font-family:Comic Sans MS;font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
</head>
<body> 

<div>
  <h2>计算器</h2> 

  <div>
    <input type="text" id="num1">
    <span>+</span>
    <input type="text" id="num2">
    <span>=</span>
    <span id="result"></span>
    <button id="add">计算</button>
  </div>
</div>
<script src="./demo.js"></script>
</body>
</html></span>

demo.js

<span style="font-family:Comic Sans MS;font-size:18px;">/**
 * Created by yanzi on 15/12/8.
 */
var num1 = document.getElementById("num1"),
  num2 = document.getElementById("num2"),
  result = document.getElementById("result"),
  btn_add = document.getElementById("add"); 

btn_add.addEventListener("click", onAddClick, false);
function onAddClick(){
  var a = parseInt(num1.value),
  b = parseInt(num2.value);
  var sum = add(a, b);
  result.innerHTML = sum;
} 

/**
 *
 * @param a
 * @param b
 * @returns {*}
 */
function add(a, b){
  return a+b;
}</span>

重点摘要：

1、一般调试JS，打印信息有如下三种：

a.用alert，缺点是每次都弹框

b.用console.log，这个数据量小还可以

c.加断点调试

2、在JS里，如果变量前面加var，表示局部变量，function里如果不带var表示全局变量。因此一般情况下变量前面带var.

3、一般在chrome调试器里，elements看代码，在source目录下进行调试。在该模式下，点击js里每一行即可以加断点。

4、调试模式下最右边的四个按钮分别是：下一个断点处，单步执行，进到下一函数，跳出函数。基本所有的调试工具都有这四种。

5、断点模式下，在console里输入变量就可以看到当前值，同时可以随意对值进行修改。

以上就是js调试的具体步骤，希望大家在javascript程序设计时会使用js进行调试，谢谢大家的阅读。

调试Javascript代码(浏览器F12及VS中debugger关键字)

目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试方法也变得相当简单了. 在F12开发人员工具中进行调试打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML.CSS.Javascript等网页资源进行跟踪调试使用的. 如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成. 我
js调试系列初识控制台

写在最开头:其实我以前就在考虑要不要写这个东西,因为这个东西确实不难,但是为什么会有这么多人问,他们问的不是怎么用控制台,而是不知道控制台能干嘛,他们也知道有 console.log 之类的东西,但他们不知道为什么要用这么长的字符串代替 alert 输出信息.在他们眼里 alert 足以.好吧,我承认小小的吐槽了下,不过这个系列我只打算介绍下调试的基本知识,不会涉及太深,因为深入的东西结合js知识,如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么.我的目
使用Chrome调试JavaScript的断点设置和调试技巧

你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各
JS调试必备的5个debug技巧

1. debugger; 我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果.需要带有条件的断点吗?你只需要用if语句包围它: 复制代码代码如下: if (somethingHappens) { debugger; } 但要记住在程序发布前删掉它们. 2. 设置在DOM node发生变化时触发断点有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源. 谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,
js调试系列断点与动态调试[基础篇]

上几篇文章已经为大家介绍了js调试系列的一些基础知识,这次乱码兄弟为大家带来了js断点与动态调试方法,需要的朋友可以参考下昨天留的课后练习 1. 分析 votePost 函数是如何实现推荐的. 其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. function votePost(n, t, i) { i || (i = !1); var r = { blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: i
js调试工具Console命令详解

一.显示信息的命令复制代码代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="te
Javascript调试工具（下载）

论坛上有人问javascript Debug的工具,在这里就推荐两个javascript的调试工具给大家,今后我也会说一下调试的方法. IE下推荐的调试工具就是VS studio了,这个的下载地址我就不给出了,相信大家都应该有.基本的调试方法我也说过了的相关链接:用Vs studio调试脚本.http://blog.csdn.net/bluedestiny/archive/2006/05/15/739893.aspx Mozilla下推荐Venkman javascript Debugger.下
js调试工具console.log()方法查看js代码的执行情况

我之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录,具体的语法是: console.log("值为:",fn); console.log()能够输出变量,函数,数组,对象等等 <html> <head> <title>this关键字_函数调用</title>
JavaScript程序设计之JS调试

本文主要通过一个加法器,介绍JS如何调试.先上代码: 效果: test.html: <span style="font-family:Comic Sans MS;font-size:18px;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <
Node.js调试技术总结分享

前言众所周知调试技术与开发技术构成了软件开发的基石.目前Nodejs作为新型的Web Server开发栈倍受开发者关注.总的来说Nodejs的应用程序主要有两部分:JavaScript编写的js模块和C语言编译的二进制模块. 这里主要介绍三种avaScript模块的调试方法:基于Nodejs内建的调试器,基于V8调试插件和基于Chrome浏览器的调试器. 以下所有的操作都将基于如下代码(example.js): var http = require('http'); var url = req
纯JavaScript基于notie.js插件实现消息提示特效

本文实例介绍了纯JavaScript实现消息提示特效是一款基于notie.js插件实现的可以制作Alert提示框,确认框和带输入的消息框,分享给大家供大家参考,具体内容如下效果图: 实现的代码: html代码: <br><br><br><br><br><br> <article class="zzsc"> <div class="div-ext"> <div cl
JavaScript的兼容性与调试技巧

关于JavaSctipt的兼容性,最懒的办法就是用jQuery的工具函数.尽量不要用那些什么ECMAScript之类的函数,因为很多浏览器都会报找不到函数的错误.下面列出一些在开发过程中碰到过的javascript问题. 1.参数列表多个逗号. $.ajax({})方法,非常熟悉了吧,但是在IE中有个小地方要注意,如果你在拼接参数列表的时候最后一个也加了逗号,那么毫无疑问,IE下全部JS失效. 调试时报如下错误: 缺少标识符.字符串或数字 data: { S_Id: Subject_Id, le
sublime text配置node.js调试(图文教程)

1. 首先到 nodejs.org 下载 Node.js 安装包并安装. 2. 打开 Sublime Text 2 编辑器.选择菜单 Tools --> Build System --> new Build System... 3. 将文件保存为 JavaScript.sublime-build 4. 文件内容为: { "cmd": ["node", "$file"], "file_regex": "^[
JavaScript使用math.js进行精确计算操作示例

本文实例讲述了JavaScript使用math.js进行精确计算操作.分享给大家供大家参考,具体如下: javascript进行浮点运算会有尾差,比如算个0.1+0.7试试,得到的不是0.8 .这个问题可以使用math.js解决. Math.js是一款开源的JavaScript和Node.js数学库,用于处理数字.大数.复数.单位和矩阵. 官网: http://mathjs.org/ cdn地址:https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.
JavaScript程序设计高级算法之动态规划实例分析

本文实例讲述了JavaScript程序设计高级算法之动态规划.分享给大家供大家参考,具体如下: 主要是看了<数据结构与算法>有所感悟,虽然这本书被挺多人诟病的,说这有漏洞那有漏洞,但并不妨碍我们从中学习知识. 其实像在我们前端的开发中,用到的高级算法并不多,大部分情况if语句,for语句,swith语句等等,就可以解决了.稍微复杂的,可能会想到用递归去的解决. 但要注意的是递归写起来简洁,但实际上执行的效率并不高. 我们再看看动态规划的算法: 动态规划解决方案从底部开始解决问题, 将所有小问题
JavaScript必备的断点调试技巧总结（推荐）

目录为什么要使用 debugger Chrome debugger 基本用法 VS Code 调试 SPA 应用 Chrome 调试 Nodejs 使用 VS Code 调试 Nodejs Conditional Breakpoint 条件断点总结为什么要使用 debugger 这篇文章将介绍如何使用断点来进行 JavaScript 调试.在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试? 我们需要了解使用断点的必要性,否则下文介绍的所有断点调试方法都会是废话.console.
讲解JavaScript的Backbone.js框架的MVC结构设计理念

什么是Backbone.js? Backbone.js是十大JS框架之首,Backbone.js 是一个重量级js MVC 应用框架,也是js MVC框架的鼻祖.它通过Models数据模型进行键值绑定及custom事件处理,通过模型集合器Collections提供一套丰富的API用于枚举功能,通过视图Views来进行事件处理及与现有的Application通过JSON接口进行交互. 简而言之,Backbone是实现了web前端MVC模式的js库什么是MVC? MVC:后端服务器首先(过程1)

JavaScript程序设计之JS调试

相关推荐

随机推荐