快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → chrome浏览器[Chrome开发者工具]使用教程之Elements(元素面板)

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

时间:2019-05-15 13:46:07人气:作者:快盘下载我要评论

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规则,优先级从高到低展示:

  • 在顶部是element.style。这些是使用style属性直接应用于元素的样式(例如,<p style="color:green">)(注:内联样式),或是你在DevTools该区域编辑应用的。

  • 下面是与元素匹配的所有CSS规则。例如,在下面的屏幕截图中,所选元素接收line-height:24px 的规则,定义在tools.css中。

  • 下面是继承的样式,包括匹配所选元素的祖先元素所有可继承的样式规则。 例如,在下面的屏幕截图中,所选元素继承了来自user agent stylesheet中的display:list-item 规则。


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更改都会触发断点:子树的变化,属性改变,节点删除。


相关文章

  • CSS3图片鼠标悬停动画js特效

    CSS3图片鼠标悬停动画js特效,CSS3图片鼠标悬停动画特效。该特效在鼠标悬停到图片上面的时候,利用CSS3制作上下关门的动画效果,非常炫酷。...
  • CSS再学习(如何设置背景图片透明)

    CSS再学习(如何设置背景图片透明),怎么设置背景图片的透明度?1 在HTML中在body内部的任意位置写上img标签并定义classclass.back{/*---重点---*//*设置透明度*//*设置图片的层级为最底层,即在所有内容的最下面*//*设置图片固定(不随页面滚动),配合z-index就可以实现让图片作为背景*/}...

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。