调试方案
调试就是验证程序的正确性或自我猜想的过程,掌握一定的调试技巧,可以观察程序执行中的情况、快速定位 BUG 等。
前端开发者最常用、有效的调试方式就是使用浏览器内置的开发者工具
。
1. 开发者工具
Chrome 开发者工具是一套内置于 Google Chrome 中 的 Web 开发和调试工具,可用来对网站进行迭代、调试和分析。
开发者工具内置在 Chrome 浏览器中。
以下方式可以打开开发者工具:
章节中主要会使用到 Console面板
(上图中第二个高亮的选项)来查看输出的日志等,结合日志来进行分析调试。
2. console 对象
console对象
通常要结合 Console面板
来使用,通常也会称呼其为 控制台
,为了防止 Console对象
与 Console
面板在称呼上的混乱,之后都会称其为 控制台
。
console.log('JavaScript');
3. 将 JavaScript 写在 HTML 中
学习过 HTML 的读者知道,浏览器可以直接打开 HTML 文件。
4. 通过操作 DOM 进行调试
通过操作 DOM,也可以达到调试的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>包中抽奖</title>
<style>
.start {
border: px solid #4caf50;
background: transparent;
font-size: px;
padding: px px;
color: #4caf50;
outline: none;
border-radius: px;
cursor: pointer;
}
.start:active {
background: #4caf50;
color: white;
}
.lottery {
font-size: px;
color: red;
}
.prize {
color: red;
font-size: px;
}
</style>
</head>
<body>
<div>
<button class="start">戳我抽奖!</button>
</div>
<div class="result">
</div>
<script>
var prizeList = ['5年高考3年模拟', '加班一天', '快乐水一罐'];
var startBtn = document.querySelector('.start');
var resultEle = document.querySelector('.result');
startBtn.addEventListener('click', function() {
var prize = Math.floor(Math.random() * + );
var text = [
'恭喜!抽到了 ',
'<span class="lottery">',
prize,
'</span>',
' 等奖!奖品是 ',
'<span class="prize">',
prizeList[prize - ],
'</span>',
'!',
].join('');
resultEle.innerHTML = text;
});
</script>
</body>
</html>
使用浏览器打开,点击按钮后就会展示对应的结果。
5. 小结
结合开发者工具进行调试是必备技能,调试的技巧也非常多样化,除了上述的几种,常用的还有 断点调试
,部分特殊情况下还会利用 alert
(一种会阻塞浏览器进程的对话框)进行调试。
不同的人使用的调试技巧也不同,有了一定的编码经验后就会找到适合自己的调试技巧,对语言本身有足够的调节,才能让自己的调试技巧更加完善。