今天的内容本来是「需要掌握哪些调试技巧」,觉得 demo 挺有意思就用了 demo 的主题作为今天的标题了。实现各种「好看」的界面与交互是前端开发的基本功,这一技能特别重要,尤其对于刚入门前端的同学来说,大部分工作都与界面设计相关,所以前端开发的基础是HTML和CSS。而界面调试是前端必须要掌握的技能。我们今天认识一下 Chrome 浏览器的调试工具。
连续坚持了 3 天,想必你也累了,该鼓励下自己了,今天做了这个 demo,点击按钮后将会出现一句鼓励自己的话,并把这句话作为今天的打卡指令。
通过这个 demo,我们看看如何调试这个页面。假如在开发中出现了以下场景该如何调试?
场景1:点击按钮后没效果
场景2:标题间距不对
场景3:查看某些变量的值
有时候想查看某个变量的值,直接在控制台打印对应的变量名即可,比如在上面的 demo 中,我定义了一个 titles 全局变量,通过控制台输入变量名,然后按回车即可。同时也可以打印其它全局变量的值,比如 document 对象,window 对象,函数名:
场景4:查看页面使用的源文件
通过 source 标签可以看到,当前页面使用了 3 个文件,分别为 day4.html, day4.js 和 day4.css。通过这个可以方便找到页面所对应的文件名,还可以查看源码。
今天的 demo 也可以当做一次学习的机会,这里贴一下关键的代码。
// day4.js
let titles = [
'我要坚持完成前端小课第一阶段的内容!',
'我的目标是学好前端!',
'大家共同努力!',
'前端小课开课啦!',
'今天是学习的第四天,继续加油!'
];
let addText = function () {
let index = Math.floor(Math.random() * titles.length + 0);
let div = document.createElement("div");
let textNode = document.createTextNode(titles[index]);
div.appendChild(textNode);
div.style.color = "#FE7235";
div.style.lineHeight = 2;
let contentDiv = document.getElementById('content');
contentDiv.appendChild(div);
}
// day4.css
body {
background-color: #2A3950;
}
.button {
border: 1px solid white;
text-align: center;
padding: 10px 30px;
margin: 40px 50px;
border-radius: 4px;
background-color: #7089FF;
color: white;
font-weight: bold;
}
.title {
text-align: center;
color: white;
}
#content {
margin: 20px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=3.0">
<title>调试工具</title>
<script src="./day4.js"></script>
<link rel="stylesheet" href="./day4.css">
</head>
<body>
<h1 class="title">给自己一句鼓励的话</h1>
<div id="content"></div>
<div class="button" onclick="addText()">鼓励自己一下</div>
</body>
</html>
通过一个 demo 总结了常用的调试技巧,demo 中涉及到了通过 JavaScript 动态操作 DOM,CSS 的使用。对前面的知识进行了巩固。还有一项调试技巧特别重要「Android 和 iOS 真机调试」,这非常有助于定位到问题,后续做项目的时候会讲它的使用方式。大家加油!明天是关于 HTML 最后一节内容,HTML 标签。
推荐阅读:
前端小课,每日一课