blob: 880b0c13ee8b95fb709b158e3c10e00daf3f68fb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: 程式碼速記本
slug: Tools/Scratchpad
translation_of: Archive/Tools/Scratchpad
---
<p>程式碼速記本（Scratchpad）提供使用 JavaScript 程式碼實驗的環境。您可以編寫，運行和檢查的程式碼與網頁互動的結果。</p>
<p>不同於<a href="/zh-TW/Tools/Web_Console">網頁主控台</a>，這是專為在同一時間解釋的一行程式碼，便簽讓您編輯較大的 JavaScript 程式碼塊，然後根據您希望如何使用輸出以各種方式執行。</p>
<p>{{EmbedYouTube("Pt7DZACyClM")}}</p>
<h2 id="用法">用法</h2>
<h3 id="打開程式碼速記本">打開程式碼速記本</h3>
<p>要打開「程式碼速記本」窗口的話有很多辦法：</p>
<ul>
<li>按 <kbd>Shift</kbd> + <kbd>F4</kbd>，或到「開發者」選單（這是在 macOS 和 Linux 的工具選單的子選單），然後選擇「程式碼速記本」。</li>
<li>click the wrench icon (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), which is in the main toolbar or under the Hamburger menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), then select "Scratchpad".</li>
</ul>
<p>這將打開一個程式碼速記本窗口。</p>
<h3 id="在工具箱開啟程式碼速記本">在工具箱開啟程式碼速記本</h3>
<div class="geckoVersionNote">Firefox 47 引入。</div>
<p>From Firefox 47, you can open Scratchpad inside the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>. First you need to check "Scratchpad" in the "Default Firefox Developer Tools" section of the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Settings</a> page.</p>
<p>Now Scratchpad will be available in the Toolbox, alongside other tools like the Page Inspector and the Web Console. This is especially useful in <a href="/en-US/docs/Tools/Web_Console/Split_console">split Console mode</a>: you can use Scratchpad for a persistent, multiline editor, and the Console to interact with the page.</p>
<h3 id="編輯">編輯</h3>
<p>程式碼速記本窗口看起來像這樣（在 macOS 選單列在螢幕的頂部）：</p>
<p><img alt="便簽本的屏幕截圖" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p>
<p>檔案選單提供選項來儲存和載入JavaScript程式碼片段，因此，如果你喜歡，你可以在以後重用程式碼。</p>
<h4 id="程式碼補全">程式碼補全</h4>
<p>程式碼速記本整合了ternjs ( javascript<a href="http://ternjs.net/">程式碼分析引擎</a> )，並使用該提供自動補全提示與包含在當前的符號資訊的視窗。要列出自動補全提示，按 <kbd>Ctrl</kbd>+<kbd>Space</kbd> 。</p>
<p>例如，嘗試輸入<kbd>d</kbd>，然後按 <kbd>Ctrl</kbd>+<kbd>Space</kbd> 。你會看到自動補全的視窗盒，如下圖：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">提示左邊的每個圖標為目前提示的類型，目前高亮的提示會自動彈出更多資訊。使用<kbd>↑</kbd>和<kbd>↓</kbd>來循環高亮的提示，並使用<kbd>Enter</kbd>或<kbd>Tab </kbd>來選擇目前高亮的提示。</p>
<h4 id="內嵌說明">內嵌說明</h4>
<p>如果想看到內嵌說明視窗，可以在將滑鼠指標(cursor)0移到標識符的位置，並按下<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>。例如：如果你先輸入<code>document</code>.<code>addEventListener，然後再按下</code><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>，你將會看到一個彈出視窗，顯示該函數的語法和使用說明。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;">在彈出視窗中的「[文件]」連結，點擊後，可直接連結到MDN對應符號的說明文件網頁。</p>
<h3 id="執行">執行</h3>
<p class="note">一旦你寫完你的代碼，選擇要運行的程式碼。如果不選擇任何內容，視窗中的所有程式碼將被執行。然後透過「執行」選單或右鍵選單，來選擇你想要的執行方式。程式碼在當前的分頁中執行。任何宣告在函式(function)之外的變數將被加入到當前分頁的全域物件。</p>
<h4 id="選單中有四個執行選項可以選擇">選單中有四個執行選項可以選擇</h4>
<h4 id="執行_2">執行</h4>
<p>當你選取「執行」選項時, 被選取的程式碼將會被執行. 你會將此選項用於執行一個函式或一段操作頁面內容的程式碼，而不需要看到執行後的輸出。</p>
<h4 id="檢測">檢測</h4>
<p>「檢測」選項執行程式碼的方法就像執行選項; 然而，程式碼返回後，object inspector會打開讓你檢查返回值。</p>
<p>例如，如果你輸入代碼：</p>
<pre>window
</pre>
<p>然後選擇「檢測」，object Inspector 看起來是這樣的：</p>
<p><img alt="在便簽中檢查對象" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p>
<h4 id="顯示">顯示</h4>
<p>「顯示」選項執行所選取的程式碼，然後直接將結果插入到你的程式碼速記本編輯器視窗中，作為一個註解，所以你可以使用它作為一個<a href="http://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a>。</p>
<h4 id="重新載入並執行">重新載入並執行</h4>
<p>重新載入和執行選項僅在執行選單中。它首先重新載入頁面，然後執行該程式碼時，頁面上的「load」事件觸發。這適用於在剛開始的環境來執行程式碼。</p>
<h2 id="在瀏覽器環境中執行程式碼速記本">在瀏覽器環境中執行程式碼速記本</h2>
<p>你可以在瀏覽器環境運行程式碼速記本，而不是在特定網頁的環境中。如果您正在使用火狐本身或開發附加元件，這非常有用。要做到這一點，要勾選「啟用瀏覽器chrome與附加元件除錯工具箱」設定在<a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">開發者工具設置</a>中。完成勾選後，執行程式碼速記本中，「環境」選單會有「瀏覽器」選項； 選擇「瀏覽器」選項後，你的範圍會是整個瀏覽器，而不僅僅是網頁的內容，此時，你將可以檢測一些全域變數來看：</p>
<pre class="brush: js">window
/*
[ChromeWindow]
*/
gBrowser
/*
[object XULElement]
*/</pre>
<p>當程式碼速記本含有下列程式碼在第一行時，程式碼速記本會將執行環境設為整個瀏覽器<code>：</code><br>
<code>// -sp-context: browser</code></p>
<h2 id="鍵盤快捷鍵">鍵盤快捷鍵</h2>
<p>{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p>
<h3 id="源始碼編輯器的快捷鍵">源始碼編輯器的快捷鍵</h3>
<p>{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
|
