资讯

展开

chrome浏览器[Chrome开发者工具]使用教程之Elements(元素面板)

作者:快盘下载 人气:

chrome开发者工具可以通过Elements元素面板自由操纵DOM和CSS来重演您网站的布局和设计。通过工具检查和调整你的页面,编辑样式,编辑DOM。可以实时编辑一个DOM节点要实时编辑DOM节点,只需双击选中元素并进行更改:



chrome浏览器[Chrome开发者工具]使用教程之Elements(元素面板)


检查和调整你的页面


可以实时编辑样式属性名称和值。所有样式都是可编辑的,除了那些灰色的(如user agent stylesheet中的样式,html中文网注:即我们通常说的浏览器的默认样式表)。

要编辑名称或值,只要单击它就可以了,然后进行修改,然后按Tab或Enter键保存修改。


chrome浏览器[Chrome开发者工具]使用教程之Elements(元素面板)


默认情况下,您的CSS修改不是永久的,当您重新加载页面时,修改的内容就会丢失。如果您想要在页面重新加载时保留您的修改,请工作区设置持久化。如果您尚未设置持续创作,你只要重新加载页面,所有实时编辑内容都会丢失。想实现这个持久化,以将这些更改保存到磁盘中,可以将本地源文件添加到工作区。


可以在 Sources 面板中修改,请执行以下操作:

  1. 右键点击左侧面板。

  2. 选择 Add Folder to Workspace。

  3. 选择您想要映射的本地文件夹的位置。

  4. 点击 Allow,授予 Chrome 访问该文件夹的权限。


chrome浏览器[Chrome开发者工具]使用教程之Elements(元素面板)



编辑样式:


user agent stylesheet  html中文网注:即我们通常说的浏览器的默认样式表


chrome浏览器[Chrome开发者工具]使用教程之Elements(元素面板)


检查应用到元素的样式

选择一个元素[Select an element] 来检查它的样式。Styles(样式)窗格将显示所有应用于所选元素的CSS规则,优先级从高到低展示:

chrome浏览器[Chrome开发者工具]使用教程之Elements(元素面板)



编辑DOM。

Chrome DevTools Elements(元素)面板中的DOM树视图显示当前网页的DOM结构。DOM定义了页面的结构。每个DOM节点都是页面元素,例如,头部(header)节点,段落(paragraph)节点。通过DOM更新来实时编辑您的网页的内容和结构。


chrome浏览器[Chrome开发者工具]使用教程之Elements(元素面板)

  1. 浏览DOM


  2. 使用你的鼠标:

  3. 单击一次来突出显示一个节点。

  4. 要展开节点,请双击该节点上的任意位置或单击旁边的箭头。

  5. 要折叠节点,请单击节点旁边的箭头。

  6. 使用你的键盘:

  7. 按Up Arrow(向上箭头)键选择当前节点上方的节点。

  8. 按Down Arrow(向下箭头)键选择当前节点下方的节点。

  9. 按Right Arrow(向右箭头)键展开折叠的节点。再次按下可移动到(现在展开的)节点的第一个子节点。您可以使用这个技巧快速浏览深层嵌套的节点。


编辑DOM节点和属性

要编辑DOM节点名称或属性:

直接双击节点名称或属性。

在高亮显示节点上,按Enter键,然后按Tab键直到选中名称或属性。

打开更多操作菜单,然后选择Add Attribute(添加属性)或Edit Attribute(编辑属性)。Edit Attribute(编辑属性)是上下文相关的;你点击的部分决定了哪些内容将被编辑。

结束编辑会在完成后自动更新。



设置DOM断点


设置DOM断点可以用来调试复杂的JavaScript应用程序。例如,如果你的JavaScript改变了DOM元素的样式,设置一个DOM断点当元素的属性被修改时触发。在以下DOM更改都会触发断点:子树的变化,属性改变,节点删除。


加载全部内容

相关教程
猜你喜欢
用户评论
快盘暂不提供评论功能!