整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者：陈亦涛来源：大转转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小时内与您取得联系。
