2.7 开发者工具查看元素结构

原创声明。未经许可,不得转载,作者:小步教程。

DebugError000:碰到错误不能使用开发者工具调试。这是严重级别最高的错误之一。

没有掌握开发者工具基本等于没有掌握CSS。编码因为各种原因可能出错,编码偶尔出错是正常现象;如果不能快速排错,则不是正常现象。Chrome开发者工具是检查代码错误与调试的强大工具,基本所有错误都能直接或间接通过它检查,并且使用它能理解更多的CSS原理。后续几乎每项学习内容都使用它检查与调试。

正确代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小步教程</title>  
</head>
    
<body>
  Hello,HTML。www.xiaobuteach.com
</body>
</html>

2.7.1 打开开发者工具

开发者工具的两种打开方式:快捷键 “F12”;网页“右键”—“检查”。使用“检查”方式时,会自动定位到右键所在元素。

img


开发者工具查看元素结构,与编写的源代码完全一致。说明编码完全正确与规范。

img

图示元素左侧箭头提供节点的展开与收缩操作,便于切换查看整体结构或详情。

DOM树。元素面板显示的元素结构树也称DOM树,DOM树更多用于JS操作时的叫法。


2.7.2 DevError004 标签名拼写错误

DevError004错误原因:手误把标签名title拼写错误,多加一个空格。

<ti tle>小步教程</title>

问题现象:页面的标题变成页面地址,想要的标题显示在页面主体。

img

问题分析:假装使用其它方法都未发现问题。编码与运行结果不符,title里的内容到了body里,大胆推测:代码语法出现问题,浏览器拿到错误的源代码,解析得到莫名其妙的结果。

开发者工具查看元素结构

img

发现title从head移到body内,成功定位到title标签(或者附近标签)出现问题。


2.7.3 浏览器工作原理之解析HTML

HTML代码编写错误时,浏览器不会像其它语言一样报错,会按自己的规则解析显示页面,但解析结果可能与期望不一致。上述示例能够观察出解析规则:源代码的<ti title>被解析成<ti>,并且源代码没有找到对应的结束标签</ti>,自动补齐它在body内部结束位置。

w3c定义HTML代码完整的解析规范,以及对于不标准写法的解析处理。因为具体解析过程是大量词法分析的晦涩内容,这里不具体讲解。

开发者工具通过元素面板查看解析结果,这是调试元素的重要方法。更多内容见“3.2 标签语法”与“3.3 开发者工具调试元素”。


2.7.4 设置开发者工具停靠位置

单击开发者工具右上角的“自定义和控制”按钮,弹出菜单选择“停靠侧”。

img

第1个表示显示在独立新窗口,后续3个分别表示左、下、右。独立窗口显示如下。

img