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

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

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

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

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

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

看到如下界面：

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

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