chrome开发者工具可以通过Elements元素面板自由操纵DOM和CSS来重演您网站的布局和设计。通过工具检查和调整你的页面,编辑样式,编辑DOM。可以实时编辑一个DOM节点要实时编辑DOM节点,只需双击选中元素并进行更改:
可以实时编辑样式属性名称和值。所有样式都是可编辑的,除了那些灰色的(如user agent stylesheet中的样式,html中文网注:即我们通常说的浏览器的默认样式表)。
要编辑名称或值,只要单击它就可以了,然后进行修改,然后按Tab或Enter键保存修改。
默认情况下,您的CSS修改不是永久的,当您重新加载页面时,修改的内容就会丢失。如果您想要在页面重新加载时保留您的修改,请工作区设置持久化。如果您尚未设置持续创作,你只要重新加载页面,所有实时编辑内容都会丢失。想实现这个持久化,以将这些更改保存到磁盘中,可以将本地源文件添加到工作区。
可以在 Sources 面板中修改,请执行以下操作:
右键点击左侧面板。
选择 Add Folder to Workspace。
选择您想要映射的本地文件夹的位置。
点击 Allow,授予 Chrome 访问该文件夹的权限。
user agent stylesheet html中文网注:即我们通常说的浏览器的默认样式表
选择一个元素[Select an element] 来检查它的样式。Styles(样式)窗格将显示所有应用于所选元素的CSS规则,优先级从高到低展示:
在顶部是element.style。这些是使用style属性直接应用于元素的样式(例如,<p style="color:green">)(注:内联样式),或是你在DevTools该区域编辑应用的。
下面是与元素匹配的所有CSS规则。例如,在下面的屏幕截图中,所选元素接收line-height:24px 的规则,定义在tools.css中。
下面是继承的样式,包括匹配所选元素的祖先元素所有可继承的样式规则。 例如,在下面的屏幕截图中,所选元素继承了来自user agent stylesheet中的display:list-item 规则。
Chrome DevTools Elements(元素)面板中的DOM树视图显示当前网页的DOM结构。DOM定义了页面的结构。每个DOM节点都是页面元素,例如,头部(header)节点,段落(paragraph)节点。通过DOM更新来实时编辑您的网页的内容和结构。
使用你的鼠标:
单击一次来突出显示一个节点。
要展开节点,请双击该节点上的任意位置或单击旁边的箭头。
要折叠节点,请单击节点旁边的箭头。
使用你的键盘:
按Up Arrow(向上箭头)键选择当前节点上方的节点。
按Down Arrow(向下箭头)键选择当前节点下方的节点。
按Right Arrow(向右箭头)键展开折叠的节点。再次按下可移动到(现在展开的)节点的第一个子节点。您可以使用这个技巧快速浏览深层嵌套的节点。
要编辑DOM节点名称或属性:
直接双击节点名称或属性。
在高亮显示节点上,按Enter键,然后按Tab键直到选中名称或属性。
打开更多操作菜单,然后选择Add Attribute(添加属性)或Edit Attribute(编辑属性)。Edit Attribute(编辑属性)是上下文相关的;你点击的部分决定了哪些内容将被编辑。
结束编辑会在完成后自动更新。
设置DOM断点可以用来调试复杂的JavaScript应用程序。例如,如果你的JavaScript改变了DOM元素的样式,设置一个DOM断点当元素的属性被修改时触发。在以下DOM更改都会触发断点:子树的变化,属性改变,节点删除。