SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类

本教程的前面一系列步骤，我们或多或少已经使用了 Chrome 开发者工具来学习 SAP UI5 应用的开发，比如通过 Elements 标签页查看 SAP UI5 XML 视图里定义的控件，运行时生成的原生 HTML 代码，或者是在 Console 标签页里，查看在调试模式下 SAP UI5 运行时报出的 INFO 或者 ERROR 消息。

从本步骤开始的接下来一系列步骤，我们来系统学习如何使用 Chrome 开发者工具来帮助我们更好地进行 SAP UI5 的开发。

本步骤的源代码，重用步骤 8 的代码，地址如下：

https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/36

进入文件夹 36，执行命令行 npm install 和 ui5 serve，访问 url：

http://localhost:8080/webapp/index.html

看到如下界面：

我们使用如下菜单，打开 Chrome 开发者工具。当然也可以直接用快捷键 F12.

Firefox 和 微软 Edge 浏览器也有类似 Chrome 的开发者工具，使用方法大同小异。

Chrome 开发者工具打开后的第一个标签，就是 Elements 面板，如下图所示。接下来我会分享 Chrome 开发者工具的一系列使用小技巧。

技巧1：动态修改 SAP UI5 控件的 HTML 源代码，即时看到修改效果

以 Button 控件为例。我们单击 Elements 所在工具栏最左边的按钮，快捷键为 Ctrl+Shift+C，进入元素审查模式。

在元素审查模式下，我们把鼠标放到浏览器页面的任意一个 SAP UI5 控件上，该控件就会呈现一个浅蓝色的高亮矩形框(如下图图例1)，同时对应的 HTML 源代码在 Elements 里自动被高亮出来。

我们看到该控件采用了 HTML 原生的 button 标签实现，具有两个 SAP UI5 标准的 CSS class：sapMBtnBase sapMBtn。点击右边的 Computed 标签，查看该 button 控件的布局信息，比如 margin 属性为 0，因为我们没有显式给这个属性赋值。

下面我们使用 Chrome 开发者工具动态修改该 button 标签的 class 属性。双击 class 属性现有的值，使其处于高亮显示状态。

然后再单击，看到光标输入提示符号 |, 说明我们已经可以编辑 class 属性了。粘贴一个新的 class 类：sapUiLargeMargin

之后看到该 button 的左右，上下都产生了一个 60 px 的 margin.

这个 60 px 是怎么来的呢？从 Styles 标签页里能看出，sapUiLargeMargin 是 SAP UI5 标准的 css Class，定义了 margin 为 3 rem. rem 是一种相对大小单位，在没有修改浏览器的字体大小设置的默认情况下，1 rem = 16 px，因此 3 rem = 48 px.

因为我使用的 Chrome，我对字体大小进行了自定义设置，在我的 Chrome 里 1rem = 20px, 如下图所示，因此 3rem = 60px，所以最后的 margin 值是 60 px.

下图是我用 Firefox 重复上述步骤，最后得到的 margin 值为 48 px，因为我的 Firefox 浏览器没有对字体大小进行任何设置。

由此可见，SAP UI5 的标准 css 文件包含了大量开箱即用的 css 类，我们可以直接在自己应用的 XML 视图中使用，无需重复造轮子。

如果想知道 sapUiLargeMargin 这个 css 类是包含在哪个 .css 文件中的，该 .css 文件还有哪些其他的 css 类，直接双击下图高亮的链接：

就可以直接导航到这个 library.css 文件里了。该 css 文件默认情况下所有内容显示在一行，不便于阅读。

点击下图这个 {} 符号的按钮，可以对文件内容进行格式化：

我们在 library.css 里找到 sapUiLargeMargin，发现它的正上方，就是类似的 margin css 类：sapUiSmallMargin 和 sapUiMediumMargin，具体的值分别为 1rem 和 2rem. 这样我们就可以根据实际需要，选择不同大小的 margin 类了。

本教程后续步骤继续介绍 Chrome 开发者工具的 Elements 面板使用技巧。

更多Jerry的原创文章，尽在："汪子熙":