检查和编辑页面与样式

使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS。

  • 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。
  • 在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则。
  • 在 Computed 窗格中查看和修改选定元素的框模型。
  • 在 Sources 面板中查看在本地对页面所做的更改。

实时编辑 DOM 节点

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

实时编辑样式

在 Styles 窗格中实时编辑样式属性名称和值。所有样式均可修改,除了灰色部分(与 User Agent 样式表一样)。

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

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

检查和编辑框模型参数

使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改,只需点击它们即可。

同轴矩形包含当前元素 paddingborder 和 margin 属性的 topbottomleftright 值。

对于位置为非静态的元素,还会显示 position 矩形,包含 toprightbottom 和 left 属性的值。

查看本地更改

要查看对页面所做实时编辑的历史记录,请执行以下操作:

  1. 在 Styles 窗格中,点击您修改的文件。DevTools 会将您带到 Sources 面板。
  2. 右键点击文件。
  3. 选择 Local modifications

要探索所做的更改,请执行以下操作:

  • 展开顶级文件名查看做出修改的时间 
  • 展开第二级项目查看修改相应的不同(前和后)。

粉色背景的线表示移除,绿色背景的线表示添加。

撤消更改

如果您未设置永久制作,每次您重新加载页面时,所有的实时编辑都会丢失。

假设您已设置了永久制作,要撤消更改,请执行以下操作:

  • 使用 Ctrl+Z (Windows) 或 Cmd+Z (Mac) 通过 Elements 面板快速撤消对 DOM 或样式所做的细微更改。

  • 要撤消对文件所做的所有本地修改,请打开 Sources 面板,然后选择文件名旁的 revert

检查应用到元素的样式

  1. 与元素匹配的选择器的关联样式。
  2. User Agent 样式表清晰标记,并且在网页上经常被 CSS 替换。
  3. 已被级联规则替换的规则将显示为带删除线的文本。
  4. 继承的样式将在“Inherited from <NODE>”标头下显示为一组。点击标头中的 DOM 节点可以导航到其在 DOM 树视图中的位置。 (CSS 2.1 属性表显示了哪些属性是可以继承的。)
  5. 灰色的条目不是已定义的规则,而是在运行时计算的规则。

检查受选择器影响的元素

在 Styles 窗格中将鼠标悬停在 CSS 选择器上可以查看受该选择器影响的所有元素。 例如,在下面的屏幕截图中,鼠标悬停在选择器 .wf-tools-guide__section-link a 上。在实时页面中,您可以看到受选择器影响的所有 <a> 元素。

添加、启用和停用 CSS 类

点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里,您可以执行以下操作:

  • 启用或停用当前与元素关联的类。
  • 向元素添加新类。

编辑现有属性名称或值

点击 CSS 属性名称或值可以对其进行编辑。在名称或值突出显示时,按 Tab 可以向前移动到下一个属性、名称或选择器。

按 Shift+Tab 可以向后移动。

编辑数字式 CSS 属性值时,可以使用下面的键盘快捷键增大和减小值:

  • 使用向上键和向下键能够以 1 为增量增大和减小值(如果当前值介于 -1 和 1 之间,则增量为 0.1)。
  • 使用 Alt+向上键和 Alt+向下键能够以 0.1 为增量增大和减小值。
  • 使用 Shift+向上键能够以 10 为增量增大值;使用 Shift+向下键能够以 10 为增量减小值。
  • 使用 Shift+Page Up(Windows、Linux)或 Shift+Function+向上键 (Mac) 能够以 100 为增量增大值。使用 Shift+Page Down(Windows、Linux)或 Shift+Function+向下键 (Mac) 能够以 100 为增量减小值。

添加新属性声明

点击可编辑 CSS 规则中的空白处可以创建一个新声明。 键入,或者将 CSS 粘贴到 Styles 窗格中。属性及其值将解析并输入到正确的字段中。

注:要启用或停用样式声明,请选中或取消选中旁边的复选框。

添加样式规则

点击 New Style Rule () 按钮可以添加一个新的 CSS 规则。

点击并按住按钮可以选择要向哪一个样式表添加规则。

添加或移除动态样式(伪类)

您可以在元素上手动设置动态伪类选择器(例如 :active:focus:hover 和 :visited)。

可以通过两种方式在元素上设置动态状态:

  • 在 Elements 面板内右键点击某个元素,然后从菜单中选择目标伪类,将其启用或停用。 

  • 在 Elements 面板中选择元素,然后在 Styles 窗格中点击 :hov 按钮,使用复选框启用或停用当前选定元素的选择器。

编辑样式

使用 Styles 窗格可以修改与元素关联的 CSS 样式。

TL;DR

  • 利用 Styles 窗格,您可以在本地以尽可能多的方法更改 CSS,包括修改现有样式、添加新样式,以及为样式添加规则。
  • 如果您希望样式可以保持(不会在重新加载后消失),则需要将其保存到您的开发工作区中。

检查应用到元素的样式

选择一个元素以检查其样式。 Styles 窗格可以显示应用到选定元素的 CSS 规则,优先级从高到低:

  • 顶端为 element.style。这些样式要么直接使用样式属性(例如 <p style="color:green">)直接应用到元素,要么在 DevTools 中应用。

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

  • 再下方是继承的样式,其中包括与选定元素的祖先实体匹配的任何可继承样式规则。 例如,在下面的屏幕截图中,选定元素从 user agent stylesheet 继承 display:list-item

下图上的标签与其下方带编号的项目对应。

  1. 与元素匹配的选择器的关联样式。
  2. User Agent 样式表清晰标记,并且在网页上经常被 CSS 替换。
  3. 已被级联规则替换的规则将显示为带删除线的文本。
  4. 继承的样式将在“Inherited from <NODE>”标头下显示为一组。点击标头中的 DOM 节点可以导航到其在 DOM 树视图中的位置。 (CSS 2.1 属性表显示了哪些属性是可以继承的。)
  5. 灰色的条目不是已定义的规则,而是在运行时计算的规则。

了解级联和继承的原理对于调试样式至关重要。 级联与 CSS 声明被赋予的权重有关,权重用于确定规则在与其他规则重叠时哪些规则的优先级更高。 继承与 HTML 元素如何从其所属元素(祖先实体)继承 CSS 属性有关。 如需了解详情,请参阅有关级联的 W3C 文档

检查受选择器影响的元素

在 Styles 窗格中将鼠标悬停在 CSS 选择器上可以查看受该选择器影响的所有元素。 例如,在下面的屏幕截图中,鼠标悬停在选择器 .wf-tools-guide__section-link a 上。在实时页面中,您可以看到受选择器影响的所有 <a> 元素。

:此功能仅突出显示视口中的元素;视口以外的其他元素也可能受选择器影响。

添加、启用和停用 CSS 类

点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里,您可以执行以下操作:

  • 启用或停用当前与元素关联的类。
  • 向元素添加新类。

编辑现有属性名称或值

点击 CSS 属性名称或值可以对其进行编辑。在名称或值突出显示时,按 Tab 可以向前移动到下一个属性、名称或选择器。

按 Shift+Tab 可以向后移动。

编辑数字式 CSS 属性值时,可以使用下面的键盘快捷键增大和减小值:

  • 使用向上键和向下键能够以 1 为增量增大和减小值(如果当前值介于 -1 和 1 之间,则增量为 0.1)。
  • 使用 Alt+向上键和 Alt+向下键能够以 0.1 为增量增大和减小值。
  • 使用 Shift+向上键能够以 10 为增量增大值;使用 Shift+向下键能够以 10 为增量减小值。
  • 使用 Shift+Page Up(Windows、Linux)或 Shift+Function+向上键 (Mac) 能够以 100 为增量增大值。使用 Shift+Page Down(Windows、Linux)或 Shift+Function+向下键 (Mac) 能够以 100 为增量减小值。

添加新属性声明

点击可编辑 CSS 规则中的空白处可以创建一个新声明。 键入,或者将 CSS 粘贴到 Styles 窗格中。属性及其值将解析并输入到正确的字段中。

注:要启用或停用样式声明,请选中或取消选中旁边的复选框。

添加样式规则

点击 New Style Rule () 按钮可以添加一个新的 CSS 规则。

点击并按住按钮可以选择要向哪一个样式表添加规则。

添加或移除动态样式(伪类)

您可以在元素上手动设置动态伪类选择器(例如 :active:focus:hover 和 :visited)。

可以通过两种方式在元素上设置动态状态:

  • 在 Elements 面板内右键点击某个元素,然后从菜单中选择目标伪类,将其启用或停用。 

  • 在 Elements 面板中选择元素,然后在 Styles 窗格中点击 :hov 按钮,使用复选框启用或停用当前选定元素的选择器。

向样式规则添加背景色或颜色

Styles 窗格提供了一个用于向样式规则添加 color 和 background-color 声明的快捷方式。

样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标。

将鼠标悬停到此图标上可以调出用于添加 color 声明 () 或 background-color 声明 () 的按钮。点击这些按钮之一可以将声明添加到样式规则中。

使用 Color Picker 修改颜色

要打开 Color Picker,请在 Styles 窗格中查找一个定义颜色的 CSS 声明(例如 color: blue)。 声明值的左侧有一个带颜色的小正方形。 正方形的颜色与声明值匹配。 点击小正方形可以打开 Color Picker

您可以通过多种方式与 Color Picker 交互:

  1. 取色器。请参阅取色器了解更多信息。
  2. 当前颜色当前值的可视表示。
  3. 当前值当前颜色的十六进制、RGBA 或 HSL 表示。
  4. 调色板。请参阅调色板了解更多信息。
  5. 着色和阴影选择器
  6. 色调选择器
  7. 不透明度选择器
  8. 颜色值选择器。点击可以在 RGBA、HSL 和十六进制之间切换。
  9. 调色板选择器。点击可以选择不同的模板。

取色器

点击取色器按钮将其启用 (),在实时页面上将鼠标悬停到某种颜色上,然后点击,将当前选定的声明值设置为您悬停的颜色。

调色板

Color Picker 提供了下列调色板:

  • Page Colors。一组从页面的 CSS 自动生成的颜色。
  • Material Design。一组符合 Material Design 规范的颜色。
  • Custom。您选择的任意一组颜色。DevTools 可以保存您的自定义调色板(甚至在不同的页面间),直至您将其删除。

修改自定义调色板(custom下)

加号按钮可以将当前颜色添加到调色板中。 点击并按住颜色可以将其拖动到不同的位置,或者将其拖动到垃圾桶图标进行删除。 右键点击颜色并选择 Remove color 可以将其删除。 选择 Remove all to the right 可以删除当前选定颜色右侧的所有颜色。 右键点击调色板区域中的任何位置,然后选择 Clear template 可以删除模板的所有颜色。

查看和编辑 CSS 自定义属性(CSS 变量)

您可以查看和编辑定义或使用 CSS 自定义属性(之前称为 CSS 变量)的声明,就像查看和编辑任何其他声明一样。

自定义属性通常在 :root 选择器中定义。 要查看在 :root 中定义的自定义属性,请检查 html 元素。

不过,并不一定要在 :root 选择器上定义自定义属性。如果您在其他地方定义,请在定义元素的地方检查元素以查看定义。

您可以查看和编辑使用自定义属性的声明值,就像查看和编辑任何其他声明值一样。

如果您看到一个像 var(--main-color) 一样的声明值(如下面的屏幕截图所示),则表示声明正在使用自定义属性。 可以像编辑任何其他声明值一样编辑这些值。 目前,没有办法跳转到自定义属性定义。

编辑 Sass、Less 或 Stylus

如果您在使用 Sass、Less、Stylus 或任何其他 CSS 预处理器,则在 Styles 编辑器中编辑生成的 CSS 输出文件不会有任何作用,因为它们不会映射到您的源代码。

借助 CSS 源映射,DevTools 可以将生成的文件自动映射到源代码文件,这样,您可以在 Sources 面板中实时编辑这些文件并查看结果,而不用离开 DevTools 或刷新页面。

预处理器工作流

在检查样式由生成的 CSS 文件提供的元素时,Elements 面板会显示原始的源文件而不是生成的 CSS 文件的链接。

要跳转到源文件,请执行以下操作:

  1. 点击链接,在 Sources 面板中打开(可编辑)源文件。
  2. Ctrl + 点击(或 Cmd + 点击)任何 CSS 属性名称或值,打开源文件并跳转到相应行。

在 DevTools 中保存对 CSS 预处理器文件的更改时,CSS 预处理器应重新生成 CSS 文件。然后,DevTools 将重新加载新生成的 CSS 文件。

启用/停用 CSS 源映射和自动重新加载

默认情况下,CSS 源映射处于启用状态。您可以选择启用生成的 CSS 文件的自动重新加载。要启用 CSS 源映射和 CSS 重新重新加载,请执行以下操作:

  1. 打开 DevTools 的 Settings 面板并点击 General
  2. 开启 Enable CSS source maps 和 Auto-reload generated CSS

要求和问题

  • DevTools 无法检测到在外部编辑器中进行的更改,直至包含关联的源文件的 Sources 标签重新获得焦点。
  • 手动修改 Sass/LESS/其他编译器生成的 CSS 文件将中断源映射关联,直至页面重新加载。
  • 使用工作区确保生成的 CSS 文件同时映射到工作区中。为此,您可以查看 Sources 面板右侧树,确定 CSS 是从您的本地文件夹提供。
  • 要使 DevTools 在您更改源文件时自动重新加载样式,必须将您的预处理器设置为在源文件每次发生更改时都重新生成 CSS 文件。否则,您必须手动重新生成 CSS 文件并重新加载页面才能看到更改。
  • 您必须从网络服务器访问您的网站或应用(不是从 file:// 网址),服务器必须提供 CSS 文件,以及源映射 (.css.map) 和源文件 (.scss, etc.)。
  • 如果您_未_使用“工作区”功能,网络服务器还必须提供 Last-Modified 标头。

设置 CSS 与 JS 预处理器中了解如何设置源映射。

chrome开发工具指南(六)的更多相关文章

  1. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  2. chrome开发工具指南(一)

    注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...

  3. chrome开发工具指南(二)

    Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...

  4. chrome开发工具指南(十四)

    模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...

  5. chrome开发工具指南(十二)

    使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其 ...

  6. chrome开发工具指南(七)

    检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...

  7. chrome开发工具指南(十三)

    模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...

  8. chrome开发工具指南(十一)

    检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹 ...

  9. chrome开发工具指南(九)

    检查和管理存储.数据库与缓存 查看和修改本地存储与会话存储. 检查和修改 IndexedDB 数据库. 对 Web SQL 数据库执行语句. 查看应用缓存和服务工作线程缓存. 点击一次按钮即可清除所有 ...

随机推荐

  1. 原生JS元素怎么取消事件

    关于原生JS元素怎么取消事件,有3种方式 常规方法:removeEventListener 案例: <body> <div id="myDIV"> div ...

  2. Hibernate与 MyBatis的比较(转)

    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.NET,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀 ...

  3. HPU--1141 蜗牛爬树

    1141: 蜗牛爬树 [模拟] 时间限制: 1 Sec 内存限制: 128 MB提交: 377 解决: 60 统计 题目描述 阿门阿前一棵葡萄树,阿嫩阿嫩绿地刚发芽,蜗牛背著那重重的壳呀,一步一步地往 ...

  4. 【有意思的BUG】需要停止的进程

    用户操作的目的:将某网站的歌曲分享到朋友圈 用户遇到的问题:在朋友圈内,有2个入口可以播放该第三方的歌曲.但是这两个入口可以同时播放,音乐重叠了. 操作步骤: [1] 将歌曲分享到朋友圈 [2] 在朋 ...

  5. 在Linux下更新或安装curl

    问题 我这有一个项目是.net core写的,然后运行到centos机器上,刚开始发请求都能正常处理,但是时间长了,程序会报Segmentation fault,然后退出,我查了一下系统log,说的是 ...

  6. Oracle 安装报错 [INS-06101] IP address of localhost could not be determined 解决方法[转]

    --安装Oracle 11gR2,报错:[INS-06101] IP address of localhost could not be determined--------------------- ...

  7. DVWA笔记之一:brute Force

    1.Low 级别 burpsuite抓包 low级别是使用GET请求进行登录,将其发送到Intruder中,并增加password变量 之后选择字典开始攻击. 暴力破解完成后,查看结果RESULT,根 ...

  8. 利用 :before :after伪类实现鼠标悬浮动画效果

    1.最近在逛网站的时候,想找一下喜欢的鼠标悬浮效果,避免广告的嫌疑,直接放图了: 2.在实现的时候,如果在直接使用鼠标hover ,transform,进行过渡,不能达到想要的效果,因为同时只能触发一 ...

  9. 复杂DIV交错布局

    问题: 请写一段html和CSS实现图中布局: 解析: 考察实现此种效果布局的几种方式. --- 答案:TBD

  10. JS对JSON的操作总结

    对于前端完全是菜鸟,迫于无奈,工作中要用到JS,尤其对JSON的处理为多,网上搜了一下,所讲的基本雷同.所以把平时用的比较多的JSON处理方法总结了一下,权当加深记忆. 一.概述 JSON(JavaS ...