重新介紹 Firefox 開發者工具之二

程式碼速記本 (Scratchpad) 與樣式編輯器 (Style Editor)

此為 Firefox 內建的開發者工具系列文章第二篇，將討論工具的功能與應用時機，以及其使用過程與目的。

在系列的第一篇文章中，我們談到網頁主控台 (Web Console) 與 JavaScript 除錯器 (JavaScript Debugger)。除了此二款強大工具可檢查並修改你的 Web App 之外，當然還有其他工具可協助開發者建構 App 並進行除錯。本篇文章就要簡略說明程式碼速記本 (Scratchpad) 與樣式編輯器 (Style editor)。

如同系列文章之一，我們亦將以短片說明工具的數項功能。

樣式編輯器 (Style Editor)

針對現有 App 內容中的樣式表 (Stylesheet)，樣式編輯器可進行編輯、除錯，或建立新的樣式表。於樣式編輯器中進行的變更，將自動反應至目前載入的頁面。如果你並不熟悉 Cascading Style Sheets (CSS)，則請參閱 MDN 上的 CSS 說明文件。

即便在使用編輯器期間，樣式編輯器仍可儲存相關變更。開發者在匯入現有的樣式表之後，可將之套用至現有頁面，或個別停用特定的樣式表。樣式編輯器亦可連至檢測器 (Inspector)，讓開發者迅速存取檢測中元素的樣式表。下列短片將概略呈現樣式編輯器的功能。

若要進一步了解樣式編輯器的相關資訊，可參閱 MDN 上的說明文章。

程式碼速記本 (Scratchpad)

程式碼速記本具備多樣功能，本身就是即時的 JavaScript 編輯器與原型設計工具。開發者能存取現有頁面的物件、變數、指令碼。此外，在目前頁面的範圍內，亦可於編輯器中寫入並測試所有函式。最後再將這些修正的部份加入目前 App 之中並儲存。

另外亦可載入外部的 JavaScript 檔案並進行測試。現有多樣執行方式供開發者使用，例如 1.) 僅執行程式碼；2.) 執行程式碼並檢測回傳的物件；3.) 執行程式碼之後，在程式碼速記本中以註解的形式輸出結果。下列短片將簡單呈現程式碼速記本的數項功能。另請注意，程式碼速記本的指令碼，將如同載入至網頁中的指令碼一樣，於相同的環境 (Context) 中執行。短片中的範例將透過 jQuery 函式庫與某些自訂指令碼，進而展示此特色。

若要進一步了解程式碼速記本的相關資訊，可參閱 MDN 上有關除錯器 (Debugger) 的說明文章。

如果你並不熟悉 JavaScript，建議可先參閱 本篇 MDN 說明文章，內含完整的資源列表與相關機制。

深入了解

這些短片將概略介紹此二項工具的主要功能。若要進一步了解所有開發者工具，可參閱 MDN 上的完整說明文章。

緊接著系列之三

系列的下一篇文章將說明行動設計功能，如透過應用程式管理員 (App Manager) 使用的適應性設計檢視 (Responsive Design View) 模式，以及遠端除錯 (Remote debugging) 功能。若你還有其他想深入了解的功能，都可以在下方意見欄中寫下你的需要。我們將參酌大家的意見而繼續豐富相關內容。

原文連結：Reintroducing the Firefox Developer Tools, part 2: the Scratchpad and the Style Editor