一、本课目标
- 会使用工具进行代码调试
主要有以下这些方法：
image.png
二、调试步骤
2.1控制台简介
打开控制台：F12或者在页面右击选择“检查”：
- Elements：主要用于检查和编辑当前页面当中的html和css元素的。可以选择一个div，然后在右侧查看它的css样式和盒子模型。
- Console：可以做一些脚本的输出和调试信息的显示；比如可以在里面直接定义变量并且赋值之后，可以直接打印变量的值。
- Sources：用于检查和调试当前页面所加载的一些源文件的。1、如果要调试的话，则需要在html文件中添加一些断点。添加断点之后，在右侧会出现断点的一些信息。可以在这里对断点进行操作。2、同时可以在右边添加一些watch，比如我要看一个变量的值，我可以在html中选中然后右击，选择“add selected text to watches”，则在右边的watch中可以看到选中的这个变量的值。
-
network：主要显示我们所有的请求的信息。比如在页面输入请求之后，在这里会有记录。点击该条记录之后，会出现一个界面，在这个界面上显示一些信息：
image.png
2.2调试
打开控制台的Sources界面，会发现在右侧的部分中的上方会有几个按钮：
我的版本：
image.png
视频上的版本：
image.png
第一个按钮是可以直接跳到我们的下一个断点；第二个是单步调试，不进入我们函数体的内部；
第三个是直接进入到我们函数体的内部，也是单步调试；第四个是跳出我们的当前函数；第五个是禁用所有的断点。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
text-align: center;
line-height: 25px;
}
</style>
</head>
<body>
<div>
<script>
var t = prompt("请输入一个整数", "");
console.log(t);
if (t > 5) {
for (var i = t; i > 0; i--) {
for(var j = 0; j < i; j++) {
document.write("* ");
}
document.write("<br>")
}
} else {
for (var i = t; i > 0; i--) {
for(var j = 0; j < i; j++) {
document.write("* ");
}
document.write("<br>")
}
for (var i = 0; i < t; i++) {
for(var j = 0; j < i; j++) {
document.write("* ");
}
document.write("<br>")
}
}
</script>
</div>
</body>
</html>
在if判断那个地方打上断点之后，运行结果：
image.png
但是在实际的调试过程中，不用alert()方法。使用的是console.log(t);，这样可以直接在console界面上显示数据。
三、总结
- chrome开发人员工具
- alert()方法
