--- title: 程式碼速記本 slug: Tools/Scratchpad translation_of: Archive/Tools/Scratchpad ---

程式碼速記本(Scratchpad)提供使用 JavaScript 程式碼實驗的環境。您可以編寫,運行和檢查的程式碼與網頁互動的結果。

不同於網頁主控台,這是專為在同一時間解釋的一行程式碼,便簽讓您編輯較大的 JavaScript 程式碼塊,然後根據您希望如何使用輸出以各種方式執行。

{{EmbedYouTube("Pt7DZACyClM")}}

用法

打開程式碼速記本

要打開「程式碼速記本」窗口的話有很多辦法:

這將打開一個程式碼速記本窗口。

在工具箱開啟程式碼速記本

Firefox 47 引入。

From Firefox 47, you can open Scratchpad inside the Toolbox. First you need to check "Scratchpad" in the "Default Firefox Developer Tools" section of the Settings page.

Now Scratchpad will be available in the Toolbox, alongside other tools like the Page Inspector and the Web Console. This is especially useful in split Console mode: you can use Scratchpad for a persistent, multiline editor, and the Console to interact with the page.

編輯

程式碼速記本窗口看起來像這樣(在 macOS 選單列在螢幕的頂部):

便簽本的屏幕截圖

檔案選單提供選項來儲存和載入JavaScript程式碼片段,因此,如果你喜歡,你可以在以後重用程式碼。

程式碼補全

程式碼速記本整合了ternjs ( javascript程式碼分析引擎 ),並使用該提供自動補全提示與包含在當前的符號資訊的視窗。要列出自動補全提示,按 Ctrl+Space

例如,嘗試輸入d,然後按 Ctrl+Space 。你會看到自動補全的視窗盒,如下圖:

提示左邊的每個圖標為目前提示的類型,目前高亮的提示會自動彈出更多資訊。使用來循環高亮的提示,並使用EnterTab 來選擇目前高亮的提示。

內嵌說明

如果想看到內嵌說明視窗,可以在將滑鼠指標(cursor)0移到標識符的位置,並按下Ctrl + Shift + Space。例如:如果你先輸入document.addEventListener,然後再按下Ctrl + Shift + Space,你將會看到一個彈出視窗,顯示該函數的語法和使用說明。

在彈出視窗中的「[文件]」連結,點擊後,可直接連結到MDN對應符號的說明文件網頁。

執行

一旦你寫完你的代碼,選擇要運行的程式碼。如果不選擇任何內容,視窗中的所有程式碼將被執行。然後透過「執行」選單或右鍵選單,來選擇你想要的執行方式。程式碼在當前的分頁中執行。任何宣告在函式(function)之外的變數將被加入到當前分頁的全域物件。

選單中有四個執行選項可以選擇

執行

當你選取「執行」選項時, 被選取的程式碼將會被執行. 你會將此選項用於執行一個函式或一段操作頁面內容的程式碼,而不需要看到執行後的輸出。

檢測

「檢測」選項執行程式碼的方法就像執行選項; 然而,程式碼返回後,object inspector會打開讓你檢查返回值。

例如,如果你輸入代碼:

window

然後選擇「檢測」,object Inspector 看起來是這樣的:

在便簽中檢查對象

顯示

「顯示」選項執行所選取的程式碼,然後直接將結果插入到你的程式碼速記本編輯器視窗中,作為一個註解,所以你可以使用它作為一個REPL

重新載入並執行

重新載入和執行選項僅在執行選單中。它首先重新載入頁面,然後執行該程式碼時,頁面上的「load」事件觸發。這適用於在剛開始的環境來執行程式碼。

在瀏覽器環境中執行程式碼速記本

你可以在瀏覽器環境運行程式碼速記本,而不是在特定網頁的環境中。如果您正在使用火狐本身或開發附加元件,這非常有用。要做到這一點,要勾選「啟用瀏覽器chrome與附加元件除錯工具箱」設定在開發者工具設置中。完成勾選後,執行程式碼速記本中,「環境」選單會有「瀏覽器」選項; 選擇「瀏覽器」選項後,你的範圍會是整個瀏覽器,而不僅僅是網頁的內容,此時,你將可以檢測一些全域變數來看:

window
/*
[ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

當程式碼速記本含有下列程式碼在第一行時,程式碼速記本會將執行環境設為整個瀏覽器
// -sp-context: browser

鍵盤快捷鍵

{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "scratchpad") }}

源始碼編輯器的快捷鍵

{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "source-editor") }}