整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：陳亦濤來源：大轉轉FE
這篇文章將介紹如何使用斷點來進行 JavaScript 調試。在讀這篇文章之前，需要問一個問題：為什么要使用斷點來進行調試?
我們首先需要認可使用斷點的是必要的，否則下文介紹的所有斷點調試方法都會是廢話。console.log 是前端開發最常用的調試手段，它簡單直接解決一部分問題。但當遇到十分復雜的問題，console.log 就會變得不趁手。比如：
如果你刷過 leetcode 一定深有體會，算法某個測試用例報錯了，有時很難光靠目測找出有問題的那個方法。
花了10分鐘好不容易復現了，但是只跟蹤到某行代碼，需要第二次添加 log 才能繼續尋找問題。查看log -> 添加log -> 查看log... 這個過程重復幾遍，今天剩下的磚就搬不完了。
有 nodejs 服務端開發經驗的同學相信有過在 postman 和 ide 之間反復橫跳的經歷，如果光靠 log，對于一個巨大的復雜對象，控制臺是不好查看全貌的。如果一個接口還涉及到數據庫增刪、第三方依賴，那么復原上一次請求造成的后果也是一件痛苦的事情。
在這些情況下，斷點調試是非常有價值的，將 debug 的時間復雜度從 O(n) 降到 O(1)，讓搬磚更快樂。
這是文章的內容大綱：
最簡單的斷點調試，就是在代碼中加一句 debugger，然后到瀏覽器中刷新頁面，這時候瀏覽器就會在 debugger 語句那停止執行。
為了方便理解，引入一個簡單例子，在一個文件夾中創建 index.html 和 index.js，然后在 index.html 中引入 index.js。index.js 內容如下：
// 國際慣例，hello world。
const greet = () => {
const greeting = "hello debugger";
// 瀏覽器執行到這里將會暫停
debugger
console.log(greeting);
};
greet();
console.log("js evaluation done");執行命令：
npm i -g serve
serve .然后訪問 http://localhost:5000并打開開發者工具。
這時候我們的 hello world 斷點就打上了，就像這樣：
圖中分為四個區域，藍色區域用于文件選擇，Page 一欄是指當前頁面中的 JS 文件，Filesystem 會顯示我們系統中的文件。通常我們使用 Page。
粉色是代碼的行號和內容。代碼的行號處可以通過點擊來添加新的斷點，再次點擊后取消。
黃色區域用于控制代碼的執行，只需要掌握前四個按鈕的含義，就可以應付絕大多數場景。按鈕1是讓代碼繼續執行(resume)，如果遇到下一個斷點就會再次中斷執行。按鈕2可以讓瀏覽器執行當前行(圖中是第3行)，然后在下一行中斷代碼，按鈕3是進入當前函數，查看函數具體內容。假設我們當前停在第7行 greet() ，點擊按鈕3就會進入 greet 方法中(也就是第2行)。如果不想再看 greet 方法了，就點擊按鈕4，跳出這個方法，回到第8行。
綠色區域可以查看變量的內容和當前的調用棧。
debugger 是最簡單粗暴的打斷點方式，但是需要修改我們的代碼。需要注意的是，上線前必須刪除這些語句。也可以通過配置 webpack 來自動去除。不過終究還是有些不方便，所以我們來看下如何通過 vscode 來簡化打斷點的方式。
首先我們使用 Vite 來創建一個 Vue 應用用于演示(React步驟類似)。
# 創建 vut-ts 應用
npm init vite
cd hello-vite
npm install
# 調用 VS Code cli 打開項目，
# 或者手動在 VS Code 打開。
code .
npm run dev然后在 VS Code 中新建一個文件 .vscode/launch.json，填入這些內容：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Vue project",
// 這里填入項目的訪問地址
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
]
}然后使用 cmd+q 退出你正在運行的 Chrome(這步很重要，不能跳過)，按 f5 啟動 VS Code 的調試功能。VS Code 就會幫你啟動一個 Chrome 窗口，并訪問上述配置的中的 url。這時候我們的斷點就生效了，可以一步一步地控制代碼的運行，找出 bug 來源。
這里有一個實用的小技巧，就是在 BREAKPOINTS 中，把 Uncaught Exceptions 勾上，這樣在代碼報錯的地方，就會自動中斷執行。當我們遇到一個報錯時，采用這個方法可以省去定位問題代碼的時間。
另外我們可以發現，在 VS Code 斷點生效時，Chrome Devtools 也會同步這個展示這個斷點。
在 VS Code 中，調試有兩種模式，分別是 launch 和 attach。由于真正執行代碼的是 Chrome 中的 JS 引擎，所以是否中斷代碼的控制權是在 Chrome 手里的。那為什么 VS Code 的斷點可以控制代碼的中斷呢?是因為 VS Code 通過 devtools-protocol 向 Chrome 發起指令，告訴 Chrome 需要在哪一行代碼暫停執行。這個發送指令的過程，被稱作 attach。而 launch 的過程包含 attach ，即先 launch(啟動) 瀏覽器，然后 attach(附加) 斷點信息。所以 attach 模式是 launch 模式的子集。
聽起來好像 launch 模式會更方便，為我們省去了手動啟動瀏覽器的過程。但是這存在一個問題，如果同時開發多個前端工程會怎樣?每個工程啟動一個調試進程，就會打開多個瀏覽器，那么在多個瀏覽器之間切換就會顯得很麻煩。我們可以使用 attach 模式解決這個問題。
首先我們使用命令行啟動 Chrome。使用命令行的原因是，我們需要給 Chrome 的啟動傳參。
# 運行這條命令前需要cmd+q退出已運行的Chrome
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# 如果看到這個輸出，說明傳參成功。
DevTools listening on ws://127.0.0.1:9222/devtools/browser/856a3533-ca5c-474f-a0cf-88b7ae94c75bVS Code 和 Chrome 是通過 websocket 交流，--remote-debugging-port 指定了 websocket 使用的端口。然后我們將 launch.json 文件修改成這樣：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "attach",
"name": "Vue Application",
// 項目訪問的 url
"url": "http://localhost:3000",
// websocket 端口，需要與 --remote-debugging-port 參數保持一致。
"port": 9222,
"webRoot": "${workspaceFolder}"
},
]
}注意在啟動 VS Code 調試之前，需要在 Chrome 中打開 http://localhost:3000 這個頁面。然后我們在 VS Code 中打上斷點，刷新瀏覽器，代碼就成功停在斷點處了。第二個、第n個工程都可以采用相同的配置，區別是 url 字段要根據項目配置進行修改。
上文講的是如何調試頁面，接下來我們聊如何調試 nodejs 應用。首先來一個最容易上手的例子，創建一個 hello world：
// debug.js 文件
const greeting = 'hello nodejs debugger'
debugger
console.log(greeting)然后運行這個文件
node --inspect-brk debug.js
Debugger listening on ws://127.0.0.1:9229/b9a6d6bf-baaa-4ad5-8cc6-01eb69e99f0a
For help, see: https://nodejs.org/en/docs/inspector--inspect-brk 表示運行這個 js 文件的同時，在文件的第一行打上斷點。然后打開 Chrome，進入 Devtools。點擊紅框處的按鈕，就會打開一個 nodejs 專用的調試窗口，并且代碼在第一行中斷了。
nodejs 調試窗口：
這個方式的實質是，Chrome Devtool 根據 v8引擎的調試協議 向 nodejs 進程發送指令，控制代碼的運行。可以發現，在網頁的調試中，Chrome 是接受指令的一方，而在 nodejs 調試中，Chrome 轉身變為發送指令的一方。所謂從悲慘的乙方華麗轉身成甲方。
node 默認的 websocket 端口是 9229，如果有需要的話(比如端口被占用了)，我們可以通過一些方式改變這個端口。
node --inspect=9228 debug.js
Debugger listening on ws://127.0.0.1:9228/30f21d45-9806-47b8-8a0b-5fb97cf8bb87
For help, see: https://nodejs.org/en/docs/inspector在我們打開 Devtool 時，Chrome 默認檢查 9229 端口，但當我們改變了端口號后，就需要手動去指定 Chrome 檢查的地址了。點擊下圖中的 Configure 按鈕，輸入 127.0.0.1:9228，然后點擊 Done。這時候 Remote Target 中就會出現 剛才啟動的 node 進程，點擊 inspect 就可以進入調試了。
到此為止，我們已經達成調試 node 的目的，但還有些繁瑣，不夠自動化。我們可以使用 VS Code，來一鍵啟動調試。
用 VS Code 打開剛才的工程，然后在 launch.json 中輸入這些：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
// ${file} 的意思是，當我們啟動調試的時候，調試的程序就是當前 focus 的文件。
"program": "${file}"
}
]
}這時候切換到 index.js 文件，按 f5 啟動調試程序，當運行到第二行 debugger 語句的時候，就會自動暫停執行。也可以點擊代碼行數的左側來打斷點。
另外，這個配置是支持 TypeScript 的，我們只需要 index.js 重命名為 index.ts，然后正常啟動調試就行。
在某些情況下，我們不希望打上的每個斷點都發揮作用，而是在執行到斷點那行，且滿足某個條件再中斷代碼執行。這就是條件斷點。
for (let i = 0; i < 10; i++) {
console.log("i", i);
}比如上面的代碼，假設我們在第二行 console.log 打了斷點，那么這個斷點總計會中斷十次。這往往是我們不希望看到的，可能我們需要的僅僅是其中某一次循環而非所有。這時候可以右鍵點擊并選擇 Add Conditional Breakpoint。
這時會有一個輸入框出現，我們在其中輸入 i === 5。
這時候啟動調試，就會跳過 i 為 0 - 4，直接在在 i 為 5 的時候中斷代碼執行。恢復代碼執行后，會略過 i 為 6 - 9 的情況。
Conditional Breakpoint 在調試帶有大量循環和 if else 判斷時極為有用，特別是當某處的邏輯整體上是符合預期的，僅有個別特殊情況的輸出錯誤，使用條件斷點就可以略過這些正常的情況，只在個別特殊情況出現的時候，再中斷執行，供我們查看各個變量是否計算正常。
調試是日常工作中非常重要的能力，因為除了開發新功能外，日常有很大一部分都在調整舊的代碼，處理特別條件下的邏輯錯誤。熟練掌握調試可以很好地提升搬磚幸福感，一個復雜的 bug 卡幾小時，很容易讓人心里崩潰。但也不是說斷點調試是任何情況下都適用的銀彈，簡單的邏輯還是可以愉快地 console.log 的。
文章介紹了使用 Chrome Devtools 和 VS Code 斷點調試的方法，整體上還是更推薦使用 VS Code。launch.json 只需要一次配置，后續都可以 f5 一鍵啟動調試。另外，文中提到的各種 launch.json 文件的配置，都可以使用 VS Code 自帶的工具一鍵生成。只要打開 launch.json，編輯器的右下角就會出現 Add Configuration 按鈕，點擊就可以選擇自己需要添加的調試配置。
試能力是一個程序員的生存根本，可是很多初學者卻忽視調試。今天我們就來討究一下JS的調試技巧。
本文章將會詳細列舉JS相關的各種實用調試技巧。如果您是JS的初學者，那么這篇文章將對您有很大的幫助。
程序就是函數堆砌起來的，程序的運行就是函數的執行過程。而通過JS調試，我們可以更為直觀的追蹤到在程序運行中，函數的執行順序，以及各個參數的變化。這樣我們就可以快速的定位到問題所在。
1. 什么是JS調試？
在程序運行中，我們總會遇到各種bug，而通過代碼的追蹤代碼的運行順序從而定位到問題的過程就叫做JS調試。
首先我們需要知道如何進入調試的界面，此處我們以谷歌為例，通過F12和右鍵檢查，找到Sources就可以進入調試界面。具體界面顯示如下：
紅框所標示的就是我們調試常用的按鍵。下面我們會在實際應用場景中詳細講述每一個按鍵的作用。
2． 單步調試
首先是普通調試，又叫單步調試。F12找到Sources后，在左側文件夾中找到你想運行的文件，然后點擊pause script execution按鈕再刷新頁面（F5），就可以進入單步調試
點擊Step over next function call就是程序逐步調試，每點擊一次，就會按照代碼執行順序，向下執行一句代碼。
3． 函數調試
如果親手嘗試過單步調試的小伙伴就會發現，單步調試其實并不能滿足我們找bug的需求，因為單步調試是不能進入函數體內，我們也就不能跟蹤函數體內變量的變化。
所以我們接下來就來學習下第三個按鈕，step into next function call按鈕
使用Step into按鈕，我們就可以進入函數體內，在單步調試過程中，當經過函數調用時，點擊Step into就可以進入該函數體內。
進入函數體內之后，繼續點擊Step over按鈕，就可以進行函數體內的單步調試。如圖所示，函數體內的變量變化就一目了然了。
但是在我們已經追蹤到想要的變量變化時，函數體內的內容又很多，單步調試到函數結束就很浪費時間。這里就可以使用我們今天學習的第四個按鈕，step out of current function call跳出當前函數體，跳出到之前進入函數體的代碼位置。
4． 斷點調試
在實際項目代碼量是很大的，使用單步調試就過于的浪費時間。而且有時我們是想要定位某一處的代碼是否有錯，所以就沒有必要調試所有的代碼。所以我們就可以使用斷點調試，那么什么是斷點調試呢？
首先，在想要定位問題的代碼處，打斷點，也就是代碼停止執行的位置。如圖所示點擊紅框處打該行的斷點。（由于谷歌版本的不同，斷點圖標略有不同）
然后刷新頁面（F5），就可以進入斷點調試頁面。點擊Resume script execution按鈕就可以調到下一個斷點。（注意：當調到斷點處時，此行代碼為藍色背景，表示此行代碼即將執行但并未執行）
5． 事件調試
首先我們要來明確一個概念，就是同步與異步，當代碼執行時，自上而下運行的為同步代碼，而異步代碼其中一類就是需要事件來觸發。所以在代碼調試中，事件體內的函數，需要在打斷點后，通過該事件的行為，才能進入函數體。
如以下代碼：打斷點后在刷新，其實沒有效果
必須動過事件才能觸發調試
讀：在應用開發過程中，或者開發完成后，若出現執行結果不符合我們的預期時，通常需要進行一定的調試工作。但是在 Serverless 架構下，調試工作往往會受到一些環境因素限制，如所開發的應用在本地是比較健康的、且符合預期的運行，但是在 FaaS 平臺上，出現了一些問題；或者是在某些特殊的環境下，本地沒有辦法模擬線上環境，難以進行項目的開發和調試怎么辦？
本文將借助 Serverless Devs 工具，對函數計算 (FC）應用的斷點調試步驟進行詳細指導，手把手帶你實現 Serverless 的斷點調試，并從以下四個方面為你厘清“硬核調試”的脈絡步驟，干貨滿滿：
一、概述部分介紹了調試能力的重要性，以及當前阿里云函數計算（FC）所能提供的調試能力；
二、調試之旅羅列了關于 “使用 Serverless Devs 在不同 IDE 中進行斷點調試” 的詳細步驟；
三、總結部分客觀訴說斷點調試的待改進之處；
四、附錄則為各位開發者匯總了斷點調試操作的詳細動圖。
在 Serverless 應用架構下，調試能力往往是應用開發者所十分關注的問題，它決定著程序的開發效率。Hackernoon 在關于 Serverless（無服務器）的業界調研報告指出：迄今為止，Debugging（調試）仍舊是 Serverless 落地最大的痛點與挑戰。
報告《Top 5 Serverless Trends》：https://hackernoon.com/top-5-serverless-trends-in-2020-wd1m3t8g
調試能力主要包含兩種，一是運行程序的能力；二是斷點調試能力。前者是調試的基礎能力，可以判幫助開發者判斷程序能否正常運行，驗證程序運行結果的正確性；后者是調試的高級能力，能夠幫助用戶方便定位到導致程序運行出錯或者不符合預期的位置。
目前業界已有的 Serverless 應用調試手段，主要是在本地模擬云端執行環境進行本地調試；或者將應用部署到云端運行后基于日志進行調試。然而，本地調試無法模擬云端的網絡環境，云端調試又缺乏本地的靈活性。為了能夠克服這些缺陷，將 Serverless 應用調試做到開箱即用，阿里云函數計算團隊經過一番探索，開發出了一套業界創新的調試工具，全方位提供本地調試以及端云聯調能力。
https://github.com/devsapp/fc/blob/main/docs/zh/command/proxied.md
本文所提到的本地調試工具，均提供斷點調試能力，且與 Serverless 應用程序開發規范完全兼容，下面我們一起看一下關于斷點調試的具體操作步驟。
斷點調試步驟總結為如下流程，下面我將帶領各位圍繞這四個步驟，開啟一場斷點調試之旅：
1、前置操作
在開始進行調試之前，需要進行一些前置操作，本文將前置操作分為通用前置操作以及端云聯調附加的前置操作：
https://help.aliyun.com/document_detail/195474.html；
熟悉新一代函數計算工具鏈的使用方式，可參考：https://github.com/devsapp/fc；
2、參數引入
完成以上前置條件的準備后，我們先了解一下調試指令中與斷點調試所相關的具體參數：
-c, --config [vscode/pycharm/intellij] [Required] Select which IDE to use when
debugging and output related debug
config tips for the IDE. value:
vscode/pycharm/intellij
-d, --debug-port number [Required] Specify the local function
container starting in debug mode, and
exposing this port on localhost
--debug-args string [Optional] Additional parameters that
will be passed to the debugger
--debugger-path string [Optional] The path of the debugger on
the host
--tmp-dir string [Optional] The temp directory mounted to
'/tmp' , default:
'./.s/tmp/invoke/serviceName/functionName/'
使用斷點調試時，--config 參數以及 --debug-port 參數是必要的：
另外，其余三種參數是可選的：
3、實操演練
1）VSCode
使用 VSCode 進行斷點調試時，流程十分簡單，下面我們將斷點調試場景分為 Event 函數調試和 Http 函數調試兩種，分別進行介紹。
step1：首先啟動 Serverless 應用，打開終端，進入目標項目下，輸入啟動指令:
# 本地調試
$ s local invoke --config vscode --debug-port 3000
# 端云聯調
$ s proxied setup --config vscode --debug-port 3000
啟動指令執行后，本地的函數計算執行環境會有一定阻塞，我們需要等待調用；與此同時當前項目會生成 .vscode/launch.json 文件，該文件是基于 VSCode 進行調試的配置文件，若該文件已經存在，那么啟動指令會打印相應配置文本，如下圖所示，需要利用這部分內容覆蓋已有 .vscode/launch.json 中的內容。
.vscode/launch.json 更新內容示例
step2：啟動斷點調試器，打開 VSCode 界面，然后打開 s.yml 中 codeUri 所存放的源代碼，為其打上斷點，接著點擊開始調試按鈕，具體執行如下圖所示。
VSCode 啟動調試器示意圖
對于本地調試而言，啟動調試器后，程序便已經啟動，此時就可以開始進行我們的斷點調試工作了。如果是端云聯調的話，啟動調試器后，在啟動指令終端頁面，會出現 "Debugger attached." 字段，這時說明調試器也已啟動成功，正在等待被調用，接下來我們繼續進行如下步驟即可。
step3：開始斷點調試：打開一個新的終端頁面，輸入調用指令 s proxied invoke --event "hello"后，程序啟動，斷點調試開始。
step4：結束斷點調試：調試結束后，主動關閉斷點調試器。端云聯調場景下，會創建一系列輔助函數資源，因此調試完成后，這里需要進行輔助資源釋放，防止額外的費用產生，只需執行 s proxied cleanup 即可釋放輔助資源。
php7.2 runtime 的本地調試 IDE 建議使用 VSCode，其斷點調試步驟與其他語言有一定差異性，因此單獨進行介紹。目前 php7.2 runtime 不支持端云聯調斷點調試。
step1：首先啟動 Serverless 應用，打開終端，進入目標項目下，輸入啟動指令 s local invoke --config vscode --debug-port 3000。
與之前不同的是，Event 函數啟動指令執行完成后，并不會出現阻塞的情況，而是會直接執行成功，同時在當前項目下會生成 .vscode/launch.json 文件，如前文所述。
step2：啟動斷點調試器，打開 VSCode 界面，然后打開 s.yml 中 codeUri 所存放的源代碼，為其打上斷點，接著點擊開始調試按鈕，具體執行如下圖所示。
step3：開始斷點調試：打開一個新的終端頁面，再次輸入啟動指令 s local invoke --config vscode --debug-port 3000后，程序啟動，斷點調試開始。
step4：結束斷點調試：調試結束后，主動關閉斷點調試器。
端云聯調中對 Http 函數的調試方式實際上與 Event 函數相同，因此不再贅述，本節我們主要介紹下本地調試關于 Http 函數應該如何進行調試。
step1：啟動 Serverless 應用，首先，打開終端，進入目標項目下，輸入啟動指令 s local start --config vscode --debug-port 3000，啟動指令執行后，本地的函數計算執行環境會阻塞等待調用，并打印訪問 http 函數的 url 字段。
step2：啟動斷點調試器：打開 VSCode 界面，然后打開 s.yml 中 codeUri 存放的源代碼，為其打上斷點，接著點擊開始調試按鈕，如圖所示。此時在啟動指令終端頁面，會出現 "Debugger attached." 字段，說明調試器啟動成功，等待被調用。
VSCode 啟動調試器示意圖
step3：開始斷點調試：可以通過 curl 指令、瀏覽器等方式訪問 Http 函數的 URL，此時程序啟動，斷點調試開始。
step4：結束斷點調試：調試完成后，主動關閉斷點調試器，然后在啟動指令終端頁面，執行 Ctrl+C 即可退出調試進程。
php7.2 runtime 的本地調試 IDE 建議使用 VSCode，其斷點調試步驟與其他語言有一定差異性，因此單獨進行介紹。目前 php7.2 runtime 不支持端云聯調斷點調試。
step1：首先啟動 Serverless 應用，打開終端，進入目標項目下，輸入啟動指令 s local start --config vscode --debug-port 3000，啟動指令執行后，會在當前項目下會生成 .vscode/launch.json 文件，如前文所述，同時項目會阻塞住，此時需要執行 Ctrl+C 退出。
step2：啟動斷點調試器，打開 VSCode 界面，然后打開 s.yml 中 codeUri 所存放的源代碼，為其打上斷點，接著點擊開始調試按鈕，具體執行如下圖所示。
step3：開始斷點調試：打開一個新的終端頁面，再次輸入啟動指令 s local start --config vscode --debug-port 3000后，本地的函數計算執行環境會阻塞等待調用，并打印訪問 http 函數的 url 字段，可以通過 curl 指令、瀏覽器等方式訪問 Http 函數的 URL，此時程序啟動，斷點調試開始。
step4：結束斷點調試：調試完成后，主動關閉斷點調試器，然后在啟動指令終端頁面，執行 Ctrl+C 即可退出調試進程。
2）Intellij
基于 Intellij 進行斷點調試時，針對不同語言需要手動在 IDE 中配置相應地斷點調試器，由于使用 Intellij 開發最多的語言是 Java，同時更換 IDE 后，唯一不同的步驟只有“啟動斷點調試器”，因此接下來我們將以本地調試 Java Event 函數為例，對“啟動斷點調試器”步驟進行詳細說明。
step1：啟動 Serverless 應用： 由于 Java 是編譯型語言，因此在開始前需要對程序進行打包，本文示例會使用 mvn package 對函數打包，然后執行啟動指令 s local invoke --config intellij --debug-port 3000。
step2：啟動斷點調試器：打開 Intellij 界面，在菜單欄依次選擇 Run -> Edit Configurations。
隨后如下圖所示，新建一個 Remote JVM Debug。
新建 Remote JVM Debug
接著，自定義調試器名稱，并將端口設置為 3000，如下圖所示。
Intellij 調試器配置
最后，打開 s.yml 中 codeUri 存放的源代碼，為其打上斷點，接著點擊開始調試按鈕，如圖所示。
Intellij 啟動斷點調試器
3）Pycharm
當前只有本地調試能夠在 Pycharm 中進行斷點調試操作，支持的運行時有 python2.7 和 python3兩個版本。在 Pycharm 中進行斷點調試時，不僅需要在 IDE 中配置斷點調試器，還需要對使用者的源碼進行侵入式修改，由于操作步驟內容與常規內容有所不同，接下來我們詳解一下這部分的調試步驟。
step1：啟動 Serverless 應用：首先，打開終端，進入目標項目下，輸入啟動指令:
# event 函數
$ s local invoke --config pycharm --debug-port 3000
# http 函數
$ s local start --config pycharm --debug-port 3000
與之前不同的是，Event 函數啟動指令執行完成后，并不會出現阻塞的情況，而是會直接執行成功。此時就需要記錄 "Tips for PyCharm remote debug" 內容，具體內容示例如圖所示，記錄完成后，如果是 Http 函數，則輸入 Ctrl+C 退出啟動程序。
Tips for PyCharm remote debug 內容示例
step2：接下來啟動斷點調試器：啟動斷點調試器主要包含 IDE 斷點調試器配置和源碼更新兩部分。
首先，打開 pycharm 界面，在菜單欄依次選擇 Run -> Edit Configurations。
接下來如圖中所示，新建一個 Python Debug Server。
新建 Python Debug Server
隨后設置自定義調試器名稱，并基于圖五中獲取的內容配置 IDE host name、Port 以及 Path mappings 這三個調試器配置的詳情，如圖中所示。
pycharm 調試器配置
隨后打開 s.yml 中 codeUri 存放的源代碼，將例圖中（Tips for PyCharm remote debug 內容示例）的代碼內容粘貼到代碼開頭，然后按需在源碼指定位置打上斷點，接著點擊開始調試按鈕，具體操作如圖 （pycharm 啟動斷點調試器）所示。
Tips for PyCharm remote debug 內容示例
pycharm 啟動斷點調試器
step3：開始斷點調試：打開終端，并進入目標項目，執行啟動指令，p.S.此時可以不用帶上斷點調試的相關參數。
# event 函數
$ s local invoke
# http 函數
$ s local start
Event 函數啟動指令執行后會直接進入斷點調試階段；Http 函數啟動指令執行后，可以先通過 curl 指令、瀏覽器等方式訪問 Http 函數的 URL，此時程序會啟動，斷點調試就開始了。
step4：結束斷點調試：調試完成后，主動關閉斷點調試器，對于 Http 函數而言，在啟動指令終端頁面，需執行 Ctrl+C 方可退出調試進程。
Serverless 應用的調試雖然備受詬病，但是各個云廠商并沒有因此放棄在調試方向的不斷深入探索。以阿里云函數計算為例，目前支持提供在線調試、本地調試、端云聯調等多種調試方案。而 Serverless Devs 工具所提供的應用調試能力也十分全面了。
上文是我所分享的一些實操經驗，但是在過程中也發現了一些待改進的點，如：
希望本文對你有些幫助。
默認調試參數
Runtime | Default Debug Args |
nodejs 6 | --debug-brk=${debugPort} |
nodejs 8/10/12/14 | --inspect-brk=0.0.0.0:${debugPort} |
python 2.7/3 | -m ptvsd --host 0.0.0.0 --port ${debugPort} --wait |
java 8/11 | -agentlib:jdwp=transport=dt_socket,server=y,suspend=y,quiet=y,address=${debugPort} |
php7.2 | remote_enable=1 remote_autostart=1 remote_port=${debugPort} remote_host=${ip.address()} |
斷點調試動圖
下面的動圖教程均已提前完成文中提到的“前置操作”步驟，若要參考具體動圖進行實踐，請先完成上文“前置操作”的相關流程。
1) VSCode
本地調試 Event 函數
具體操作請前往下方鏈接查看：
https://www.bilibili.com/video/BV1Ba41147wq?spm_id_from=333.999.0.0
本地調試 php7.2 event 函數
具體操作請前往下方鏈接查看：https://www.bilibili.com/video/BV1dL4y1L7HZ?spm_id_from=333.999.0.0
端云聯調 Event 函數
具體操作請前往下方鏈接查看：https://www.bilibili.com/video/BV15S4y117Kz?spm_id_from=333.999.0.0
本地調試 Http 函數
具體操作請前往下方鏈接查看：https://www.bilibili.com/video/BV1gi4y1X7g4?spm_id_from=333.999.0.0
本地調試 php7.2 Http 函數
具體操作請前往下方鏈接查看：https://www.bilibili.com/video/BV1nY411772A?spm_id_from=333.999.0.0
端云聯調 Http 函數
具體操作請前往下方鏈接查看：https://www.bilibili.com/video/BV1A44y1P7yg?spm_id_from=333.999.0.0
2) Intellij
本地調試 Event 函數
具體操作請前往下方鏈接查看：https://www.bilibili.com/video/BV1S34y147Zf?spm_id_from=333.999.0.0
端云聯調 Event 函數
具體操作請前往下方鏈接查看：https://www.bilibili.com/video/BV19L4y1L7AF?spm_id_from=333.999.0.0
3) Pycharm
本地調試 Event 函數
具體操作請前往下方鏈接查看：https://www.bilibili.com/video/BV1GF41137x5?spm_id_from=333.999.0.0
本地調試 Http 函數
具體操作請前往下方鏈接查看：https://www.bilibili.com/video/BV1HF41137dQ?spm_id_from=333.999.0.0
Serverlesss Devs 社區官網：http://www.serverless-devs.com/
原文鏈接：https://developer.aliyun.com/article/880880?utm_content=g_1000335158
本文為阿里云原創內容，未經允許不得轉載。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
