“工欲善其事，必先利其器”，Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie，还可以模拟手机进行调试。我们现在只是使用html和css，我们先讲一下现在常用的调试。
1. 怎样使用Chrome调试工具？
直接在页面上点击右键，然后选择“检查”快捷键 F12 或者 ctrl+shift+i。
基本的结构布局是左边 html 右边是 css。
小技巧：
- 上图的小指针按钮选中之后，鼠标点击页面上的元素，下面会自动跳到对应的 html 代码
- 小指针按钮右边的图示是用来进行桌面和手机效果切换的
- ctrl+滚轮 可以放大开发者工具代码大小，ctrl + 0 复原浏览器大小
- 右边CSS样式可以改动数值和颜色查看更改后效果
Chrome调试数值
可以鼠标点击后面的数值，按上箭头是调大数值，下箭头是调小数值。
快速定位css所在行数
2. Chrome提示的常见布局错误
① css单词书写错误提示
点击下图所示的黑色箭头，点击我们需要的 html 元素，查看css单词是否拼写错了。
② css无显示
css文件引入不对或者这个样式的前面多余了一些符号影响。
③ html 结构不匹配
左侧，展开可以看到 html 标签是否匹配。
④ 通过颜色判断盒子
蓝色是盒子的宽度高度，青色是内边距，橙色是外边距，通过这个很方便的看到盒子给的范围。
⑤ 看看你有如下错误吗？
3. CSS书写规范
开始就形成良好的书写规范，是你专业化的开始。
① 空格规范
- 【强制】 选择器 与 { 之间必须包含空格。
示例： .selector { }
- 【强制】 属性名 与之后的 : 之间不允许包含空格，: 与属性值之间必须包含空格。
示例：font-size: 12px;
② 选择器规范
- 【强制】 并集选择器，每个选择器声明必须独占一行。
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
- 【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
③ 属性规范
- 【强制】 属性定义必须另起一行。
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
- 【强制】 属性定义后必须以分号结尾。
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
4. VSCode快捷操作
使用VSCode的快捷操作可以提高 html/css 的编写速度。
- 生成标签，直接输入标签名按tab键即可，比如 div 然后 tab 键，就可以生成
<div></div> - 如果想要生成多个相同标签，加上 * 就可以了 比如 div*3，就可以快速生成3个div
- 如果有父子级关系的标签，可以用 >，比如 ul > li 就可以了
- 如果有兄弟关系的标签，用 + 就可以了，比如 div+p
- 如果生成带有类名或者id名字的，直接写 .demo 或者 #two，然后 tab 键就可以了
- 如果生成的 div 类名是有顺序的，可以用自增符号 $ ，比如：
.demo$*3
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
