十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

浏览器里玩转树莓派Pico:用Web Serial实现MicroPython在线调试

浏览器里玩转树莓派Pico:用Web Serial实现MicroPython在线调试 玩树莓派 Pico 的朋友绝大多数对一套流程熟得不能再熟找根 USB 线把板子插到电脑上打开 Thonny写几行machine.Pin操作代码点运行然后在 REPL 里看输出。桌面端这套玩法确实成熟但有个很现实的问题——并不是所有场合你都愿意背着笔记本。出差路上想改个延时参数课堂上学生手上只有手机实验室里电脑被借走只剩台平板这时候怎么办答案就是我最近一直在用的方案MicroPython 浏览器 IDE。打开网页授权串口插上 Pico直接就能进入 MicroPython 的 REPL 环境开始调试全程不用装任何软件也不受 Windows、macOS、Linux 的系统限制。手机、平板、甚至别人电脑上的临时浏览器都能变成一台“调试终端”。这篇文章我就把整个工作原理、硬件准备、实操步骤和踩坑记录都梳理一遍希望能帮你少走弯路。1. 为什么我劝你在浏览器里写 MicroPython1.1 传统调试流程的痛点在桌面上用 Thonny 调 Pico其实问题不少。首先是环境依赖不同系统下串口驱动、Python 版本、IDE 安装包维护起来很烦。Windows 上偶尔还碰到 USB 识别冲突macOS 上要授权“输入监控”权限Linux 上串口权限又要加用户组。这些折腾对老手来说不致命但对刚入门的同学来说可能还没开始写代码就先被环境劝退了。其次是设备绑定。Thonny 虽然跨平台但本质上还是“一台电脑 一根 USB 线”的传统工作流。你出门不可能为了改个sleep(0.5)专门打开笔记本课堂上一个班几十块 Pico如果每台电脑都要提前装好驱动和 IDE光是环境问题就能消耗半节课。更别提临时要用别人电脑演示总不能在人家机器上装一堆东西。还有一个很隐蔽的痛点串口调试助手类工具和代码 IDE 通常是分离的。传统方式下你要么用 Thonny 写代码跑 REPL要么用专门的串口调试工具看数据两者切换很割裂。浏览器 IDE 把编辑器、终端、文件管理放在一个页面里逻辑上更顺手。1.2 浏览器 IDE 到底在“玩”什么你可能会好奇浏览器凭什么能直接操作一个 USB 设备这里的关键是 Web Serial API。这是浏览器提供的一套 JavaScript 接口允许网页在用户授权的前提下直接和串口设备双向通信。简单说浏览器变成了一个“串口调试助手”只不过它跑在网页里不需要额外安装驱动和软件。Pico 烧录 MicroPython 固件之后板载的 USB 接口会虚拟成一个串口设备USB CDC对外提供一个叫做 REPL 的交互式解释器。REPL 全称是 Read-Eval-Print Loop你可以把它理解成一个“实时问答客服”——你输入一行 Python 命令它立刻执行并返回结果。浏览器 IDE 做的事情就是把这个“问答客服”的输入框和输出框搬到网页上再配上代码编辑器和文件管理功能。市面上的这类网页 IDE界面布局大同小异左侧是代码编辑器中间或下方是 REPL 终端还会带一个文件浏览区用来查看和上传 Pico 内部的.py文件。所有 UI 都是 HTML、CSS、JavaScript 实现的不依赖任何本地运行时。这也意味着只要浏览器支持 Web Serial你就能获得几乎一致的调试体验不管用的是电脑还是手机。1.3 适合谁用、解决了什么问题这套方案最有价值的地方是把“IDE 安装”这件事彻底从本地设备上剥离了。对下面这几类人尤其友好嵌入式入门学习者不用先折腾环境打开网页就能写代码看现象学习曲线瞬间平缓。现场调试工程师在外场临时改参数、跑一段测试脚本手机加 OTG 线就能完成。课堂/培训场景学生自带手机或平板老师给一个链接所有人就能进同一套环境。快速原型验证爱好者想验证一个舵机角度、读一个传感器数值没必要打开完整桌面 IDE。从行业角度看这种“浏览器即 IDE”的模式也把开发工具的门槛降低了。以前调试一块开发板最低配也要一台电脑现在一台安卓手机就能搞定。对 MicroPython 生态来说这等于把用户覆盖范围从“有电脑的人”扩大到了“有手机的人”影响范围其实比想象中更大。2. 跑通手机调试前先把原理和准备工作理顺2.1 核心原理Web Serial 不是黑魔法Web Serial 的本质是对系统串口操作的一层封装。在浏览器里你需要通过navigator.serial.requestPort()让用户主动选择一个设备拿到端口对象之后再调用port.open({ baudRate: 115200 })打开串口。注意这里有个关键设计浏览器绝对不允许网页在用户没有点击操作的情况下自动连接串口。所以你在网页上必须点一下“连接”按钮浏览器才会弹出设备选择框这是安全机制不是 Bug。还有一个细节Pico 的 USB 虚拟串口不像某些开发板那样依赖 CH340、CP2102 这类外置转接芯片。RP2040 芯片内部直接集成了 USB 控制器MicroPython 固件把 USB 枚举成一个 CDC 串口设备所以插上电脑或手机后基本是免驱的。这一点在手机上特别重要因为手机系统一般不会让你手动装驱动能免驱的设备才能顺利被浏览器识别。REPL 本身也不复杂。MicroPython 启动后串口上跑的就是一个 Python 交互提示符波特率默认 115200。你在浏览器终端里敲print(hello)数据通过 Web Serial 发送到 PicoPico 执行完再把结果传回来显示在页面上。整个过程就是“浏览器终端 - USB 虚拟串口 - MicroPython 解释器”这条链路。2.2 硬件准备与烧录 MicroPython 固件手机端调试 Pico硬件上有个容易被忽略的点手机通常没有标准 USB-A 口而 Pico 板载的是 micro-USB 接口部分第三方板卡是 Type-C。所以你需要这样一套连接方案一台 Android 手机推荐后面解释原因OTG 转接头Type-C 或 Micro-USB 转 USB-A 母口一根 USB-A 转 micro-USB 数据线必须是数据线不是纯充电线。充电线里面没有数据引脚插上之后系统根本识别不到串口。固件烧录最好提前在电脑上完成一次搞定后续就不用再动了。方法是按住 Pico 板子上的 BOOTSEL 按钮然后插入 USB 线电脑上会弹出一个名为RPI-RP2的 U 盘。把下载好的 MicroPython UF2 固件文件直接拖进去Pico 会自动重启并进入 MicroPython 环境。如果你手头没有电脑也可以在支持的浏览器里打开树莓派官方的 Web Flash 工具同样可以完成 UF2 写入只是对浏览器兼容性要求更高新手还是建议先借一台电脑刷好。刷完之后可以在 REPL 里输入下面这段代码验证固件版本import sys print(sys.implementation)正常会输出 MicroPython 的版本号、平台信息等。看到这行信息说明固件和 USB 串口链路都没问题。2.3 浏览器版本和权限设置手机浏览器选择上我的经验是优先用 Android 手机上的 Chrome 或基于 Chromium 内核的浏览器。Web Serial 在 Chrome 系的支持最完整设备选择、读写稳定性都比较靠谱。iOS 上的 Safari 虽然也在逐步支持 WebUSB 相关能力但和 Pico 的串口配对成功率波动很大还要用到 Lightning 转 USB 相机适配器门槛较高我一般不建议新手用 iPhone 来做这件事。Web Serial 还有一个硬性要求页面必须运行在安全上下文里。简单说就是网页地址必须是https://开头或者是localhost。如果你打开的是一个纯http://地址浏览器不会提供串口连接能力点“连接”按钮也没反应。手机浏览器打开 IDE 页面时一定要确保走的是 HTTPS否则功能会直接消失。权限设置方面第一次连接时浏览器会弹出授权询问选择“允许”即可。如果手机系统里有“USB 默认配置”之类的选项保持默认或者选择“传输文件 / MIDI”模式通常都能识别。另外如果之前连接失败过浏览器可能记住了错误状态最直接的解决办法是清除该站点的缓存和权限记录再重新访问。平台浏览器Web Serial 支持情况备注AndroidChrome / Chromium 系支持较好优先推荐Android部分国产定制浏览器可能被阉割需实测为准iOSSafari兼容不稳定适配器门槛高Windows / macOSChrome / Edge支持桌面端同样适用3. 实操全过程手机浏览器连接 Pico 并在线调试3.1 进入 IDE 并完成串口授权先别急着打开网页按下面顺序准备手机装上 OTG 转接头再插上 USB 数据线另一端接 Pico。此时 Pico 板载的电源 LED 会亮说明已经由手机供电。打开浏览器访问你选的 MicroPython 网页 IDE 地址务必确认是 HTTPS。这类工具一般打开后就是一个完整的开发环境界面不需要注册登录。点击页面上的“连接 / Connect”按钮。这里注意一定是点击按钮之后浏览器才会弹出设备选择列表不是页面加载完自动弹。在弹出的列表里找到类似Board in FS Mode、USB Serial、RP2字样的设备选中并点击连接。如果系统弹出 USB 权限授权窗口选择允许。第一次授权成功后会看到一个提示符这表示你已经进入 MicroPython 的 REPL 了。这里要提醒一个细节打开串口时IDE 里通常有波特率选项默认是 115200。虽然 Pico 的 USB CDC 虚拟串口本身会忽略波特率但保持 115200 和其他工具一致能避免在某些浏览器或转接设备上出现莫名其妙的兼容问题。3.2 连接后打开 REPL 的完整步骤连接成功后如果终端里什么都没有别慌多半是板子上正在跑某个程序。此时按一下CtrlC中断当前程序再按一下回车就能看到提示符。这一步在手机端尤其常见因为手机触屏键盘上的控制键不太好按很多人会卡在这里。看到提示符后先做几个简单的测试确认链路通畅print(hello pico)如果终端返回hello pico说明浏览器到 Pico 的通信没问题。接下来可以直接控制硬件from machine import Pin led Pin(25, Pin.OUT) led.toggle()Pico 板载 LED 会亮起或熄灭。Pin(25)对应的是板载 LED 的 GPIO 编号不同板卡可能略有差异如果你用的是第三方 Pico 板先查一下原理图。在手机上敲代码时有几个小技巧能大幅提升效率一是切换到英文输入法避免中文输入法把标点和按键吃掉二是利用代码片段提前准备常用命令直接复制粘贴到终端三是如果 IDE 支持 Tab 补全可以试试输入Pin(后按 Tab 看提示能省不少事。3.3 写一段真实程序并在线调试板载 LED 呼吸灯和舵机只开关 LED 不够过瘾写一段相对完整的程序来演示在线调试。下面是板载 LED 呼吸灯代码from machine import Pin, PWM import time led PWM(Pin(25)) led.freq(1000) while True: for duty in range(0, 65535, 512): led.duty_u16(duty) time.sleep_ms(2) for duty in range(65535, 0, -512): led.duty_u16(duty) time.sleep_ms(2)把这段代码粘贴到 REPL 里运行Pico 板载 LED 就会慢慢变亮再慢慢变暗。想停止就按CtrlC。这里用的PWM是 MicroPython 的硬件 PWM 模块duty_u16的范围是 0 到 65535对应占空比 0% 到 100%。再做一个更有实际意义的实验用 Pico 控制舵机。舵机控制其实也是 PWM但频率要求是 50Hz也就是周期 20ms通过改变高电平脉冲宽度来控制角度。常见的 SG90 舵机脉宽 0.5ms 对应 0 度1.5ms 对应 90 度2.5ms 对应 180 度。换算成 16 位占空比计算公式是duty 脉宽 / 20ms × 65535三个典型角度对应的占空比大概是这样舵机角度脉宽16位占空比约0 度0.5ms163890 度1.5ms4915180 度2.5ms8192把舵机信号线接到 Pico 的 GPIO15代码可以这样写from machine import Pin, PWM import time servo PWM(Pin(15)) servo.freq(50) servo.duty_u16(1638) # 转到 0 度 time.sleep(1) servo.duty_u16(8192) # 转到 180 度 time.sleep(1)这个实验在手机上调试特别方便你不需要修改代码再重新上传直接在 REPL 里一行一行敲或者把代码片段粘贴进去观察舵机实时反应。如果舵机抖动或者不动先检查信号线有没有接对再确认 PWM 频率是不是 50Hz。舵机供电也要注意单个舵机可以靠 USB 口的供电驱动但如果带多个舵机或者大扭矩舵机最好外部独立供电否则可能把手机 USB 口拉保护。3.4 文件上传下载与远程运行REPL 适合临时测试但当你把代码调通了最好保存成.py文件这样 Pico 重启后还能自动运行。浏览器 IDE 一般自带文件管理区你可以看到 Pico 内部的文件列表常见的默认文件包括main.py、boot.py以及部分库文件。上传代码的操作很简单在编辑区写好代码点击保存或上传按钮选择保存到 Pico 即可。如果 IDE 支持直接指定文件名建议保存为main.py。MicroPython 启动时会自动执行main.py这就是所谓的“开机自启程序”。这里要特别提醒几个文件操作的坑换行符必须用 LF不能用 CRLF。手机上如果用某些文本编辑器编辑可能会存成 CRLF导致 Pico 启动时语法报错。最好直接用浏览器 IDE 自带的编辑区写代码。文件名避免空格和中文。MicroPython 的底层文件系统对中文名支持不好可能出现无法打开文件的错误。上传大文件时手机屏幕不要熄灭。当手机息屏或切后台浏览器可能会暂停运行串口传输就会中断导致文件损坏。保存好main.py之后按CtrlD软重启Pico 会重新运行main.py。如果你的程序里有死循环重启之后终端可能被刷屏甚至没有提示符这时候按CtrlC中断就行。如果程序一开机就崩溃到连 REPL 都进不去按住 BOOTSEL 再上电进入刷机模式重新拖入 UF2 固件即可恢复。4. 调试高频翻车现场与排查记录4.1 浏览器里找不到串口设备这是我被问到最多的问题。连接按钮点了但设备列表里空空如也或者压根不弹设备框。排查顺序建议这样走先确认页面地址是https://不是http://。这一步有 80% 的人中招。确认 Pico 已经通过 OTG 线连接板载电源 LED 亮。如果 LED 不亮说明线材或转接头有问题换一根数据线试试。确认连接动作是通过点击按钮触发的。如果网页里有一个“自动连接”的开关先关掉用最原始的点击操作。换浏览器实测。Android 上优先用 Chrome部分国产浏览器会阉割 Web Serial 支持看起来界面正常实际不提供接口。在手机系统设置里找到正在使用的浏览器 App检查是否有 USB 权限或者尝试清除该浏览器的缓存和存储空间。还有一种情况之前配对过但这次没出现。原因是浏览器和设备之间的配对记录可能被清除或者设备换了 USB 口。重新点击连接再选一次设备就行。4.2 连接后终端无反应或乱码这种情况一般发生在连接成功但数据链路不通的场景。先做两个操作按CtrlC然后按一下回车看是否出现。如果还是没反应把串口断开重新连接特别是在切换了浏览器页面之后。乱码一般和波特率设置有关。虽然 Pico 的 USB 虚拟串口对波特率不敏感但部分浏览器或转接芯片在握手阶段还是会按设定值初始化。统一把波特率设置成 115200 就能解决 99% 的问题。另外如果在 REPL 里看到一堆花屏字符有时候是按键序列发送太快MicroPython 还没来得及处理等一秒钟再输入下一条命令。如果是刚烧录完固件就出现这种情况还有一种可能固件本身是损坏或不适配的 UF2 文件。重新去官方下载对应板卡型号的 MicroPython 固件重新刷一遍。最典型的成功标志是刷完固件后首次进入 REPL终端顶部会显示 MicroPython 的版本信息和版权声明。4.3 文件同步失败和权限冲突文件上传失败常见原因有两个一是手机息屏或切后台导致浏览器挂起二是同时打开了多个页面连同一个串口。同一个串口同一时刻只能被一个页面独占如果你开着调试页面又打开文件管理页面两边都会抢连接结果就是各种报错。牢记同一时间只保留一个浏览器页面操作 Pico。如果上传main.py后 Pico 启动异常先确认代码里没有语法错误。可以在 REPL 里先手动执行一遍代码没问题再保存为文件。如果文件系统已经损坏比如反复写入中途拔线导致磁盘结构出问题REPL 里会出现OSError: [Errno 31] EIO之类的错误这时候没有捷径重新刷固件、重新传文件。还有个小细节网页 IDE 的文件管理区有时默认保存路径是设备根目录。如果你把文件保存到/lib目录调用时就要写from lib.xxx import ...。新手最容易在这里搞混看到ImportError就以为是代码问题实际是路径不对。4.4 手机端调试的省心小技巧踩过几次坑之后我总结了一套手机端调试的固定姿势分享给你用手机支架固定 Pico。调试时你会频繁看屏幕、看板载 LED、看导线连接板子和手机并排放置能省很多事。代码片段先存手机备忘录。常用测试代码比如 LED 闪烁、舵机角度、传感器读取提前存好到现场直接复制不用临时敲。把 IDE 页面添加到主屏幕。浏览器菜单里选择“添加到主屏幕”下次打开就像 App 一样不用每次输网址。注意手机供电能力。Pico 本身功耗很低但如果你外接舵机、电机这类大电流设备尽量用独立电源别全靠手机 USB 口供电既保护手机也保护板子。善用CtrlD软重启。调试main.py时改完文件按CtrlD就能重启板子并自动运行最新代码比拔线重新插快得多。最后再分享一点个人体会用这个方案调试 Pico 一段时间后我的结论是它并不会完全替代 Thonny但在特定场景下真的是救急神器。我出差时只带一根 OTG 线和一块 Pico就能在车上改完一段传感器测试代码培训时学员用手机和平板也能在五分钟内跑通一次 LED 闪烁实验。浏览器 IDE 这件事本质是把“调试能力”从笨重的桌面环境中解放了出来。最后再分享一个小技巧如果你提前把网页 IDE 缓存好遇到没有网络的环境也能打开编辑器继续写代码代码会保存在浏览器本地等恢复网络后再连接 Pico数据不会丢非常实用。
返回列表