MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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

用法

打開程式碼速記本

要打開「程式碼速記本」窗口,請按 Shift+F4,或到「開發者」選單(這是在macOS和Linux的工具選單的子選單),然後選擇「程式碼速記本」。這將打開一個程式碼速記本窗口,其中包括註釋,提供有關如何使用程式碼速記本一些簡要信息。從那裡,你可以馬上開始編寫一些JavaScript程式碼來試試。

編輯

程式碼速記本窗口看起來像這樣(在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

鍵盤快捷鍵

Command Windows OS X Linux
Open the Scratchpad Shift + F4 Shift + F4 Shift + F4
Run Scratchpad code Ctrl + R Cmd + R Ctrl + R
Run Scratchpad code, display the result in the object inspector Ctrl + I Cmd + I Ctrl + I
Run Scratchpad code, insert the result as a comment Ctrl + L Cmd + L Ctrl + L
Re-evaluate current function Ctrl + E Cmd + E Ctrl + E
Reload the current page, then run Scratchpad code Ctrl + Shift + R Cmd + Shift + R Ctrl + Shift + R
Save the pad Ctrl + S Cmd + S Ctrl + S
Open an existing pad Ctrl + O Cmd + O Ctrl + O
Create a new pad Ctrl + N Cmd + N Ctrl + N
Close Scratchpad Ctrl + W Cmd + W Ctrl + W
Pretty print the code in Scratchpad Ctrl + P Cmd + P Ctrl + P
Show autocomplete suggestions Ctrl + Space Ctrl + Space Ctrl + Space
Show inline documentation Ctrl + Shift + Space Ctrl + Shift + Space Ctrl + Shift + Space

源始碼編輯器的快捷鍵

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.

Command Windows OS X Linux
Go to line Ctrl + J Cmd + J Ctrl + J
Find in file Ctrl + F Cmd + F Ctrl + F
Find again Ctrl + G Cmd + G Ctrl + G
Select all Ctrl + A Cmd + A Ctrl + A
Cut Ctrl + X Cmd + X Ctrl + X
Copy Ctrl + C Cmd + C Ctrl + C
Paste Ctrl + V Cmd + V Ctrl + V
Undo Ctrl + Z Cmd + Z Ctrl + Z
Redo Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Indent Tab Tab Tab
Unindent Shift + Tab Shift + Tab Shift + Tab
Move line(s) up Alt + Up Alt + Up Alt + Up
Move line(s) down Alt + Down Alt + Down Alt + Down
Comment/uncomment line(s) Ctrl + / Cmd + / Ctrl + /

文件標籤與貢獻者

 此頁面的貢獻者: monkey413, iigmir, abcdeffff, tsengchiaoling
 最近更新: monkey413,