3.3 开发者工具调试元素

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

开发者工具调试元素包括：查看元素结构，选择元素，查看盒子，增删改查。查看元素结构详情见“2.7 开发者工具查看元素结构”。

3.3.1 选择元素与查看盒子

选择元素的作用是查看元素的样式或盒子显示。选择元素包括两种方式。

方法1：从元素面板选择。元素面板单击相应的节点。

盒子各区域标记以不同颜色标记，详情见“第6章盒子模型”。

方法2：从页面内容选择。单击面板左侧的选中图标，然后鼠标放在相应页面内容。

方法1：从元素面板选择元素时，显示信息包括标签、ID、类、以及宽高。

方法2：页面选中元素时，显示更多详细信息，包括字体、颜色、内外边距等。如果窗口高度不够，则不显示。

方法3：样式面板或计算样式面板查看盒子各区域具体数值、各属性值。

通过开发者工具进行任何修改（包括HTML代码与CSS代码等），不会修改源文件代码。刷新页面后又按原样显示。双击元素的内容体进入编辑状态。

修改元素内容体不支持修改标签本身，不支持加入标签，如
等任何标签，会进行相应转义，输出会原样输出标签本身。

如果要加入标签，需要使用“以HTML格式修改元素”。

选中元素—右键—单击菜单项“以HTML格式修改”。

标签本身进入编辑状态，支持任意修改，包括修改当前标签、内部加入其它标签。

元素面板按“Ctrl+F”，弹出查找框，可以根据标签、内容等字符串进行查询。

元素支持选中节点后进行如下快捷操作：Del键（删除）、Ctr+C（复制）、Ctr+V（粘贴）、 Ctrl+Z（撤销）与Ctrl+Y（重做），并支持鼠标拖动元素到其它位置。