VS Code 調試徹底攻略（3）：編輯變量並從新執行函數

做者：Charles Szilagyi

翻譯：瘋狂的技術宅

原文：https://charlesagile.com/debu...

未經容許嚴禁轉載

能夠經過在調試器中從新執行代碼塊，來查看它們在不一樣狀況下的行爲。在調用棧中修改變量並從新執行函數可讓你節省大量的時間！

VS Code 調試徹底攻略系列目錄

1. 基礎知識
2. 步進逐行調試
3. 編輯變量並從新執行函數
4. launch.json 和調試控制檯
5. 基於瀏覽器的 React 應用
6. 調試用 TypeScript 開發並打包的 React 📦

在前面的文章中，咱們已經研究瞭如何開始調試簡單的服務器以及能夠步進逐行調試代碼。今天，咱們將介紹兩個重要的功能。第一個是怎樣編輯變量，第二個是從新執行函數——確切地說是從新啓動調用棧框架而無需從新啓動調試器或程序。

雖然這些功能不是很直觀，可是很是強大，能夠幫你節省大量時間。你能夠把不一樣的輸入傳給埋藏在調用棧深處的函數，而不用在從新啓動程序時漫長而乏味的等待。

讓咱們看看如何在前文的微型服務器代碼中使用這兩種調試方式。

準備工做

請將下面的代碼複製粘貼到一個空文件中：

const http = require('http');
const url = require('url');

const hostname = '127.0.0.1';
const port = 3456;
const serverUrl = `http://${hostname}:${port}`

const getNameFromReq = (req) => {
  const {name} = url.parse(req.url, true).query;

  return name
}

const getGreeting = (name) => {
  const greeting = `Hello, ${name}!`

  return greeting
}

const server = http.createServer((req, res) => {
  const name = getNameFromReq(req)
  const greeting = getGreeting(name)

  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(`${greeting}\n`);
});

server.listen(port, hostname, () => {
  console.log(`Server running at ${serverUrl}`);
});

Hello, undefined!

咱們的玩具服務器的請求中始終存在一個名爲 name 的查詢參數。若是沒有參數，響應將會變爲 「Hello, undefined!」：

> curl http://127.0.0.1:3456
Hello, undefined!

讓咱們經過調試器看看 getGreeting 函數在不一樣 name 參數下的表現如何。顯然修復這個問題很簡單，可是讓咱們來看看在調試器能夠作些什麼。 🤓

在第 15 行上放置一個斷點，而後在沒有查詢參數 name 的狀況下訪問服務器（例如，curl http://127.0.0.1:3456）。

你應該看到調試器啓動後停在第 15行。

若是你不肯定如何執行此操做，請參閱本系列的第 1 部分，基本知識

確保調試側欄中的 「Variables」 和 「Call stack」 部分都已經被打開。如今咱們重點關注未定義的局部變量 name：

而後跳過下一行（F10）並觀察 getGreeting 的返回值：

若是你須要快速瞭解step over、step into 和 step out，請閱讀本系列的第 2 部分：步進逐行調試

好了，這一點也不不奇怪：若是 name 是 undefined，則問候語將會顯示 Hello，undefined！。

從新執行函數

讓咱們從新運行此這個，此次使用不一樣的 name 值。咱們不須要去觸發另外一個請求——能夠從新啓動最後一個棧幀：

咱們又回到了 getGreeting 函數的開頭👌

如今嘗試一下若是 name 爲 null 會怎樣？咱們能夠編輯局部變量來測試：

能夠嘗試設置一個字符串值——注意把值在在引號中：

你能夠覆蓋在 closure 中本地或定義的任何內容，包括如下函數：

請記住：重寫函數後，你必須從新啓動處理流程才能返回到原始實現。

就是這樣：你如今能夠在調試器中從新啓動函數，並編輯本地和閉包值，包括字符串和函數。爲何不試試看，若是從新啓動棧中的高階函數會發生什麼？

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...