本教程的前面一系列步驟，我們或多或少已經使用了 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 開發者工具的一系列使用小技巧。

總結

以上是生活随笔為你收集整理的SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。