From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/tools/scratchpad/index.html | 109 ++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 files/zh-tw/tools/scratchpad/index.html (limited to 'files/zh-tw/tools/scratchpad') diff --git a/files/zh-tw/tools/scratchpad/index.html b/files/zh-tw/tools/scratchpad/index.html new file mode 100644 index 0000000000..880b0c13ee --- /dev/null +++ b/files/zh-tw/tools/scratchpad/index.html @@ -0,0 +1,109 @@ +--- +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 。你會看到自動補全的視窗盒，如下圖：

+ +

提示左邊的每個圖標為目前提示的類型，目前高亮的提示會自動彈出更多資訊。使用↑和↓來循環高亮的提示，並使用Enter或Tab 來選擇目前高亮的提示。

+ +

內嵌說明

+ +

如果想看到內嵌說明視窗，可以在將滑鼠指標(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") }}

-- cgit v1.2.3-54-g00ecf