JavaScript程序设计之JS调试_javascript技巧
本文主要通过一个加法器，介绍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 id="计算器">计算器</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进行调试，谢谢大家的阅读。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
C++ 函数调试详解：如何调试多线程函数中的问题？
May 02, 2024 pm 04:15 PM
C++多线程调试可使用GDB：1.启用调试信息编译；2.设置断点；3.使用infothreads查看线程；4.用thread切换线程；5.使用next、stepi、locals调试。实战案例调试死锁：1.使用threadapplyallbt打印堆栈；2.检查线程状态；3.单步执行主线程；4.使用条件变量协调访问来解决死锁。
如何使用LeakSanitizer调试C++内存泄漏？
Jun 02, 2024 pm 09:46 PM
如何使用LeakSanitizer调试C++内存泄漏？安装LeakSanitizer。通过编译标志启用LeakSanitizer。运行应用程序并分析LeakSanitizer报告。识别内存分配类型和分配位置。修复内存泄漏，确保释放所有动态分配的内存。
golang 函数调试和分析的捷径
May 06, 2024 pm 10:42 PM
本文介绍了Go函数调试和分析的捷径，包括：内置调试器dlv，用于暂停执行、检查变量、设置断点。日志记录，使用log包记录消息，在调试时查看。性能分析工具pprof，生成调用图并分析性能，使用gotoolpprof分析数据。实战案例：通过pprof分析内存泄漏，生成调用图显示导致泄漏的函数。
如何在Java lambda表达式中进行有效的调试？
Apr 24, 2024 pm 12:03 PM
有效调试Lambda表达式：IntelliJIDEA调试器：在变量声明或方法上设置断点，检查内部变量和状态，查看实际实现类。Java9+JVMTI：连接到运行时JVM获取标识符，检查字节码设置断点，监视执行期间变量和状态。
Java 并发编程中如何进行并发测试和调试？
May 09, 2024 am 09:33 AM
并发测试和调试Java并发编程中的并发测试和调试至关重要，以下技术可供使用：并发测试：单元测试：隔离并测试单个并发任务。集成测试：测试多个并发任务之间的交互。负载测试：评估应用程序在高负载下的性能和可扩展性。并发调试：断点：暂停线程执行并检查变量或执行代码。日志记录：记录线程事件和状态。堆栈跟踪：识别异常源头。可视化工具：监视线程活动和资源使用情况。
如何调试 PHP 异步代码
May 31, 2024 am 09:08 AM
调试PHP异步代码的工具包括：Psalm：静态分析工具，可发现潜在错误。ParallelLint：检查异步代码并提供建议的工具。Xdebug：用于调试PHP应用程序的扩展，可通过启用会话并逐步执行代码来调试。其他技巧还包括使用日志记录、断言、局部运行代码和编写单元测试。
PHP 调试错误：常见错误的指南
Jun 05, 2024 pm 03:18 PM
常见的PHP调试错误包括：语法错误：检查代码语法，确保没有错误。未定义变量：在使用变量之前，确保已将其初始化并赋值。缺失分号：为所有代码块添加分号。函数未定义：检查函数名拼写是否正确，并确保已加载正确的文件或PHP扩展。
C++ 函数调试详解：如何调试包含异常处理的函数中的问题？
Apr 30, 2024 pm 01:36 PM
C++调试包含异常处理的函数使用异常点断点识别异常位置。使用gdb中的catch命令打印异常信息和堆栈跟踪。使用异常记录器捕获并分析异常，包括消息、堆栈跟踪和变量值。
