Chrome控制台的使用一

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

一、检查和编辑页面

使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS。在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。

在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则，在 Styles 窗格中实时编辑样式属性名称和值。所有样式均可修改，除了灰色部分（与 User Agent 样式表一样）。

在 Computed 窗格中查看和修改选定元素的框模型。在 Sources 面板中查看在本地对页面所做的更改。

·检查和编辑页面与样式。

要实时编辑 DOM 节点，只需双击选定元素，然后进行更改。

DOM 树视图会显示树的当前状态；可能会与最初因其他原因加载的 HTML 不匹配。例如，可以使用 JavaScript 修改 DOM 树；浏览器引擎会尝试修正无效的作者标记并生成意外的 DOM

要编辑名称或值，请点击它，进行更改，然后按 Tab 或 Enter 保存更改。

默认情况下， CSS 修改不是永久的，重新加载页面时更改会丢失。如果想要在页面加载时保留更改，请设置永久制作。