最受歡迎的支持問題是:“我必須編輯哪些CSS代碼才能改變(…)的外觀”。幾年前，CSS/HTML編輯器是最有用的web開發工具?，F在，我認為更有用的是構建在每個現代瀏覽器中的web代碼調試器，例如Firefox、Safari、Chrome、Brave甚至MS Edge。代碼檢查器允許你檢查、修改(模擬更改)和調試網頁的HTML、CSS和JavaScript。如果你正在尋找有關使用瀏覽器中可用的web 開發人員工具的信息，那么你找到了正確的地方。

如何運行瀏覽器的Web開發人員工具？ 

首先是第一件事，使用開發人員工具的方法因瀏覽器而異。我們從谷歌瀏覽器開始。

• 對于Chrome，點擊菜單上的>開發工具或者使用相應的鍵盤快捷鍵，或者
• 選中一個元素：右鍵單擊網頁上的元素，然后選擇“檢查”

檢查器將出現在瀏覽器窗口的底部，如下面的截圖所示。

打開時，它會彈出并?？康疆斍盀g覽器窗口的底部或單獨的窗口中(這取決于瀏覽器的設置)。

查看并檢查組成一個網頁的元素。所呈現的站點HTML是可見的并且在左側完整可編輯，并且關于網頁的節點、樣式和層的細節可在右側的工具條中獲得。

對于Chrome，你可以參考官方文件。繼續閱讀本文內容，以便更快地學習核心內容。

如何使用web開發人員工具?

工具欄通常位于屏幕的底部，你可以控制檢查器。選中的元素將高亮顯示，頁面上的其他元素將變暗。編輯允許你預覽帶有HTML、CSS和JavaScript代碼調整的web內容輸出。它可以幫助你檢查所有的資源使開發更高效，最重要的是，使用最常見的CSS屬性調整樣式。

你可以編輯任何HTML元素，并通過CSS塊和可視化的方式編輯CSS樣式。

如果你點擊了樣式視圖的聲明或者選擇器，你可以編輯它們，并且可以馬上看到效果。那你還可以選擇不同的現有屬性和值，并通過按Enter或鼠標單擊開始編輯它們。要向規則添加新聲明，請單擊規則的最后一行(右括號所占的行)。當你開始輸入屬性名時，你會看到一份自動補充的屬性列表。

你可以接受當前建議或在列表中移動。默認選項是以你鍵入的字母開頭的最常見屬性。例如，這里用戶鍵入了“c”，默認選項是“color”（上面的屏幕截圖）。如果在編輯屬性時輸入無效值，或者輸入未知屬性名稱或值，則該行中將顯示黃色警報圖標。Web檢查器還包括許多用于處理特定CSS功能的專用工具，例如顏色，字體和動畫。

你還可以在樣式表文件中編輯CSS規則并在腳本文件中編輯JavaScript（下面的屏幕截圖）。

你所做的任何更改都是臨時的：重新加載頁面將恢復原始樣式。

警告！開發人員工具中所做的更改不會保存在模板，組件，模塊CSS / JS文件中。你必須復制更改的代碼行并在自定義代碼文件中使用它們。

大多數瀏覽器還有內置選項來模擬瀏覽器中的移動設備（視圖）。響應式設計模式提供了一個簡單的界面，可以跨各種屏幕尺寸，方向和分辨率快速預覽你的網頁。非常方便的移動開發工具。

我需要改變頁面所更改的css樣式

如果你知道應該覆蓋哪些CSS行以實現所需的更改，則必須在模板中使用自定義代碼。如果你已安裝并設置為默認的Helix3或Helix Ultimate模板，我們建議你使用custom.css文件寫入所有主要更改并添加的新行：

templates \ shaper_NAME \ css \ custom.css

首先你必須從Joomla管理員或通過FTP創建該新文件

使用這種方法，你可以custom.css中控制整個站點的CSS樣式設計。

例如，如果所有的插件標題都應該是紅色的，你可以custom.css中更改它，而不是在每個模塊設置中單獨更改。你可以對來自SP Page Builder的插件樣式和任何其他組件執行相同的操作。主要規則是通用的。

選擇開發瀏覽器

Mozilla開發了Firefox開發者版，內置開發工具，為開發者量身定制的版本，配備了最新的Firefox功能和實驗性開發工具。它包括專門用于使用CSS網格構建和設計的工具。這些工具允許你可視化網格、顯示相關的區域名稱、在網格上預覽轉換等等。

總結

從一開始我每天都使用這個工具。無論你是新用戶還是有經驗的Joomla用戶，你都將從使用瀏覽器中內置的web開發人員工具中獲益良多。它們是免費的，非常強大，提供了一個學習、思考和試驗新風格的平臺。幾乎所有這些工具都提供了用于創建、調試和性能監視的各種工具。解釋所有的特性超出了這篇文章的范圍。但是，我們希望上述工具的介紹能夠幫助你完成日常Joomla開發工作。