在主控台執行 JavaScript

你可以在 主控台輸入任何 JavaScript 表達式、語句或程式碼片段，輸入時它會立即且互動地執行。 這是因為 DevTools 中的 Console 工具是一個 REPL) 環境 (讀取-評估-列印迴圈 。

主機：

1. 它會讀取你輸入的 JavaScript。
2. 評估你的程式碼。
3. 列印出你表達式的結果。
4. 回到第一步。

要在 主控台中互動式輸入 JavaScript 語句與表達式：

1. 在網頁中右鍵點擊，然後選擇 檢查。 DevTools 開啟。 或者，在 Windows、Linux () 按 Ctrl+Shift+J ，或在 macOS) 按 Command+Option+J ，直接開啟 DevTools 主 (。

2. 如果需要，點 DevTools 讓它聚焦，然後按 Esc 開啟 主控台。

3. 在 控制台點選，然後輸入 2+2，不要按 Enter。

   當你輸入時， 控制台會 立即在下一行顯示結果 4 。 這個 Eager evaluation 功能幫助你撰寫有效的 JavaScript。 無論你的 JavaScript 是否正確，或是否存在有效的結果， 主控台 都會顯示結果。

   

4. 當你按下 Enter 鍵時， 主控台 會執行 JavaScript 指令 (表達式或語句) ，顯示結果，然後將游標往下移，讓你能輸入下一個 JavaScript 指令。

   

用自動補全來撰寫複雜表達式

控制台 幫助你 使用自動完成來撰寫複雜的 JavaScript。 這個功能是學習你之前不認識的 JavaScript 方法的好方法。

在撰寫多部分表達式時嘗試自動補全：

1. 輸入 doc。

2. 按下方向鍵在下拉選單中選取 document 。

3. 按 Tab 鍵選擇 document。

4. 輸入 .bo。

5. 按 Tab 鍵選擇 document.body。

6. 輸入另一個 . ，即可在當前網頁正文中獲得大量可能的屬性與方法清單。

   

主機歷史

和許多其他命令列環境一樣，輸入的指令歷史紀錄可供重複使用。 按下 上箭頭 即可顯示你之前輸入的指令。

同樣地，自動完成會保留你之前輸入的指令歷史紀錄。 你可以輸入先前指令的前幾個字母，之前的選項會顯示在文字框中。

此外， 主機 還提供了許多實用工具，讓你的生活更輕鬆。 例如，總是 $_ 包含你在 控制台中執行的最後一個運算式的結果。 請參閱 主控台工具工具功能與選擇器。

多行剪輯

預設情況下， 控制台 只會給你一行程式碼來寫 JavaScript 表達式。 你按 Enter 鍵時會執行程式碼。 要繞過一行限制，請按 Shift+Enter 代替 Enter。

以下範例中，顯示的值是所有 () 順序執行的語句行數的結果：

如果你在 主控台中開始多行語句，該程式碼區塊會自動被識別並縮排。 例如，如果你開始一個區塊語句，輸入大括號，下一行會自動縮排：

允許貼上到控制台

當你第一次嘗試把內容貼到 控制台 工具時，不是直接貼上，而是會跳出訊息：「警告：請不要把你不懂或沒自己審查過的程式碼貼上到開發工具主控台。 這可能讓攻擊者竊取你的身份或控制你的電腦。 請在下方輸入『允許貼上』，然後按 Enter 鍵允許貼上。」

此警告有助於防止終端使用者遭受自我跨站腳本攻擊 (自我XSS) 。 要貼上程式碼，先在主控台輸入「允許貼上」，然後按 Enter 鍵。 然後貼上內容。 或者，從下面的旗幟開始 Edge 吧。

貼上到 來源 工具的片段編輯器中也是類似操作;請參見「 允許貼入片段編輯器 」中的「 在任何網頁執行 JavaScript 片段」。

透過命令列旗標啟動 Edge 來停用自我 XSS 警告

為防止上述警告並立即允許貼上至 主控台 工具及 來源 工具的摘要編輯器，例如用於自動測試，請從命令列啟動 Microsoft Edge，並使用以下標誌： --unsafely-disable-devtools-self-xss-warnings。 此旗標適用於 Microsoft Edge 的單一會話。

例如，在 Windows 上：

邊緣穩定：

"C:\Users\localAccount\AppData\Local\Microsoft\Edge\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge 測試版：

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Beta\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge 開發者：

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Dev\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

邊緣金絲雀：

"C:\Users\localAccount\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

使用頂層網路請求等待 ()

除了在自己的腳本裡， Console 支援 頂層 wait 來執行任意非同步 JavaScript。 例如，使用 fetch API 時不用非同步函式包裝語 await 句。

要取得最近在 Microsoft Edge 開發者工具 for Visual Studio Code GitHub 倉庫提交的 50 期：

1. 在 DevTools 裡，打開 主控台。

2. 複製並貼上以下程式碼片段，即可取得包含 10 個條目的物件：

   await ( await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json();
   

   

   這10個條目很難辨認，因為裡面顯示了很多資訊。

3. 可選擇使用 console.table() 日誌方法，只接收你感興趣的資訊：

   

   若要重用從表達式回傳的資料，請使用copy()主控台的實用性方法。

4. 貼上以下程式碼。 它會傳送請求並將回應中的資料複製到剪貼簿：

   copy(await (await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json())
   

主控台是練習 JavaScript 和快速計算的好方法。 真正的威力在於你能存取 視窗 物件。 請參見 「使用控制台與 DOM 互動」。

另請參閱

• 用控制台與 DOM 互動
• 主控台工具工具功能與選擇器

GitHub：

• ECMAScript 提案：頂層 await
• Microsoft Edge 開發者工具 for Visual Studio Code

MDN：

• 窗戶 物件。

維基百科：

• REPL (讀取–評估–列印迴圈)