引言
想要学好一门语言，肯定需要先掌握如何去调试你的代码对吧！（我就不信你能100%确定你的代码的是正确的，尤其是在学习初期，免不了拼写错误、语法错误）
本文将提供网页编写时的几种调试方式，各有千秋~
1、浏览器自带的神器（F12）
如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head>
<body>
<h1>真的好简单哦</h1>
<h2>好了这就是你的第一个网站（真的长得好丑）</h2>
<img src="hhhh.jpg" width="1100" height="672"/><br>
<p1>这是段落</p1>
</body>
</html>
打开后发现，如下
图片并没有加载出来，为什么呢？（当然了这里只是作为演示！这明显是图片的路径有问题嘛！）
点击我们键盘的F12（神器！）
此时，再次查看页面，如下
选中Console，可以看到浏览器将问题标识出来了
2、万能的打印调试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head>
<body>
<h1>打印</h1>
<script>
var a = 10;
function operate(a, b)
{
console.log(a);
return a+b;
}
a = operate(a,20);
console.log(a);
</script>
</body>
</html>
通过几次打印，我们就可以了解到这个程序的运行逻辑！
我们甚至可以直接在console窗口输入打印，如下
3、断点调试
调试
在JavaScript中，我们可以通过设置 debugger 来设置断点，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head>
<body>
<h1>打印</h1>
<script>
var a = 10;
debugger;
function operate(a, b)
{
console.log(a);
return a+b;
}
a = operate(a,20);
console.log(a);
</script>
</body>
</html>
①首先需要在要断点的地方输入debugger
②打开我们的网站，会发现网页可以进行单步调试了！如下
③此时我们可以通过观察右侧的数据来对代码进行调试（如下图），主要是看Gloabl和Call Stack来观察代码的运行状况
4、优缺点
1、F12：能够将大多数的语法错误都反馈出来，但是还有一些特殊的情况，比如：逻辑有误导致的结果错误，此时就无法查看到任何报错
2、打印调试：部分没有报错，但是运行不正常，比如上面的逻辑有误，我们可以在代码两个不同位置打印我们想要的数值，如下，我们就可以快速定位是在哪个区间范围内有问题
a = 0;
一系列a的运算......
......
......
console.log(a);
一系列a的运算......
......
......
console.log(a);
3、断点调试：对每一步的运行结果都了如指掌，比如在查看别人代码的时候也是一个不错的方式
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
